Choosing Between YUI CSS & Blueprint
August 13th, 2007There are two extremely powerful CSS frameworks available to web developers at this time: blueprint & yui css. Both provide a basic css reset, simplified font formating & powerful layout tools. It is the layout tools that will most influence your decision as to which framework makes sense for your project.
Blueprint is based on a strict layout grid. All objects are defined in terms of 14 columns that define a 950px wide layout. Complex layouts can be defined by carefully constructing columns & collections of columns. There is no limit to recursive depth, however no column can be less than 70 pixels wide and all columns are a multiple of 70 pixels. This ensures that everything on the page lines up cleanly.
YUI uses a more flexible template & divider route. All YUI layouts begin as a document with a predefined width ( 750px, 950px, 974px, 100% or a custom width). A single sidebar can then be added to the left or right in a predefined width ( 160px, 180px, 240px, 300 px). Lastly, the body can be recursively divided using grid tools into thirds, quarters & halves.
So, which one should you use?
Use YUI if you need a layout in a dimension other than 950px or if your layout requires division by thirds or quarters across the entire width.
Don’t use YUI if you need to create objects that are a width other than 2/3, 1/3, 1/2, 1/4 or 3/4 of their container e.g. (5/6, 7/8) or if you need more precise control of dimensions.
Use Blueprint if you need fine grained control & precise positioning in a standard 950px layout. Generally, Blueprint based layouts are much more manageable over the long run & easier to code. Unfortunately they have higher bandwidth consumption & fewer options than a YUI layout.
Blueprint is based on a strict layout grid. All objects are defined in terms of 14 columns that define a 950px wide layout. Complex layouts can be defined by carefully constructing columns & collections of columns. There is no limit to recursive depth, however no column can be less than 70 pixels wide and all columns are a multiple of 70 pixels. This ensures that everything on the page lines up cleanly.
YUI uses a more flexible template & divider route. All YUI layouts begin as a document with a predefined width ( 750px, 950px, 974px, 100% or a custom width). A single sidebar can then be added to the left or right in a predefined width ( 160px, 180px, 240px, 300 px). Lastly, the body can be recursively divided using grid tools into thirds, quarters & halves.
So, which one should you use?
Use YUI if you need a layout in a dimension other than 950px or if your layout requires division by thirds or quarters across the entire width.
Don’t use YUI if you need to create objects that are a width other than 2/3, 1/3, 1/2, 1/4 or 3/4 of their container e.g. (5/6, 7/8) or if you need more precise control of dimensions.
Use Blueprint if you need fine grained control & precise positioning in a standard 950px layout. Generally, Blueprint based layouts are much more manageable over the long run & easier to code. Unfortunately they have higher bandwidth consumption & fewer options than a YUI layout.
Previous Post 
Next Post 
Latest Posts
9 Comments
September 6th, 2007 at 8:52 am
[…] by Dav Glas’ Grids Builder for YUI CSS. The YAML builder has been […]
September 8th, 2007 at 8:55 am
[…] presents Choosing Between YUI CSS & Blueprint » By Don Albrecht » article » Ajax Bestiary posted at Ajax Bestiary, saying, “With all the recent hype surrounding the Blueprint CSS […]
September 18th, 2007 at 1:01 pm
I appreciate the blogroll link.
September 18th, 2007 at 1:04 pm
You’re welcome.
September 27th, 2007 at 5:25 pm
This is actually not correct. Blueprint doesn’t mandate that you use 950px layouts; that’s on the default. If you open up grid.css, you can make your layouts any width you like as long as you use this formula:
Total width = (columns * 40) - 10
In fact, I’ve made many layouts with Blueprint that were anywhere from 600 to 1500 pixels wide. So, it’s not true what you say about Blueprint!
September 28th, 2007 at 8:00 am
I agree and probably should have been clearer. I also should point out that this post was based on blueprint .3. Blueprint now uses the 40 pix column instead of the 70.
Several of the point still stand regarding the need for fixed width, problems with fractions and the fact that layouts larger than 24 columns can be tricky to implement.
Thank you for the correction, It’s appreciated.
September 28th, 2007 at 8:03 am
I should also point out that Grid.css is a very easy to modify file & clearly documented, but developers lacking strong CSS skills may be reluctant to do so.
October 6th, 2007 at 10:49 am
Thank you for sharing!
February 16th, 2008 at 10:37 am
Personally, I’d go with Blueprint. I wish Blueprint website has a grid builder tool just like YUI. That is one heck of an online tool to start building a CSS framework.
Leave a Reply