CSS frameworks for Responsive Design

by Andy Carroll, 27 Apr 2015

Responsive Design for mobile friendly websites has now become a necessity rather than a luxury. It can be implemented in many ways but generally uses CSS media queries to read a device type and width then adjust the display accordingly.

The latest best practice is "mobile first" approach which defines the default base layout targeting small screens. Then each increase in width has style markup that increases features and layout complexity.

The quickest and most reliable method of defining the various device breakpoints is to use a CSS framework. The two major frameworks are Twitter Bootstrap and Foundation which are both equally good. Both these frameworks come with a wide range of user interface components that help define and style layout columns, forms, buttons and navigation.

After loading the CSS and JavaScript libraries in you code you can then markup HTML with special predefined CSS class declarations which handle the default styling. You will then likely want to override the default CSS declarations with your own colours, padding, fonts and sizes to fit the desired design.

One problem with using frameworks is file size and download speed. The standard libraries tend to be quite bloated and often flagged with warnings in Google page speed analysis. So taking things a step further you should also look at optimising the final CSS and Javascript files by removing unused components and style declarations then squeeze down the end file sizes to ensure the page loads as quickly as possible.

CSS Framework: Tips and Tools

If you are comfortable you can make use of a CSS pre-compiler such as LESS or SASS. Bootstrap and Foundation both provide a selection of source files for LESS and SASS so you can modify or remove the default styles directly and pump out minified optimised CSS without the need to add further overridden CSS declarations which are essentially duplications or the base styles which will end up adding extra bloat to your code. I personally like to use Grunt which runs on Node.JS as a task runner to combine, minify and process JavaScript and LESS files into single optimised XXX.min.js or XXX.min.css.
The browser developer tools built into Google Chrome or Firefox's firebug are essential for inspecting your HTML elements and determining which CSS declaration is being applied. They also help with AJAX and JavaScript development, debugging, file size, performance and broken dependencies.
Since a single minified .css can be hard to debug in the development phase, I tend to only minify at deployment time. I also override some framework styles but that is my personal preference based on balancing the extra bloat against ease and speed of development. If possible avoid the generic XXX.min.js framework JavaScript library especially when deploying. You can usually shave 50% or more in file size by removing the carousels, tabs or accordions if you don't use them in your site.
Keep web fonts to a minimum, frameworks come with the glyph icon fonts and if you add the popular font-awsome for icons too the font payload starts to become excessive.

CSS frameworks for Responsive Design

Featured News

Email Updates

Andy Carroll