Web Boilerplate

Inspired by the widely known HTML5 Boilerplate project, I created a simple template for HTML5 websites to kickstart new websites. It’s special by providing useful grunt.js tasks for your favorite preprocessors.

I’m a huge fan of the HTML5 Boilerplate project. It provides a basic template for new websites. However, I’ve found myself adding the same extensions to it over and over again, every time I created new websites. To make my own life easier, I extracted those extensions into a new project template.

Introducing Web Boilerplate

Web Boilerplate is available at GitHub as an Open Source template for new websites. It provides a few things I need most of the time when creating websites from the ground up.

• HTML5 ready index.html with the most important meta-Tags and a browser warning
• Rudimentary 404.html template
• robots.txt
• favicon
• bower
• normalize.css to unify default styles across browsers
• jQuery
• Sass and CoffeeScript
• Useful grunt tasks to build asset bundles, watch file changes and start an HTTP server

Use preprocessors

Seriously, use preprocessors. It makes one's life so much easier. The inclusion of Sass as a CSS preprocessor and CoffeeScript as a JavaScript preprocessor to the project template is the number one reason why I created this template.

I’ve used them in bigger projects, where the advantages are pretty obvious, simply because the codebase is large enough to benefit from less and cleaner code. Nevertheless, I struggled to include them into small, static websites because of the overhead they introduce by the need of task runners (Grunt, Gulp) and their appropriate configuration setup.

But when you work a lot on those bigger projects and enjoy all those goodies such as nested selectors, variables, mixins … you will reach the point where you just don’t want to work without those tools anymore, even in small projects. Finally, I wrote a Gruntfile that includes generic tasks for those preprocessors (and a number of other things, see README.md for details). Of course, the preprocessors can be replaced by others (e.g. Less, TypeScript), the ones chosen reflect by personal preferences.

Including vendor libraries

Web Boilerplate includes normalize.css and jQuery by default. Putting in additional vendor libraries is easy. Just how I included normalize.css and jQuery, install any further vendor libraries using bower.

bower install <library> --save-dev

Any CSS or Sass files should be included into the sass/application.scss by directly importing the file into it (see the normalize.css import):

// sass/application.scss
@import "../bower_components/normalize-css/normalize.css";

Any JavaScript files should be added into the concat:bundle:src array of the Gruntfile.js. This tells Grunt to include it into the JavaScript bundle by concatenating it with your own scripts:

grunt.initConfig({
// ...

    concat: {
      options: {
        sourceMap: true,
        // Always use UNIX newlines, please.
        separator: '\n'
      },
      bundle: {
        // Put any vendor library files here:
        src: [
          'bower_components/jquery/dist/jquery.js',
          'application.js'
        ],
        dest: 'js/application.js'
      }
    },

// ...
})

Handling vendor libraries this way brings in all advantages of using a package manager (bower): You don’t have to commit the vendor code into version control, you can update vendor code altogether and you get dependency management for free!

It’s Open Source

Putting everything into a GitHub repository is a good starting point for any future projects I will create. Furthermore, GitHub’s fork feature makes it easy to get a copy and modify it to other’s needs.