Project Starter - 2018

A front-end boilerplate that's easy-to-use and ready-to-go.

• Requirements
• Installation
• Usage
  • NPM Scripts
• Documentation
  • Scripts
  • Styles
• Git naming convention

Requirements

• node-js >= 6.9

Installation

To install, follow these instructions:

• npm install to install the dependencies.
• npm install -g commitizen to globally install Commitizen.

Usage

NPM Scripts

The boilerplate is powered by npm scripts. No need of Gulp or anything else. We are directly using the CLI tools of Rollup & PostCSS. You can run each script individually. For each type of asset, there are at least two scripts. One is used to build, the other to watch for changes.

All build scripts and some others all listed below, but you can also find them all in the "scripts" section of the ./package.json file.

• clean-build: remove the old build, and create the needed directories

• remove-build: remove build

• start: clean the build, build, watch and start server

• build: build the assets and the views

• build:views: copy the PHP views in the build directory

• build:scripts: rollup script with babel

• build:styles: postcss script with also node-sass

• build:icons: svg sprite generator

• build:images: images compression

• build:assets: copy fonts & medias (e.g. videos) in the build directory

• browser-sync: start server

TL;DR: To start the server, use:

npm run start

Documentation

Scripts

Configuration

Rollup is used with Babel to:

• use ES2015+ features
• use import
• use external npm modules, both ES6 and ES2015
• minify the code
• create a source map

ES Linter

We are using the Airbnb JavaScript Style Guide. You can find the configuration file in ./.eslintrc. The linter is not passing through our code. Instead, we recommend that you use a package within your text editor:

• Sublime Text: SublimeLinter, SublimeLinter-contrib-eslint, and eslint (globally installed, npm install -g eslint).
• Atom: linter and linter-eslint.

Styles

Configuration

PostCSS is used with node-sass to:

• use SCSS
• use autoprefixer
• minify the code
• create a source map

Every import is located in ./app/styles/index. They are separated into five categories:

• abstracts: configuration and helpers.
• base: basic files (reboot, grid etc.).
• components: speaks for itself (e.g. Button).
• layout: layout-related sections (e.g. Header).
• pages: page-specific styles (e.g. homepage).

SCSS Linter

We are using the Airbnb CSS / Sass Styleguide. You can find the configuration file in ./.scss-lint.yml. The linter is not passing through our code. Instead, we recommend that you use a package within your text editor:

• Sublime Text: SublimeLinter, SublimeLinter-contrib-scss-lint, ruby and scss_lint.
• Atom: linter and linter-scss-lint

Git naming convention

We are using Commitizen to automate our git messages. Simply add files to your commit and then run the command git cz. A prompt will appear and automate your process.

By default, we are using the conventionnal-changelog convention (e.g. 'feat(boilerplate): init boilerplate'). It can be paired with standard-version to automate your changelogs and publishing process.