Tweet
DOWNLOAD: Siren 1140 Grid
The responsive Siren 1140 Grid was inspired by the 1140 CSS Grid System and is my work horse grid. Optimized from 1280 browsers, the Siren 1140 grid offers the ability to nest rows within other rows and columns.
A grid system is, in short, a great way to organize content on a web page. Forget web page, its a great way to organize content in general. Don’t believe me. Well get yourself learned here and be sure to look up the name Jan Tschichold.
Most tutorials and classes in web design will go over how to set up a two or three column grid. The Siren 1140 Grid is not only a great way to achieve that but can go up to twelve columns.
I actually mean two things. The first is that the Siren 1140 grid is fluid or that, because the column sizes are based on percentages, the columns seamlessly grow and shrink based on the size of the browser; after the 1140 point the content area centers itself. The second part is based upon CSS3′s “Media Quiries”. They allow us to serve up different styles based on the size of the browser. In this case, at 767 browser width the columns collapse into a single column (only with first level columns but I’ll get to that later).
Back in the day 960 grids were the cat’s meow. Today, with bigger monitors and bigger browser widths, we need something that can make more use of the entire space. 1140 grids work great at smaller width though thanks to responsive technologies. But please be aware that some of the responsiveness is up to you in order to make your site great so I would give a look at Smashing Magazine’s tutorial if you aren’t completely comfortable with this concept yet.
That’s right. You can have columns inside of columns! This allows for more intricate designs. The tutorial on the main page for this system will explain how this happens coding wise. The secondary columns do not collapse like the first level columns which allows you to keep some grid like properties on iPads and smart phones if that’s your thing. You can also have an unlimited amount of nested columns but I don’t suggest that really… really its not needed.
Well the download includes some extra cool classes to help with flexible, centered divs and also includes a very stripped down version of my Siren framework (I’ll put this on the site at a latter date)!
You can find the grid here: Siren 1140 Grid
ENJOY!
Pingback: Siren 1140 Responsive Grid