https://github.com/roybarber/static-starter

Tailwind 3 CSS + Gulp 4 + Webpack 4 + Handlebars + Babel + BrowserSync + Netlify CLI + Netlify Functions. Speed up your development with a complete and scalable gulpjs based build system that scaffolds the project for you.
https://github.com/roybarber/static-starter

babel browsersync build css gulp gulp-sketch gulpjs netlify netlify-cli netlify-functions sass starter starter-kit starter-template static tailwind tailwindcss webpack

Last synced: 4 months ago
JSON representation

Tailwind 3 CSS + Gulp 4 + Webpack 4 + Handlebars + Babel + BrowserSync + Netlify CLI + Netlify Functions. Speed up your development with a complete and scalable gulpjs based build system that scaffolds the project for you.

• Host: GitHub
• URL: https://github.com/roybarber/static-starter
• Owner: roybarber
• Created: 2015-05-06T08:54:52.000Z (over 9 years ago)
• Default Branch: develop
• Last Pushed: 2023-03-02T10:16:20.000Z (almost 2 years ago)
• Last Synced: 2024-09-28T06:41:58.251Z (4 months ago)
• Topics: babel, browsersync, build, css, gulp, gulp-sketch, gulpjs, netlify, netlify-cli, netlify-functions, sass, starter, starter-kit, starter-template, static, tailwind, tailwindcss, webpack
• Language: HTML
• Homepage: https://static-starter.netlify.app
• Size: 12.5 MB
• Stars: 51
• Watchers: 12
• Forks: 13
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## Static Starter 2021

Tailwind 3 + Gulp 4 + Webpack 4 + Handlebars + POST CSS + Babel + BrowserSync + Netlify Deployment

For a faster version of this repo: Please see [https://github.com/roybarber/vite-static-starter](https://github.com/roybarber/vite-static-starter)

Speed up your development with a complete and scalable super simple gulpjs based build system that scaffolds the project for you. Just focus on your code. Provides a consumable mock API to build real world front ends pre-integration.

## Getting Started

### Requirements

1. [NodeJS](https://nodejs.org/en/)

2. [npm](https://www.npmjs.com/get-npm)

### Install

1. Clone this repository

2. Run `npm install`

### Run the project

|                | Task Name                                    | Description                                               | Environment |

| -------------- | :------------------------------------------- | :-------------------------------------------------------- | :---------- |

| :construction: | `npm run dev`                     | Compile dev build, start the server and fake API and watch for changes | Development |

| :factory:      | `npm run build` | Compile production build                                  | Production  |

### How to use SVG sprite?

##### Add images

1. `optional` Change color values (`fill` or `stroke`) in your SVG file to `currentColor` to support dynamic color changes.

2. Put SVG file in `src/img/svg-sprite` directory.

3. The code from your SVG file will be included in one svg-sprite and placed in `dist/img/svg-sprite/sprite.svg`

##### SVG tag

```html

  

```

You can get viewBox value from your SVG file or using devTools on the page after including sprite.svg

##### IMG tag

```html



```

In this case, the image does not respond to color changes.