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

/dist
/source
.gitignore
.jshintrc
Gruntfile.js
index.html
package.json

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.

code4-large

/js

My Javascript folder is divided in to:

/components
   example.js
   mediaquerylistener.js
/vendor
   modernizr.js
main.js

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.

code2-large

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'),
        example,
        mediaquerylistener;

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

    mediaquerylistener = new MediaQueryListener();
});

/sass

My Sass folder is divided into following folders and files:

/components
    _blocks.scss
    _buttons.scss
    _forms.scss
    _lists.scss
    _media.scss
/foundation
    _base.scss
    _print.scss
    _typography.scss
/helpers
    _media-query-output.scss
    _mixins.scss
    _reset.scss
    _variables.scss
/layout
    _footer.scss
    _header.scss
    _navigation.scss
/libs
    _jeet.gs.scss
style.scss

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.

code-large

/dist

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

/css
  style__1.0.0.css
/js
  script__1.0.0.js
/img
  logo.png

Gruntfile.js

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
grunt-autoprefixer
// JS dependency injection
grunt-browserify
// Help to improve build time
grunt-concurrent
// Local server
grunt-contrib-connect
// JSHinting on all JS files
grunt-contrib-jshint
// Minification of JS files
grunt-contrib-uglify
// Watch task
grunt-contrib-watch
// Libsass Sass compilator
grunt-sass
// To help improve buold time
jit-grunt
// Prettier output in the terminal
jshint-stylish
// Displays the elapsed execution time of grunt tasks
time-grunt

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