1. Hello Front

Boilerplate SCSS / PUG / ES6 for clean and fast Front-end project.

• Démo : https://hellofront.netlify.com/

Work on src/ folder and gulp build in dist/.

• 1. Hello Front
  
  
  
  • 1.1. Installation
    
    
    
    • 1.1.1. Node version manager
    
    
    • 1.1.2. Install Sass
    
    
    • 1.1.3. Install Yarn
    
    
    • 1.1.4. Install Gulp
    
    
    • 1.1.5. Download the dependencies NPM
    
    
    • 1.1.6. Install Tooling
    
    
  
  
  • 1.2. Commands
    
    
    
    • 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
    
    
    • 1.3.2. Works with Pug templating
    
    
    • 1.3.3. Works with JavaScript
    
    
    • 1.3.4. Working with Images
    
    
    • 1.3.5. Working with Fonts
    
    
    • 1.3.6. Working width SVG Sprite
    
    
  
  

1.1. Installation

1.1.1. Node version manager

Install NVM

nvm use

1.1.2. Install Sass

Go to sass-lang.com/install for installation in command line.

1.1.3. Install Yarn

Go to https://yarnpkg.com/docs/install

1.1.4. Install Gulp

Go to https://gulpjs.com/

1.1.5. Download the dependencies NPM

yarn install

1.1.6. Install Tooling

Use Prettier for clean your JS / SCSS files.

Plugin for IDE :

• Visual Code Studio


• Atom


• Sublime text

1.2. Commands

1.2.1. Run project

yarn dev

1.2.2. Build project

yarn build

1.2.3. Optimize SVG

yarn svg

1.2.4. Clean project

yarn reset

1.3. How it works

1.3.1. Works with SCSS

Use atomic design design for orgaznise components

The SCSS files are located in ./src/assets/scss.

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 ./src/template

• 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

1.3.3. Works with JavaScript

The Javascript files are located in ./src/assets/js.

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 ./src/assets/img

Accepted file formats : - jpg - png - gif - svg

1.3.5. Working with Fonts

The font files are located in ./src/assets/font

1.3.6. Working width SVG Sprite

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')