Web design has changed a lot the last couple of years and it’s hard to keep up with all of the new techniques. That’s why I appreciate articles like the one Awwwards published yesterday about responsive frameworks. They take some work out of your hands by summing up and briefly describing the best available responsive frameworks out there today.
If you have no clue what a responsive framework is, or what responsive even means, try and resize this browser screen and see what happens with my website lay-out. Neat huh? That’s called responsive, the lay-out adapts itself according to the size of the screen using relative (percentage) instead of absolute (pixels) column widths.
A framework is a standardized set of concepts, practices and criteria for dealing with a common type of problem, which can be used as a reference to help us approach and resolve new problems of a similar nature.
Those two combined result in a timesaving set of tools to easily create a responsive website.
If you’re mainly developing WordPress websites like me you should skip to the complete frameworks rather then the simple frameworks. They offer configurable features like styled-typography, sets of forms, buttons, icons and other reusable components built to provide navigation, alerts, popovers, and more, images frames, HTML templates, custom settings, etc.
My favourite framework has been Foundation 3 for a while now.
By default it’s setup as a 12 columned grid of 960 px wide, but you have the ability to set some variables and generate your own version. The mean reason why I prefer Foundation over Bootstrap for example is the simple syntax. This piece of code is enough to make a simple layout responsive:
<div class="eight columns">Eight column content</div>
<div class="four columns">Four column content</div>
If you don’t have time to look into the syntax yourself and just want to develop a WordPress theme with the Foundation framework already built-in, there are a few out-of-the-box WordPress themes available;