Boilerplate SCSS / PUG / ES6 for clean and fast Front-end project.
Work on src/ folder and gulp build in dist/.
Install NVM
nvm use
Go to sass-lang.com/install for installation in command line.
Go to https://yarnpkg.com/docs/install
Go to https://gulpjs.com/
yarn install
Use Prettier for clean your JS / SCSS files.
Plugin for IDE :
yarn dev
yarn build
yarn svg
yarn reset
Use atomic design design for orgaznise components
The SCSS files are located in ./src/assets/scss
.
Example SCSS hierarchy :
Use the BEM namming convention.
The PUG files are located in ./src/template
The Javascript files are located in ./src/assets/js
.
Use the ES6 syntaxe Babel convert it in ES5 for you via webpack.
The Image files are located in ./src/assets/img
Accepted file formats : - jpg - png - gif - svg
The font files are located in ./src/assets/font
The svg files for sprite are located in ./src/assets/icons
.
Uncomment the line 11 of the file ./src/template/layout/base.pug
to include them in the basic layout.
A PUG mixin is planned for use:
+icon('name-of-file', 'my-css-class')