static-starter
static-starter copied to clipboard
roybarber
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 scaffold...
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
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
Install
- Clone this repository
- 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
-
optionalChange color values (fillorstroke) in your SVG file tocurrentColorto support dynamic color changes. - Put SVG file in
src/img/svg-spritedirectory. - The code from your SVG file will be included in one svg-sprite and placed in
dist/img/svg-sprite/sprite.svg
SVG tag
<svg viewBox="x0 y0 x1 y1">
<use href="assets/img/svg-sprite/sprite.svg#YOUR_SVG_FILE_NAME"></use>
</svg>
You can get viewBox value from your SVG file or using devTools on the page after including sprite.svg
IMG tag
<img src="assets/img/svg-sprite/sprite.svg#YOUR_SVG_FILE_NAME" alt="">
In this case, the image does not respond to color changes.
roybarber