Nunjucks / PostCSS / Babel (ES2015 preset) boilerplate

Boilerplate for module based development using Nunjucks templating, PostCSS and Babel (ES2015 preset).

Requirements

• Recent version of node. It is recommend to install node using nvm.

Getting started

1. Run npm install to install dependencies.
2. Run npm start to start development server and watch for JS/CSS changes.
3. Navigate to localhost:1337.

Navigating to localhost:1337/example.html will render the view located in src/views/example/example.html.

Preparing production build

Run npm run build to generate a production build. Output is located in the dist/ folder.

HTML

Use Nunjucks for HTML templates.

CSS

CSS is processed using PostCSS. Next to autoprefixing and compression (with css-nano) the following PostCSS plugins are used:

• postcss-nested: unwrap nested rules like how Sass does it
• postcss-import: inline import rules content
• postcss-apply: custom properties sets references (mixins)
• postcss-custom-media: custom media queries
• postcss-custom-properties: variables

Javascript

You can write ES2015 style JavaScript. Babel will transform this into ES5 compatible code.

• the transform-class-properties plugin allows you to write public class methods.