Awesome Open Source
Awesome Open Source

Static Starter 2021

Tailwind JIT + Gulp 4 + Webpack 4 + Handlebars + Babel + BrowserSync + Netlify CLI + Netlify Functions + i18n Language Support

Speed up your development with a complete and scalable 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
  2. npm
  3. Netlify CLI

Install

  1. Clone this repository
  2. Run npm install

Run the project

Task Name Description Environment
🚧 npm run dev Compile dev build, start the server and fake API and watch for changes Development
🏭 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
<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.

MOre documentation to follow


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,539,835
Css (214,327
Webpack (9,651
Sass (5,969
Tailwindcss (3,608
Babel (3,229
Gulp (2,734
Netlify (2,006
Starter Kit (1,394
Starter (1,244
Build (1,161
Tailwind (760
Static (757
Starter Template (656
Browsersync (345
Gulpjs (133
Netlify Functions (130
Related Projects