After using and writing an article on 960 grid system and responsive web design, I was looking for a design framework that is grid based and also responsive. Grid based framework facilitates developers to rapidly develop UI prototypes and using a responsive web framework enables users to view your site on device of any screen resolution. And then, I came across 1140px Grid created by Australian designer Andy Taylor.
Past decade we were designing our websites for 800px and then 1024px, but, now people are using desktops or laptops with higher resolution to view your site. At the same time, number of mobile users is increasing day by day who access your website from a smaller screen usually less than 400px. The simple way to make sure that your website is viewed in higher resolutions as well as smaller resolutions is to make it responsive i.e. detect the medium where your website is being viewed and accordingly change the display to provide best possible experience to the user in terms of readability and navigability.
The 1140 grid fits perfectly into a 1280px monitor. On smaller monitors it becomes fluid and adapts to the width of the browser. 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.
Why 12 columns?
The grid is divided into 12 columns of equal widths. You might ask, why 12 columns? Well the answer is twelve divides into even columns of two, three, four or six. Or into numerous uneven combinations like seven and five or five, four, three.
Does it support all major browsers?
It works perfectly in Chrome, Safari, Firefox, IE7 & IE8.
It works alright in IE6. IE6 doesn’t support max-width, so the grid doesn’t fix to 1140px. It spans the full width of the browser. Most people using IE6 probably don’t have monitors with a resolution higher than 1280×1024 though. 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.
Gutters
Gutter means space between two consecutive columns. As the width of columns or gutters is based on percentages, it varies based on screen resolution but at full width the butters are about 40px wide.
Images
If an image size is larger than the column it is displayed in then it will be resized to the width of the column. If the size of the image is smaller than the column width then it will be displayed at its original size. If you go for 1140 gs then do not display the size of the image inline, as it’ll break the proportions when it is scaled down.
Source code:
<div class="container">
<div class="row">
<div class="threecol">
<p>Column 1</p>
</div>
<div class="threecol">
<p>Column 2</p>
</div>
<div class="threecol">
<p>Column 3</p>
</div>
<div class="threecol last">
<p>Column 4</p>
</div>
</div>
</div>
Explanation of the classes and markup
.container
Is a full width div that allows layouts to have a background that spans the full width of the browser. It also contains 20px padding on either side to keep content away from the edges when it becomes fluid. You can just use one big container, or use multiple to break the page horizontally.
.row
Is a row of columns. It centers them and defines the 1140px max-width.
.onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol, .twelvecol
Are the classes for each column. They can be used in any combination within a row that adds up to twelve or less.
.last
The last column within a row also needs this class. It removes the right margin so all the columns fit within the row.
Output of the above program:
Related topics:
The 960 Grid System Explained In Depth
