Create your own personal boilerplate

Published May 18, 2014

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.

/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.

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

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.

/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.

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:

1. I declare those to set what kind of elements the module wants, and to prevent hard-coding DOM-elements in the module. This way, I can set all the DOM-elements when I call the module, like this:
$(document).ready(function() {
BP.Foo.init({
trigger: $('#button'),
element: $('#navigation')
});
});

2/2.1: The reason I re-assign those is just because I think it looks better to write “trigger.click” instead of “opts.trigger.click”. Kind of redundant, and I should probably see if I can make it better.

So now with all the efforts of Sujatha garu & Co, Junta can relax, sit back and watch Veturi's first song. Great job guys!!Incidentally,Subha who peformed in that harikadha is daughter of maverick director and choreographer vedantham raghavayya who directed classics like devadas and suvarna sundari.