Meet Drought

| |

The internet is full of HTML/CSS boilerplates, frameworks, and barebones projects, however, this one is mine. About five years ago I slowly started building what I called my HTML/CSS Barebones. It started as a collection of code that I used in every website that I developed. It was never meant to be a framework but rather a group of common selectors that I always used. This worked out great for awhile. I copy over the style.css for each project and go from there. The problem was keeping it updated.

Originally I hardly ever kept it updated, it was easy to duplicate and get to work. It had a few bugs and really needed to be brought up to speed with HTML5 and the latest CSS3. After a break from doing client sites while working for Digimedia I figured it was time to turn my outdated little barebones into a full project and actually maintain it. Thus Drought was born. First it was time to bring the default HTML up to speed with the new HTML5 tags, which I had already been using but adding them on a per project basis. The CSS basically had a complete rewrite from my initial v1 with all the great standards and best practices that I had picked up over the previous years. It was finally a worth HTML/CSS barebone to start each project with.

About two years ago I released v2 and put it up on GitHub. I wasn't looking for people to use it, as just like other frameworks didn't fit me, I knew everybody had their own style and standards they used. When I started at CRANE | WEST it meant getting back to what I love which is working with clients and developing web sites. Drought came in extremely useful for all of us as the perfect starting point for each project. I kept the project independent on GitHub to maintain but we rolled it in to our internal CMS which meant every website for the past two years have started from this project. Together with John Hoover, we had put together exactly what worked best for us. A few months later along came H5BP which changed it all. They started putting together a set of best practices which has turned out to be an amazing resource. Drought currently pulls plenty from H5BP.

Of course Drought is much more then a boilerplate. It contains some default HTML and CSS for a two column website with a header, footer, content area and sidebar. In my case this allows me to jump directly into the design of the site by altering a few widths, margins, colors and setting some backgrounds. It currently includes a CSS reset, default styles for most selectors you would need in a content area and sidebar, ARIA roles are being used along with HTML5 elements and doctype. The head has default meta tags for Facebook, IE Apps, iPhone and of course keywords and description. jQuery and modernizr are included by default, humans.txt is ready for all the humans working on the project and 960 grid images are set as the body background for working with a grid. I know this project won't work for everybody, I'm not even sure it will work for anybody else but it works for me. It is open source so feel free to adapt it to your own or just get inspired to create your own. Just remember to not let it sit and get old, stay on top of it, keep it updated, follow projects like H5BP and always keep improving it along with each project you do.

Drought has been at v2 for awhile and although it has had plenty of changes the past year or two including ARIA roles and some CSS clean up, it still has plenty of changes coming. I plan to drop the CSS reset and adopt Necolas' normalize.css instead. I would also like to move the CSS over to LESS as well as providing a basic responsive grid. I don't plan for this to be a CSS toolkit like Bootstrap but I would like to include more selectors for typical items like alerts, tables, buttons and form elements. Those items would remain mostly unstyled like the rest of the CSS but having them there ready to style is the goal. I hope to get these improvements added and get v3 pushed out pretty soon.

As I said earlier, the internet is full of these projects but I felt like sharing what I use. If you're interested then check out for the source.

blog comments powered by Disqus