Grid systems are HTML, CSS and JavaScript frameworks. They allow developers to easily prototype and build responsive websites. If you find the right system, it can be the starting point for all of your projects. A responsive framework is becoming a necessity for developers these days, allowing us to get a basic site structure in place with responsive design supported from the start. Frameworks are cross-browser tested which also saves a lot of time.

Using grids means we spend less time doing the common or simple foundation tasks as these have been done for us. (By the way, I would call this efficient, not lazy programming!) This leaves us more time to create flexible templates, web controls, Razor views, and interactive jQuery and JavaScript elements – in other words, more time making sites usable and interactive.

FrameworkIllustrated

Popular responsive frameworks

We’ve had a play with several frameworks in the professional services team. Here’s what we've found.

Twitter Bootstrap is very popular within the design community and has lots of documentation and support. However, we’ve found it has too much extra functionality and code included – a massive 6167 lines. This means we have to spend time working out what bits we need to remove before we can get stuck into our exciting client projects.

Zurb Foundation is a bit more customisable than Twitter Bootstrap, as you can decide which bits you want to include in the download. This still mean 751 lines of code to download the basic CSS, responsive CSS, and tables. It doesn’t support below IE9, either so we’d have to spend time adding support for IE8.

We’ve found what works best for us. It isn’t the highly popular options mentioned above, or the good old 960 Grid System, but a little-known framework called Responsable.

Responsable is a very lightweight framework. It contains only 126 lines of CSS, including CSS resets and uniform styles for tables and forms.

Responsable doesn’t really need any media queries because it’s designed to automatically stretch or shrink to fit a user’s browser or device window. We may need to add our own queries sometimes to match designs, but these are few and far between.

Unlike some other frameworks, Responsable doesn’t require you to add additional divs or spans to your markup, which can affect page load time. You just need to add classes to existing wrappers and let the responsive magic happen.

Responsable comes with support for responsive images too, so pictures will always stay in proportion whether you view the site on a smartphone or a 50-inch TV.

The out-of-the-box code does have limitations and can cause layout issues on smaller screens, but these can usually be solved with a few simple media queries.

Always on the lookout

Whilst Responsable is our favourite at the moment, we’re always on the lookout for the next lightweight responsive framework to help make our lives easier.

The next framework I’ll be playing with is Pure. This is a lightweight framework with a skin builder on their website to input the main colours into the CSS ready for download. How efficient (*cough* lazy *cough*) is that…

Subscribe to our stories 

Jon Moore

About the Author

Jon is a front-end developer and technical consultant here at Zengenti. He builds and customises complex websites, and comes up with technical answers to difficult business questions. He’s been building websites with Zengenti for over five years, and has extensive experience in front and back-end code.

Follow Jon

More stories from Zengenti