We started seeing references to CSS grid frameworks and wanted to find out what they were all about. A lot of high end web sites are using these frameworks. Basically they are preset CSS files that can be added to your web pages that allow your page to use a variety of predefined div sizes with predefined gutters. There are templates that go with them that make easy-to-use overlays for Photoshop, Fireworks, and other graphics programs. You build your graphics files so to the element widths match the overlay.
When you slice and code them, you use a simple naming convention and your grid is born. They are great for putting out blocks of information, they appeal to your design eye, and you can knock them out very quickly. The resulting layouts look very professional. When you have a client that is easy to please and that likes clean layouts, this can be a freezer to oven to table solution for you Links below…
- http://960.gs/ (main site for 960 width and links to overlays)
- http://978.gs/ (site with templates to 978 and other popular grid systems, including 300px for mobile design)
- http://net.tutsplus.com/tutorials/html-css-techniques/prototyping-with-the-grid-960-css-framework/ (discusses using the grids in plain english, what they are good for and NOT good for, and the naming convention that you use when you code them)
- http://gridder.andreehansson.se/ (a JQuery grid overlay that you can add to your bookmarks