A simple frontend boilerplate to build professional web projects easily and quickly.

Features

Automation

• Gulp - Task Runner.
• Bower - Package Manager.
• Browsersync - Watch project changes and updates browsers.

HTML

• Nunjucks - Template Engine.

CSS

• Stylus - Preprocessor.
• Rucksack - Postcss Features.
• Jeet - Grid System.
• Rupture - Media Queries.

Javascript

• Browserify - CommonJS Modules.
• Karma - Javascript Test Runner.
• Jasmine - Javascript Test Framework.

Instalation

You will need to install NodeJS.

# Install Yeoman
$ npm install -g yo

# Install the Generator
$ npm install -g generator-simple-boilerplate
$ mkdir project
$ cd project
$ yo simple-boilerplate

# Start a mini server to view the project and watch their changes on http://localhost:3000/
$ gulp watch

Folder Structure

Basically the development files are in the src folder and compiled files go directly to assets.

├── assets
│   ├── css
│   │   ├── main.css
│   ├── fonts
│   ├── images
│   │   ├── favicon
│   │   ├── logo.png
│   ├── javascript
│   │   ├── build.js
├── src
│   ├── images
│   │   ├── favicon
│   │   ├── logo.png
│   ├── scripts
│   │   ├── modules
│   │      ├── my-module.js
│   │   ├── main.js
│   ├── styles
│   │   ├── base
│   │   │   ├── base.styl
│   │   │   ├── fonts.styl
│   │   ├── config
│   │   │   ├── functions.styl
│   │   │   ├── variables.styl
│   │   ├── layout
│   │   │   ├── l-footer.styl
│   │   │   ├── l-header.styl
│   │   ├── modules
│   │   │   ├── animations.styl
│   │   │   ├── container.styl
│   │   │   ├── forms.styl
│   │   ├── vendor
│   │   │   ├── normalize.styl
│   │   ├── main.styl
│   ├── views
│   │   ├── includes
│   │   │   ├── footer.html
│   │   │   ├── header.html
│   │   │   ├── metatags.html
│   │   │   ├── scripts.html
│   │   │   ├── styles.html
│   │   ├── layouts
│   │   │   ├── default.html
│   │   ├── pages
│   │   │   ├── contact
│   │   │       ├── index.html
│   │   │   ├── index.html
├── tests
│   ├── module.spec.js
├── .csslintrc
├── .editorconfig
├── .gitignore
├── bower.json
├── gulpfile.js
├── karma.conf.js
├── contact
│   ├── index.html
├── index.html
├── package.json
├── README.md

Available Tasks

• gulp or gulp watch Start watch for changes and server with Browsersync.
• gulp build Run all development tasks
• gulp build --production Run all development tasks and minify all files for production.
• gulp build:javascript Create and lint Javascript bundle.
• gulp build:styles Create and lint css files.
• gulp compile:template Compile Nunjucks template.
• gulp compile:styles Compile Stylus.
• gulp optimize:images Optimize all images.
• gulp lint:javascript Lint Javascript files.
• gulp bundle:javascript Create Javascript bundle.