1140px CSS Grid

Be modern!

The old times are gone. 960px is not enough - it's even less that tables screen width. Be modern! Start designing your websites to match 1280x1024px. Why 1140px? It's perfectly matches 1280px screen width. What's with smaller screens? That's what we called responsive websites. 1140px CSS grid will scale your website down to match smaller resolution screen (long live media-queries!). You still need to adjust your website to mobile devices but with solid grid it will be a pleasure.

How does it work?

It uses fixed dimensions for columns depending on the screen resolution with base of 1140 pixels. There are two variants so far: 12 and 16 columns. The base column size for 12 columns layout is 75px while 51.25px is the width of the single column in 16 columns grid. Why not using % widths? It cause problems - basically, it's not pixel perfect. To detect screen resolution it uses media-queries (to support old browsers we recommend using css3-mediaqueries-js.

Flexibility

1140px CSS grid gives you highest flexibility. You can build and mix 12 as well as 16 columns layouts by using single CSS file, with the same syntax (only by changing a container class - .container12 or .container16). Why fixed columns dimensions? We want it to be pixel perfect. Using % may cause problems with displaying grid correctly in all browsers. View examples.

Browser support

The grid has been designed to be cross-browser compatible. It was heavily tested with: Chrome (19.0 & 20.0), Safari (5.1), Firefox (14.0.1 & 15.0), Opera (12.0), IE 7 (7.0 WinXP), IE 8 (8.0 on WinXP/Win7) and IE 9 (9.0 Win7). It was also tested with a range of mobile devices including iPad, iPhone & Android powered devices. IE 6 was not tested and it's not officially supported.

Contributing

We don't have official support channel for the grid yet. If you want to contribute, have any suggestion, found or bug or simply want to say hello feel free to use Twitter to contact us. Just mention @aosmialowski or @flivoo on Twitter. In the future, we plan to run public Bitbucket.org repository to track issues and allow you to contribute instantly.

Documentation

.container12 .container16

Full width wrappers for all the columns. Depending on the number on the end of the class name, the container can contain 12 or 16 columns. Using multiple containers and mixing them is allowed. You can use 12 columns layout in one row and 16 columns in the next one. Additionally, it adds 10px margins to the both sides to prevent content from touching screen edges.

.row

Full width div representing a wrapper for columns.

.column1 ... .column16

Columns classes. You have to remember one thing: use the correct number in every container. Each class contain side margins of 10px which creates a gutter of 20px between each columns. Use .alpha and .omega classes to remove the margins when using nested columns.

.alpha

Removes left margin.

.omega

Removes right margin.

.prefix1 ... .prefix15

Pushes the column to the right hand side by the width of X columns, example: .prefix1 pushes the column be the width of one column.