Responsive design - Foldy 960

Jan. 15, 2012

So, started playing with a few methods for creating a site theme with responsive design today now I have the new site up and running. The first plaything was Foldy960, I began with only a quick play, as I ultimately wanted to be looking more into media-queries. But once you get it working, and start to see how it is built, it is quite simple, and enticing to use. Ideally you would start with a flexible layout, it then works using this simple premise alongside the basics of the 960px layout. You design your site for a maximum size of 960px, and then create your columns using percentages (defaults are event columns of 1, 2, or 3, or a large column followed by thinner column). As the browser resizes, these columns then shrink accordingly. If the browser shrinks down to a certain size though, the columns suddenly become full-width columns and stack themselves in the reading order of left to right.

Some useful things that have come out of my quick overview though have shown that it uses something called micro-clearfix-hack, this appears to be just another approach to fixing the way some browsers do not clear items properly. The usual fix we have used in Drupal is a similar approach using css as opposed to extra markup fixes, but this one is a little shorter. So, if you are after little wins in the world of css performance, give it a whirl yourselves.

Another thing worth noting is the media-queries used, they work beautifully, and are contained within the style.css file. This means there is less HTML markup, and that we can now look into aggregating that query better with the rest of the css.

And so... whilst you may not want your desktop version to initially be a flexible layout, this could be an excellent place to start working as a boilerplate, and they you just built upon it do display as you require. I am going to try and skin this site using this idea, and see what comes of it, then I will slowly improve it, using various tools from the .net posting 21 tools for responsive design.