1140px.com

Easy to use, cross-browser compatible & pixel-perfect CSS grid designed to help building responsive websites.

Why not 960 pixels?

960 pixels based grids were standard for last couple of years. They perfectly fitted 1024 px wide screens. Nowadays, bigger resolutions are more popular. Screens that are 1024 pixels wide are still quite popular, but those are used by mobile devices mainly. 1140px wide grid is being displayed perfectly on all screens that are 1280 pixels wide. Due to its responsiveness it works correctly on smaller screen resolutions.

How does it work?

Fixed dimensions for columns (depending on the screen resolutions) are used. The base width is 1140 pixels. The base column size for 12 columns layout is 75px while 51.25px is the width of the single column in 16 columns grid. Media queries are used to detect screen resolution and apply proper column dimensions & styling.

Who?

1140px grid was developed by Andrzej Ośmiałowski, backend programmer, frontend passionate, a founder & one of the guys behind of websnake.pl, small developlent studio. That's me. Originally, it was designed as a personal, easy to use snippet. After few months os using it, I've decided to release it as a personal project. Being really surprised by it's popularity, I've made a decision to put more effort into the project.

Browser support

I've put all my effort to make it as cross-browser compatible as possible. It was heavily tested with following browsers: Chrome > 19.0, Opera 12.0, IE 7 (7.0 WinXP), IE 8 (8.0 on WinXP/Win7), IE 9 (9.0 Win7), Safari (5.1), Firefox > 14. 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 supported. IE 7 support to be dropped in the future.

Attention! As all versions of Internet Explorer lower than 8 do not support CSS media queries you need to use third-party solution to make it working. I'd recommend css3-mediaqueries.js by Wouter van der Graaf or Respond.js by Scott Jehl.

How to contribute?

If you found a bug please report it on the issues page. You can also help developing the code by submitting your pull requests. Check out the Github repository.

Getting started

1140px grid has been designed to be ridiculously easy and painless to use. To use it in your project you need to include provided CSS file and adjust your HTML structure to match the one required by the grid. Unfortunately, we don't live in a perfect world so as always IE makes our life harder.

Usage

The basic example structure of the HTML document would looks as following:

<!--Structure for 12 columns based layout-->
<div class="container12">
    <div class="column12">
        Full width column
    </div>
</div>
<!--Structure for 16 columns based layout-->
<div class="container16">
    <div class="column16">
    Full width column
    </div>
</div>

If you face any issues with using the grid, try reading the below section or source code of this website.

Classes

.container12 .container16
1140 pixels wide 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.

Examples - 12 columns

col1

col2

col3

col4

col2

col6

col6

col7

col5

col8

col4

col1

col1

col8

col1

col1

col12

Examples - 16 columns

col1

col2

col3

col4

col5

col1

col6

col1

col2

col7

col2

col2

col8

col2

col2

col10

col3

col3

col7

col9

col16

Comments

comments powered by Disqus