4 CSS Grid Systems and Why.
Following our last CSS-related post, we decided to talk about css grid systems and the reasons to use them. If you take the time to learn how to work with these CSS frameworks, it will provide for a better programming experience with modern and appealing visual results while giving you a foundation and guidelines to start from. It allows for a efficient way of guiding the user through the page content and an easier manage experience.
CSS Grid Systems
Following our last CSS-related post, we decided to talk about css grid systems and the reasons to use them.
If you take the time to learn how to work with these CSS frameworks, it will provide for a better programming experience with modern and appealing visual results while giving you a foundation and guidelines to start from. It allows for a efficient way of guiding the user through the page content and an easier manage experience.
So here are 4 of the most famous grid-systems you can use:
-
YUI Grids CSS
-
Blueprint
-
“Yet Another Multicolumn Layout” (YAML)
-
960 Grid System
- homepage
The foundational YUI Grids CSS offers four preset page widths, six preset templates, and the ability to stack and nest subdivided regions of two, three, or four columns. The 4kb file provides over 1000 page layout combinations.
- homepage
Blueprint is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.
- homepage
“Yet Another Multicolumn Layout” (YAML) is an (X)HTML/CSS framework for creating modern and flexible floated layouts. The structure is extremely versatile in its programming and absolutely accessible for end users.
- homepage
The 960 Grid System is an effort to streamline web development workflow by providing commonly used dimensions, based on a width of 960 pixels. There are two variants: 12 and 16 columns, which can be used separately or in tandem.
Why?
HTML tables are almost dead in a modern webdesigner life and so comes CSS grid oriented layouts that allow for a balanced and solid structure of the website layout.
Let’s state some beneficts:
- Coherence Between Visual Elements
- No Nested HTML Tables
- Cross-browser support (oh yeah!)
- Time Saving (no CSS from scratch, you have a foundation!)
- Easier to manage
- Enhanced and modern visual experience
Plus, when you use CSS grid frameworks, the user browser loads the CSS file only once and keeps it cached.
For more links to articles, tools and tutorials about grid systems, visit: Designing With Grid-Based Approach (@smashingmagazine)
February 25, 2010
Check out Flurid and let me know what you think.
http://archive.kflorence.com/projects/flurid/
July 13, 2009
Thanks for the insight of your experience Anthony, great stuff!
July 13, 2009
It has increased my work flow and productivity by a huge margin! I know sometimes it gets frustrating sometimes trying to get your website compatible with major browsers but with the 960 grid system,which is what I use, it gives a good over plan for the structure of your website by ease and you can build around that in a creative sense. Personally, I think it is a treat to have them and I know of big companies who use them.
July 12, 2009
If you know what you do and can do with css they are not the way to go.
July 12, 2009
I’ve been using some for some time now and I must say, nowadays, not using them is a mistake.
Good Job h1brd.