HTML project boilerplate
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.


Dependency Status devDependency Status

Getting started

  • Requirements: node.js
  • npm install to install dependencies
  • npm start to start a watch task and a live-reloading local server
  • npm test to lint SCSS and JS
  • npm run build to create an optimized build

CSS build

CSS is compiled from Sass (SCSS) using node-sass, postcss, autoprefixer and postcss-flexbugs-fixes and minified using cleancss. normalize.css is included as a Sass partial. Sass sourcemaps are generated.

SCSS structure

  • presets/: predefined values for various things, some of them overridable (!default)
  • project/: project-based settings and variables
  • mixins/: mixins for various purposes, some of them used by the rest of the SCSS
  • base/: sensible base styles, mostly for things not covered by normalize
  • layout/: mixins and (optional) predefined classes for different types of (grid-based) layout
  • modules/: This is the part of the SCSS where “the actual work is done”, meaning it's where SCSS is actually being written using a modular approach. Apart from modules/_global.scss which is really just a placeholder, partials for every project-specific module are supposed to be created and included here.

JS build

JS is transpiled using Babel and combined and minified using uglify-js. The only JS dependency included is easy-toggle-state. JS sourcemaps are generated.

SVG build

An SVG sprite is generated from single icons using svg-sprite-generator and svgo. svg4everybody polyfill is included in the JS build.


Please note that this project includes components that all have their own licenses which may differ from the license of this project. Everything that was developed specifically for this project is under MIT license.