Skip to content
Boilerplate SCSS / PUG / ES6
HTML CSS JavaScript
Branch: master
Clone or download

Latest commit

Fetching latest commit…
Cannot retrieve the latest commit at this time.

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
gulp
src
webpack
.babelrc
.browserslistrc
.gitignore
.nvmrc
.prettierrc
README.md
gulpfile.js
package.json
yarn.lock

README.md

1. Hello Front

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

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

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 :

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')
You can’t perform that action at this time.