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…