When starting on a new project it’s important to begin with a good solid foundation that you’re comfortable with. You can start working so much faster when you have a ready to use enviroment with a good file/folder structure and Grunt-tasks to go. This is why I like having my own personal boilerplate that I use for almost all projects I work on.

Your boilerplate should be something that constantly gets improved. Keep it updated with new additions and keep refactor and re-structure it. Found some cool Sass mixin that you know you’re going to use often? Add it to your boilerplate. Found a life changing Grunt task? Add it to your boilerplate. I also try to go through my old projects to find common things I usually have, like Google Analytics tracking, and if it isn’t in my boilerplate I add it.

In this post I’ll go over how my boilerplate, which you can view in greater detail over here.
This is not ment to be a “this is how you should do it” kind of thing, but an inspiration where you can maybe pick up a few things to use in your own boilerplate.

Check out my boilerplate on Github.

Boilerplate overview


The development folders are /source/js and /source/sass which have a number of .js and .scss files inside them. Upon saving they get compiled into the /dist folder.



My Javascript folder is divided in to:


The /components folder contains major functions used on the site, which I then call from my main.js, keeping things clean and structured. In the boilerplate, I have a JS-file called example.js which serves as a starting template when I write Javascript. I also have a mediaquerylistener.js which helps me access CSS media queries through JS, which is always handy. You can read more about that here.
The vendor folder contains all the plugins I need. jQuery, Modernizr and more depending on the project.


So all that’s really happening inside main.js is initilazing functions and requiring dependencies with Browserify, it might look something like this:

/*global Modernizr */
'use strict';

var $           = require('jQuery'),
    Modernizr   = require('modernizr');

window.jQuery = window.$ = $;

$(document).ready(function() {
    var Example              = require('./components/example'),
        MediaQueryListener  = require('./components/mediaquerylistener'),

    $('.element').each(function(i, elem) {
        example = new Example({element: elem});

    mediaquerylistener = new MediaQueryListener();


My Sass folder is divided into following folders and files:


My goal with this structure is to keep everything tightly organized and modular. E.g all the button styling takes place in /components/_buttons.sass and nowhere else. This makes for a very DRY-kind-of-code, and you can easily see if you’re getting out of hand with the amount of different buttons and button styles.

This structure is what I find myself using most of the projects, of course more files are added in different projects, but this is what I find to be the bare minimum.



This is the output folder where all Sass and JS gets compiled/concatinated in to, as well as a image folder.



My Grunt setup is mostly build with speed in mind. With the help of grunt-concurrent, jit-grunt and the Libsass compiler the build time is super fast. I also use grunt-connect to easily set up a local server. The rest of the plugins are pretty basic and needed for JS/Sass development.

// Automatic vendor prefixing of CSS properties
// JS dependency injection
// Help to improve build time
// Local server
// JSHinting on all JS files
// Minification of JS files
// Watch task
// Libsass Sass compilator
// To help improve buold time
// Prettier output in the terminal
// Displays the elapsed execution time of grunt tasks

Final words

I really recommend creating your own boilerplate, you can get started so much faster and it constantly gets better and more solid. But be careful not to add too much to it though, keep it at a bare minimum with things you know you’re using in all your projects. Github is a great place for storing your boilerplate, it’s easy to update it’s accessible from anywhere.

For a more detailed view of my boilerplate, you can check it out on here:

My boilerplate Github repo