I'm currently developing my personal site using this - I'm VERY happy with it so far and I can't wait to launch it, hopefully before the year ends :)
Blog /
1140 Fluid CSS Grid System
A couple months back we offered up a FREE PSD download of the newer 978 Grid System that was orginally talked about in depth from @NickLa of Web Designer Wall fame. But just a few weeks later we became very aware that maybe there was a better alternative. Welcome to the world of the 1140px Grid System.
The new system fits a maximum width of 1140px for 1280 monitors and scales all the way down to mobiles (well, devices that understand CSS media queries) nicely. Beyond a certain point it uses media queries to serve up a mobile version, which essentially stacks all the columns on top of each other so the flow of information still makes sense.
It works perfectly in Chrome, Safari, Firefox, IE7 & IE8. And yes it works alright in IE6. IE6 doesn't support max-width, so the grid doesn't fix to 1140px but it does span the full width of the browser. The majority of people using IE6 probably don't have monitors with a resolution higher than 1280x1024 though and from experience with our clients such as the NHS that is largely right. Images are also not restrained to the width of the column because of max-width. But the extra image is hidden, rather than breaking the layout.

The only real downside (and they are worth considering if using this method for billable work) is such a grid isn't recognised on certain devices. Saying that tech is changing very rapidly so these numbers are small but again will depend on your clients audience and use. It will also mean a slight change in train of thought when it comes to designing the UI when you consider the columns will stack the smaller the resolution becomes. Again this isn't anything to be worried about it's just worth considering that does the client have the budget for the extra time you might want to dedicate or do you see the need for the client. We'll certainly be testing the water in the coming months.
To check out the theory and practice behind it all and to access all the raw files, including a PSD template for all you designers hop on over to the site. Let us know what you think and how you get on with the system before we do.
Discussions
I'm currently developing my personal site using this - I'm VERY happy with it so far and I can't wait to launch it, hopefully before the year ends :)
Seen the previews on Forrst wanting to see more now.


