Boilerplate SCSS / PUG / ES6 for clean and fast Front-end project.
Work on src/ folder and gulp build in dist/.
Node version manager
Go to sass-lang.com/install for installation in command line.
Go to https://gulpjs.com/
Download the dependencies NPM
Use Prettier for clean your JS / SCSS files.
Plugin for IDE :
How it works
Works with SCSS
Use atomic design design for orgaznise components
The SCSS files are located in
Example SCSS hierarchy :
- base/ : Unclassed HTML elements (type selector)
- atoms/ : Atoms are the basic building blocks of matter (button, input, etc.)
- molecules/ : Molecules are groups of atoms bonded together and are the smallest fundamental units of a compound (from, cards, etc.)
- organisms/ : Molecules give us some building blocks to work with, and we can now combine them together to form organisms. (header, footer, etc.)
- layout/ : Layout are the basic elment for build layout.
- page/ : Pages are specific instances of templates
- tools/ : Default mixin and functions
- utils/ : Helpers and overrides
- _settings.scss : Global variables
- app.scss : Main stylesheet
Use the SUIT CSS namming convention.
Works with Pug templating
The PUG files are located in
- layout : layout of html files generated
- mixin : for reusable pattern
- pages : the content of html files generated
- partial : includes of html pattern
- config.pug : global variables
Use the ES6 syntaxe Babel convert it in ES5 for you via webpack.
Working with Images
The Image files are located in
Accepted file formats : - jpg - png - gif - svg
Working with Fonts
The font files are located in
Works with icons font
Disabled by default, for activate do :
./gulp/config.jsat line 68 update value :
- Add SVG Files in folder
./src/assets/iconsand gulp made magic.
- Icon format: svg
- Icon size: 512x512
- Vectorize stroke