adardesign

Lately before I started working on a major site wide redesign
I was looking at the ready PSD’s and started thinking of a layout structure, so you know how it goes, You start sketching down on a paper the column’s layout etc, then you go to the inner elements sketch there layout and you end up with a custom layout structure for almost each component. it always bothered me 1. why have this floating spaghetti all over the place with tons of styles controlling almost every element in the page, there must be a better way (Ill be honest, I already played with grids like the 960.gs but somehow i didn’t connect to it, i didn’t like the pixel representation ).

Also while running my recent projects CSS thru csslint.net when i looked at the results one of them was “there are too many floats” I was like what??? How else should I have my structure if not of this element float right that one float left, where you must end up with 10′s if not hundreds of floats (for large apps) looking at the about pages you can see a detailed explanation of the rule of Disallow too many floats initially I figured, you know what? instead of having rules of float left on the elements selectors ill have a class of ‘flLeft’ and ‘flRight’ and add these classes to the elements that need them. but you know, after all you end up with a un-sementic markup and instead of spegeti css you end up with scattered classes, so whats the benefit.

another thing that bothered me was that it used to be, that any structure was tied up with pixel dimensions where lets say you have a page layout of 1000px and the main column at 750px and right bar at 250px and all the layout elements followed a specific width in pixels (at least this is what i was used to, with these layouts when you want to add some responsiveness you will need to have media query re-style all these elements etc etc. This means re-writing a lot of the styles.

Until i stumbled upon a speech that Nicole Sullivan delivered at Velocity 2010 Titled The Top 5 Mistakes of Massive CSS and there she suggests some very good practices, among them she introduces the object oriented CSS (OOCSS) (also on github ) and the media module, which tries to collect the most common scenarios and has a unified module. so i thought to extend this idea to the global layout pro lem, why leave it at the media module? we can collect the most common layout and modularize it.

This means that most layout when looking at it you can categorize them into the following layouts:
.layout-80-20 (col1 80% – col2 20%)
.layout-20-80 (col1 20% – col2 80%)
.layout-70-30 (col1 70% – col2 30%)
.layout-30-70 (col1 30% – col2 70%)
.layout-50-50 (col1 and col2 50%)

If you need some more layouts (like a 60-40) feel free to add. but you should be fine with these few layouts,
in the container that contains the layout there are 2 collumns,

The basic layout is as follows:

Layout can be and should be nested into other layouts

CSS

/*Layout structure*/

.col1, .col2{ float: left;}
.layout-reverse > .col1{ float: right;}

.layout-80-20 > .col1{ width:80%;}
.layout-80-20 > .col2{width:20%;}

.layout-20-80 > .col1{width:20%;}
.layout-20-80 > .col2{width:80%;}

.layout-70-30 > .col1{width:70%;}
.layout-70-30 > .col2{width:30%;}

.layout-30-70 > .col1{width:30%;}
.layout-30-70 > .col2{width:70%;}

.layout-60-40 > .col1{width:60%;}
.layout-60-40 > .col2{width:40%;}

.layout-50-50 > .col1, .layout-50-50 > .col2{width:50%;}

/*making sure images dont break the layout*/
.col1 img, .col2 img{ max-width: 100%;}

/*the only fix needed (because of sub-pixel rendering http://ejohn.org/blog/sub-pixel-problems-in-css/)*/
.col2{margin-left: *-2px;}

If for any reason you need a reverse layout (col2 before col1) you just add a class of layout-reverse which all it does is it says col1 float:right
also, if you will look at any layout, there is no such a thing as a layout of more then 2 columns.

you can really automate these layouts via JS or via any preprocessing (like saas) (or if your using any templating engine which can run thru the style building before its rendered on the page) which finds the class of layout-[/0-9].. and build the needed styles… (checking if the style already exists).

Please check out the JSfiddle cross browser test