1. Hello Front
Boilerplate SCSS / PUG / ES6 for clean and fast Front-end project.
Work on src/ folder and gulp build in dist/.
- 1. Hello Front
- 1.1. Installation
- 1.2. Commands
- 1.3. How it works
1.1.1. Node version manager
1.1.2. Install Sass
Go to sass-lang.com/install for installation in command line.
1.1.3. Install Yarn
1.1.4. Install Gulp
Go to https://gulpjs.com/
1.1.5. Download the dependencies NPM
1.1.6. Install Tooling
Use Prettier for clean your JS / SCSS files.
Plugin for IDE :
1.2.1. Run project
1.2.2. Build project
1.2.3. Optimize SVG
1.2.4. Clean project
1.3. How it works
1.3.1. 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.)
- 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 BEM namming convention.
1.3.2. 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.
1.3.4. Working with Images
The Image files are located in
Accepted file formats : - jpg - png - gif - svg
1.3.5. Working with Fonts
The font files are located in
1.3.6. Working width SVG Sprite
The svg files for sprite are located in
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: