Fluid 1140 CSS Grid
Feb 28th, 2012
The 1140 CSS fluid grid system is amazing. It make it so that designers can get away from designing in 1024px and developers from having to develop at 1024px. The best part with this fluid system is that it adapts to smaller screen sizes. The best size for this css grid is a 1280px screen but if you only have a 1024px screen you will still see everything like the 1280px screen. One of the best things about this template is really any developer can start using it and understand it.
High Points Of Fluid 1140 CSS Grid
The 1140px grid has a ton of great features. One of the most notable stated before is that it fluidity. This grid system can go as large as 1140px all the way down to mobile. When it gets to mobile size everything gets stacked on top of each other. Another great thing is that for designers you don’t have to design 1280, 1024, mobile, ect. You just have to design once and everything is done. Images get re-sized down smaller so you don’t have to declare inline sizes.
Cross Browser Compatibility
Another great part is the compatibility. This grid has been tested in Chrome, Safari, Firefox, IE 8, and IE 9. It does work in IE 6 but not completely because on IE 6′s lack of modernization. As for mobile browsers, it does work not in all but most modern handheld. Besides browsers and phones it works in pretty much every computer/mac web capable device. Anything from iMac, MacBook, PC laptop, old PC, Eee PC, iPad, iPhone 3G, iPhone 4, and more.
Example Of Coding
The template for this grid is made of a 12 col setup. The reason for this is because or 12′s divisibility. What this means is that in order to span across you will need cols that equal 12. This is done through classes. For instance you could use 3col, 6col, and 3col. That means in the area that you are coding you would have 3 columns that span 3/12, 6/12, and 3/12. You could technically build out a area of 12 sections by using 1col twelve times. In order to understand the coding I will give you an example it is simple to understand.
<div class="container">
<div class="row">
<div class="threecol">
<p>Column 1</p>
</div>
<div class="sixcol">
<p>Column 2</p>
</div>
<div class="threecol last">
<p>Column 3</p>
</div>
</div>
</div> |
So to explain this example we will start at the top. You first start with your container. This encompasses the area that you are setting up. Really you only have to use one container unless you want separate container to span all the way across the screen. Then inside that you have your threecol, fivecol,, and threecol. All of these are encompassed with a row. That means as it sounds everything inside will span across one row unless you go over 12cols. The last and really important part is the last class. This takes the margin off of the right side of the final object and if you don’t have this class in place then your last object will go to the next line/row. All of the widths are done in %’s. What is great with this is you can do cols inside cols. So if you wanted to take the 3col and split it up into 3 separate cols you can use the fourcol.
Live Example
As for a live example of this grid you can use the site that you are on ShaneStrong.com. It is built on the 1140px grid system. In order to test this you have to click your restore/full screen square in your browser most of the time it is the box between your minimize and close box. Once you click that grab the side of your screen and go in and out. You will see that everything re-sizes. Try this on another site. Most website don’t take advantage of a percentage or fluid template. Most are fixed widths like 980px/1000px.
More Information
If you would like more information about the grip or to download this grid system please go over to CSS Grid. They have some more examples, downloads, and probably best a photoshop template.
