(Last Updated On: August 13, 2018)

With a multitude of frameworks available, it’s difficult to decide which is best to use. There isn’t necessarily a best as such, but there is a framework suited to your project. Knowing what features to look for will help with your decision.

At the moment there is a steady focus on mobile first. 320 and Up was a pioneer of mobile first and now the likes of Foundation and Bootstrap have also taken that approach. SASS and LESS are also an aspect to consider to speed up and organise your workflow a little better. Other things to look for is a decent grid system, JavaScript libraries that include sliders, tooltips, dropdown menus and more.

When choosing a framework, it might be worth making comparisons to features and documentation. The more popular/well known frameworks tend to have excellent documentation plus a large active community that can assist in your endeavours. The following is a handful of some popular and emerging frameworks.


Bootstrap is the most well known of the current frameworks. Bootstrap was originally created as a toolkit for Twitter developers while remaining uniform to in-house conventions but at an increased speed.

Since it’s open source release in 2011, it has gone on to be the choice for many due to it’s ease of use, JavaScript libraries and it’s general styling for HTML elements. As of writing, Bootstrap is now on it’s third release (release candidate). In this edition the focus has been on mobile first.


Similar to Bootstrap in it’s extensive documentation and features. The creators, Zurb, are very active in the developers community and frequently updating and improving their work.

Foundation has a good selection of sites that embraces it’s architecture via their case studies. There are numerous templates to get you started as well. The latest version, Foundation 4, has been developed for mobile first, the JavaScript libraries rewritten and better a semantic structure.

Rock Hammer

Previously mentioned, Andy Clarke’s 320 and Up has since been shelved and superceded by Rock Hammer. Rock Hammer is built from 320 and Up, but rewritten to include latest practices and conventions. To get the greatest benefit from using this framework, you need Hammer installed on your computer.

Hammer is similar to using PHP includes, but uses HTML instead. The application uses tags to draws in all elements from your build. While it’s a paid for product, it greatly enhances your workflow – especially when used with Rock Hammer.


Skeleton is a lightweight CSS framework that is elegant in design and is one of the easiest frameworks to use. While it can be customised, Skeleton is more adaptive than responsive – making use of breakpoints accordingly.

Such is the popularity of the simplicity of Skeleton, it has been converted to WordPress themes such as Skeleton for WordPress and Super Skeleton. As Skeleton doesn’t come preloaded with multiple libraries, there hardly any code bloat at all.


A relative new kid on the block but developed by a team who know what they’re doing, Pure is a lightweight CSS framework that can be used as a standalone or complemented by the likes of Twitter Bootstrap.

Pure is incredibly lightweight and relatively easy to use. It’s responsive out of the box and has thorough documentation on how to implement it into your design. Similar to Foundation, it has some layout templates so that you can get started straight away.

The Pros and Cons of a Framework

Some designer/developers will argue that using a framework isn’t real web design – the code is bloated, the sites are generic looking and there is no raw coding skill involved.

Others will argue that it allows fast prototyping, using tried and tested methods that actually work. If there is any code you don’t need, you can either delete it or comment it out. Also all of these frameworks are free, meaning no added fees for your clients.

In Summary

The best bet is to download a variety of the frameworks that suit your project and experiment with the conventions. Each framework differs to the other, so while you may be a little more competent with one, another may have a different way of using components.

The familiar choices would be Bootstrap or Foundation – the documentation is convincing alone – but you may find that a lighter framework your ideal choice. Bear in mind that you don’t have to use all elements – you can download just the components you need.