Drought Boilerplate Review

Posted Friday, November 16th, 2012 in Reviews
Drought Boilerplate Review

There is no shortage of boilerplates and frameworks that web developers can choose from to use in their projects. I don’t know about you, but I have usually felt like many of these frameworks were bloated and sometimes difficult to understand.

That’s why I have fallen in love with the Drought boilerplate from James Fleeting. I could say Drought is a stripped down boilerplate that lets you get right into development, but that wouldn’t be a completely fair assessment. So, please allow me to explain by breaking down Drought into the three main components of any website: HTML, CSS, and Javascript

Drought is on Github

The HTML Framework

The HTML framework that is included with Drought includes many solid principles that have been combined from other top quality boilerplates. Here are some that stand out to me.

1. Open Graph Support

One of the first things that you will notice when looking at the index.html file is that there is Open Graph support. The Open Graph protocol was originally developed by Facebook and is a way for your website to integrate with social media website such as Twitter and Facebook. Have you ever noticed that when you share a link on Facebook that your link is also published along with a title, description, and image? This is due to the Open Graph protocol.

2. DNS Prefetch for jQuery from Google’s CDN

All articles that I have looked at suggest that this feature will allow the browser to parallelize the DNS lookup and potentially saving your website precious load speed.

3. Chrome Frame

Prompt users of old Internet Explorer browsers to upgrade their browser or install Chrome Frame for a better experience.

4. HTML5 Elements Included

Have you wondered about how to use the latest HTML5 elements? Drought provides an index HTML file that demonstrates how to use many of the most popular HTML5 elements.

Making Things Pretty With CSS

When I first started working with CSS, it scared me. I remember getting the CSS Zen Garden book and being amazing that these websites weren’t created with tables. That being said, CSS can be a gigantic pain to code as well as to manage on a complex website. Drought starts you off with a solid CSS foundation.

1. Formalize CSS

Have you ever tried styling forms? Yea, it’s a gigantic pain in the rear end. I completely agree with James’ choice of including the Formalize CSS and JS to help designers create forms that are appear consistent across browsers and operating systems.

2. LESS CSS

Personally, I don’t care if you use SASS or LESS, but if you’re a designer and you’re not using one of these CSS preprocessor languages… you’re missing out. LESS gives you many advantages over regular CSS. One of these being the ability to nest selectors, which acts very much like a built-in organization method.

For those of you that prefer to rock it old school with LESS, James has even included an unminified CSS file so you feel comfortable.

3. Mixins

Mixins work like functions and allow you to easily write complex CSS code by using one mixin. Here is some example code from the LESS CSS website:

// This is the mixin
.rounded-corners (@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}
// This is code you would write
#header {
  .rounded-corners;
}
#footer {
  .rounded-corners(10px);
}

Which will compile to:

#header {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -ms-border-radius: 5px;
  -o-border-radius: 5px;
  border-radius: 5px;
}
#footer {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -ms-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
}

I don’t know about you, but I hate writing vendor prefixes. Having Less and Mixins is a lifesaver.

4. *{Box-sizing: Border-box;}

Have you ever worked with a website that every time you adjusted the padding of an element, you also ended up changing the width? Yea, I hate that. Drought, by default, uses *{box-sizing: border-box;} which allows me to keep my sanity! Read what Paul Irish has to say about border-box.

Drought's Index.html file

Javascript Makes Websites Fun

Javascript has become a necessity on today’s website. From analytics to awesome jQuery effects, javascript is king for making websites useful and fun.

Drought does a good job of separating javascript into different files. For example, there are main and plugin javascript files as well as jQuery, Modernizr, and a box-border polyfill for IE6 and IE7.

I like how James had the foresight to separate out the plugins and main javascript files. I’ll be the first to admit that I’m usually guilty of just dropping all of my javascript into one file, which then takes forever to go back and find code in.

Overall Thoughts

Drought is a very flexible and robust boilerplate that will help you quickly build all of your web projects. Once you get in, you’ll appreciate not only the way the project has been organized, but also some of the convenient CSS classes that James has added.

I personally have used this project on a few sites in the past couple of months and find it to be a very powerful framework.

Be sure to check out the Drought Boilerplate on Github.

What Do You Think?

What do you look for in an HTML5 boilerplate? What framework are you currently using? Leave a comment below and let us know!

Leave a Reply