Ever wondered how all those slick "magazine" themes for WordPress and other platforms were created? Many, if not all, were designed using a CSS Grid Framework - at least in essence if not in actual fact. That is, you can use an existing CSS framework or build your own from scratch. While it's possible to design complex web page layouts without a framework, it's arguably an act in masochism. In this article you'll get an overview of the current batch of Frameworks and which you should choose to use.
What is a CSS Grid Framework?
Layout grids have been used in print publishing long before the Web. They're an invisible foundation used to achieve visual cohesion in magazine and newspaper page design and layout. They essentially amount to a lattice that divides horizontal and vertical space in consistent units where text, headlines, images, and advertising can be placed.
The same concept has been adapted for web page design for much the same reason, using CSS (Cascading StyleSheets) code to position HTML elements. In fact, many editorial sites run by large print media publishers do apply grids to achieve a look on their websites that's similar to their print content. Note that the vertical axis is not as well supported in CSS Grid systems, since a web page's height is not as much of an issue as for a printed page. (Still, that's a minor issue in web page design, unless you expect the same features as with Desktop Publishing - aka DTP - systems, which is difficult to support without a PostScript-like language for browsers to implement and support.)
Why Use a CSS Grid Framework?
Not all designers support the use of using grid frameworks over tables, or even at all. But let's face it; there are layouts you simply can't do with just HTML tables without a great deal of painful effort - and lots of nesting that's hard to decipher, should ever have to make changes.
Sure, if you use grids, you'll have to add some necessary HTML tag markup to your content, thus increasing page file sizes. Also, this means that markup and style are not truly separated - a tenet which many web designers would like to adhere to. (Some people feel, rightly or wrongly, that naysayers of CSS frameworks are designers who are worried that the need for their services will decline. Though, with this logic, coders are in trouble, too, especially with the increase in cross-browser code libraries such as jQuery.)
The fact is, using a CSS grid framework means that your browser loads the CSS file(s) only once and keeps them cached "on the client side". Plus, the additional HTML markup needed to apply the "invisible" CSS framework is rarely so significant that bandwidth issues for readers should be a concern. (Interestingly, most of the naysayers seem to be talking about Yahoo UI Grids, not so much Blueprint.)
In most of the examples I've been working with, and in any of the magazine themes using grids that I've inspected, we're talking relatively small file size increases - especially compared to the blog platform code being used. A single large image will likely take up more space. With faster Internet connections, it really isn't such a big deal.
Design & Aesthetic Benefits
Regardless, of whether you use CSS grids for prototyping or production systems, there are multiple aesthetic and design benefits:
- Visual design cohesion between page elements.
- Uniformity and consistency in HTML element placement, thereby reducing CSS coding errors.
- Easier to apply the "rule of thirds" and the "golden section" to design, which results in a visually appealing layout to most human eyes.
- Mostly eliminates the need to use nested HTML tables.
- Nested sub-grids, for very complex designs that are relatively simple to produce.
- Easier to apply images and text callouts to produce asymmetric layouts for visual texture.
- Cross-browser support, so less screaming and hair pulling when you get around to testing for that bane of designers, IE. (Bill Gates must have felt so unloved as a child to have produced so much software that does what it wants, in defiance of standards that MSFT supposedly supports.)
- Reduced effort for producing slicker web page layouts, compared to coding the necessary CSS from scratch.
- Reduced future effort if you need to reposition elements or change rendering characteristics (typography, margins, etc.) for related elements en masse.
- Usable with static pages and CMSes/ blog platforms.
- Enables the popular use of creating "magazine" and premium themes for blog platforms. (WordPress seems to be the platform that CSS frameworks are most often used with, though any other platform that allows referencing a JavaScript source file should work just fine.)
CSS Frameworks and Tools
Here's a short list of some of the more popular frameworks:- Blueprint CSS Grid Framework. Robust despite only being in V0.7 (as of this writing), with lots of support from designers, and numerous tools for generating CSS code (beyond the standard 24-column, 950 px default framework). Supports the use of Blueprint "plugins".
- Yahoo! YUI Grids CSS, Grids Builder. This framework, which predates Blueprint, comes with six preset templates and four preset widths, and the layouts accomodate IAB ad unit guidelines. YUI Grids CSS is integrated with the rest of the Yahoo! UI (User Interface) Library.
- YAML, YAML Builder. YAML (Yet Another Multicolumn Layout) has a fair bit of maturity, is built on web standards, and is supposedly easy to use. Though it doesn't seem to have all that much use in the WordPress community. In fact, in the many hundreds of WP themes I've looked at for the last three years, I don't recalling seeing it used once. That might be because you need a license to use it with some CMSes (Content Management Systems).
- Grid Designer. This is a web tool for generating custom CSS grids. It uses its own CSS classes, so it could be said to be a framework, though it's not as well support in the design community as some of the others.
- 960 CSS Grid System. This system is based on a page width of 960 pixels, which is a number that's divisible by many other numbers, making it "a highly flexible base number to work with." However, 960 Grid only works with 12 or 16 columns.
- CSS Boilerplate. Produced as a stripped down framework by one of the original Blueprint authors.
- Sparkl. The documentations says you can create 1-, 2-, or 3-column pages, but the samples suggest you have more flexibility.
Comparison
Let me point out that this is not a comphrensive comparison of CSS frameworks. In fact, I've not used anything extensively other than Blueprint, though I've scanned docs for all of the frameworks listed above and played a bit with YAML and Grid Designer. Blueprint, YUI Grids, and YAML are arguably the "big three" in the CSS framework space, and 960 seems to be a solid fourth choice.
In choosing a framework, I've taken into account that I'm not a trained designer - beyond what I've studied on my own for years. I do dabble in design when necessary, albeit in a very minimalist form. In fact, because I spent quite a few years either publishing my own print magazine or working on others, I did a fair bit of (really bad) page layout using the principles of grid design working with Adobe PageMaker. So I find it very natural to work with CSS Grids for web design. It seems that given the number of WordPress themes out there - see the list at end of this article - that are based on a grid framework (mostly Blueprint), designers feel pretty comfortable with grids, too.
Nevertheless, with time always limited, I need something easy to learn and use, yet robust. I've found that Blueprint CSS Grid suits my needs. It integrates nicely with various JavaScript libraries - including jQuery, which can result in some damn sexy web interfaces. It renders well (though not 100% perfectly) in most browsers - though you need to test for that big thorn in web designers' sides, IE browser.
Based on my loose research of CSS Grids this last year, Blueprint seems to be the most robust framework, the least restrictive, the most supported - in terms of how widespread its use is - the smallest in size, and the framework with the most tools. In fact, the beauty of Blueprint is that you can very quickly produce the CSS code for a custom framework using tools like Kematzy's Blueprint Grid CSS Generator. Though you can do this with Grid Designer, a quick comparision would suggest it's not as robust as Blueprint.
On the flipside, scanning and browsing the documentation for Yahoo! UI Grids CSS framework leads me to believe that if you just want to do some simple web page layout and want a handful of presets to play with, you might want to look into this option. However, I feel it's a bit too restrictive for my liking. (You might want to read Foo Hack's Blueprint CSS Framework vs YUI Grids.)
Ultimately, when it comes to learning something new online - such as a programming language and code library/ framework - I always apply the "shoulders of giants rule". I first shortlist the options that seem suited to what I need, then select based on how much it has been written about. Might not seem fair to newer options, but the process isn't that much more arbitrary than how many people pick web applications to use. There's too much out there to keep track, and having an existing supportive community makes a big difference.
Why I Picked Blueprint CSS
Blueprint CSS Grid Framework is what I'll be using in all of my tutorials at NETTUTS (when it's relevant). Instead of copying the feature list from the docs at Google Code, let me focus on why I personally picked it. Some of these points overlap with what I've said above:- Relatively small file sizes. Has compressed versions for production use, for further size decreases.
- Print + screen stylesheets.
- Simple to integrate and use. (Though IE browsers are problematic, depending on which version of Blueprint is being used.)
- Easy to remember CSS classes and ids that are unlikely to clash with any that you're already using.
- Lots of support tools, especially for generating custom grids.
- Lots of articles/ tutorials about Blueprint, with lots of positive vibe.
- Lots of use of Blueprint by WordPress theme designers.
Sample Grid-based Design Process
Well this is a matter of choice, isn't it? Some CSS Grids come with a grid.png or even a .psd file that you can use in transparent mode in Photoshop, Fireworks, GIMP, etc., while you're laying down your design elements. I'm a bit more old school and always design my layouts by starting on paper:- Block off a bounding rectangle representing an entire web page. (Do this for each page you're designing.)
- Partition the rectangle into smaller rectangles representing primary areas: header, footer, sidebar, content area, etc.
- Further partition primary areas and pencil in "atomic" design component (site, logo, rss button, recent posts, recent comments, search box, sample posts, post thumbnails, etc.)
- Translate that final sketch into skeleton HTML, using real text or lorem ipsum text. The HTML markup will include the necessary CSS Grid class and id values to support the layout I need.
- Create banners/ buttons in graphics software.
- Test HTML mockup in as many browsers and versions as possible. (You might need to employ a few friends if you only have one computer.)
- Convert text into CMS/platform code. (E.g., convert text blocks into the necessary WP function calls and PHP code.)
Summary
I've tried to be comprehensive in my search for CSS Grid Frameworks, scanning over 120 articles for leads. However, it's possible I've missed some options, so feel free to offer others. Whichever CSS framework you decide to use, do so because it best suits your general needs. If the pages/ templates you design will have advertising, consider what type of ads. Early on, when I picked themes for my sites, I chose for AdSense ads (which are IAB-compliant). More recently, I've been picking/ designing for blocks of 125x125 ads, which I highly prefer over most AdSense blocks. If you're interested, there is a W3C draft specification entitled CSS Grid Positioning Module Level 3 (written by two Microsoft employees) that discusses integrating grid-based layout into CSS. The features discussed in this draft could be in IE 8.References
Related Tools
- Blueprint CSS AIR Grid Tool.
- Blueprint CSS Quick Reference (PDF, 1 page).
- CSS Grid Calculator.
- Diagnostic CSS.
- Reset CSS.
Some Articles or Sites About CSS Grid Frameworks
Here are links to a few of the many great articles out there about CSS Grids.- 456 Berea Street - Grids, Tables, CSS.
- A List Apart - Thinking Outside the Grid, Setting Type on the Web to a Baseline Grid.
- Olav Bjørkøy - Launch: Blueprint, a CSS Framework.
- Mark Boulton's 5-part series, Five Simple Steps to Designing Grid Systems.
- Jeff Croft - What's Not to Love About CSS Frameworks?
- CSS Demos - Hands on With Blueprint, a CSS Framework.
- CSS Tricks - GridControl.
- Design by Grid.
- Cameron Moll - Gridding the 960.
- Smashing Magazine - Design With Grid-Based Approach, Six Creative Column Techniques.
- Stone Mind - First Impressions of the Blueprint CSS Framework.
- Subtraction - Oh Yeeaahh! (or How to Use Grid in a Layout)
- Tutorial Blog.
- Vandelay Design - 65 Resources for Grid-Based Design.
- W3 - CSS and Grid Layout.
- Web Designer Wall - Grid and Column Designs.
46 Free or Paid Specialty Themes
If you feel that you're not ready to tackle grids and theme design yet but need a grid-based theme, here's probably one of the most comprehensive lists you'll find. (There are actually more than 46, if you include variations.) It includes magazine, magazine-like, gallery, specialty and various premium themes that use either explicit or implicit CSS grids. (It's possible one or two do not use grids, though at first glance, they appear to.) A few of these themes are free or have a free version. Most are for the WordPress platform. This list only includes themes available to the general public, not necessarily custom grid themes used by various bloggers. (See select links in the previous list, including Web Designer Wall and Smashing Magazine for snapshots of such sites. Also see Khoi Vinh's Subtraction, as an example of a visually impactful grid-based site.) Warning: Some of these themes might not work in WP 2.5x+- Artfull Magazine. (Make sure you use the theme switcher on this page - bottom right corner.)
- Block Magazine.
- BranfordMagazine.
- Chimera Pro.
- Content Press.
- Cornerstone.
- CSS Gallery.
- Deadwood, Deadwood Lite.
- Fjords09.
- Forte. (Note: Currently showing a suspended page)
- Fresh News.
- Futurosity.
- Grid Focus.
- Gridline - Lite, News, Magazine.
- Gridlock.
- IndoMagz.
- Jello Wala Mello.
- Live Wire series.
- Magazine News.
- Massive News.
- Mimbo, Mimbo Pro.
- Monochrome - Gallery, Author, Pro, Lite.
- Nautica.
- News - Quommunication.
- NewsPixel.
- NewsPress.
- Options.
- Overstand.
- Premium News Theme - The Gazette Edition.
- Rebel Magazine.
- Revolution and several variations.
- Showcase Gallery.
- Simplicity.
- Structure.
- Tauren Pro.
- TMA - The Morning After.
- Trevilian Way.
- Victoria.
- Visionary.
- Visualization.
- WordPress Magazine (Gabfire).
- WP-Magazine Theme.
- WP-Polaroid.
- Ygo CMS.
- Your Revolution.
- Zeke.
- Bootstrapper.
- Clever Sage.
- Graph Paper Press.
- Michael Doig.
- The Blog Entrepreneur.
- Theme Playground.
- Vandelay Design.
- Visual Blast.
- Web Hosting Show.
- Squidoo Magazine Themes lens.
Related Posts
Check out some more great tutorials and articles that you might like
User Comments
( ADD YOURS )Danny May 21st
A little in-depth for me, cause I don’t even really know what a CSS Grid Framework is. Is it a separate program? Or another .css file? But I’ll take a look through the links. Thanks!
Andrei Constantin May 21st
I have successfully used 960 and blueprint css. They are both well supported. An interested and well covered areticle. Two thumbs up!
Ben Griffiths May 21st
This is fantastic, a very good read, thanks!
PixlNinja May 21st
Wow thanks for this huge list of CSS frameworks !
Marie May 21st
“Some people feel, rightly or wrongly, that naysayers of CSS frameworks are designers who are worried that the need for their services will decline. Though, with this logic, coders are in trouble, too, especially with the increase in cross-browser code libraries such as jQuery”
As a web designer/programmer, I don’t think we have anything to worry about. True, things like CSS frameworks and and code libraries can make it quicker to get things done, and may be easier for the non-web-people to teach him or herself. However I spend roughly a third of my day reading blogs and articles just trying to keep up with all the latest technologies… as the options for web design/development become continually more vast and complex, I think there will be a strong need for educated designers and developers alike in many years to come.
Good article!
Dylan May 21st
I’ve used Blueprint successfully with a few projects. I found it to do the job well, although I didn’t use a lot of what it was capable of.
At the moment I’m using a mixture of Blueprint (for baselines and some typography), 960 grid for layout, Eric Myer’s reset, some other things picked up here and there (webtypography.net for instance) and a few things chucked in myself.
A quick pastie of it: http://pastie.caboo.se/200810 (including both the 12 and 16 column 960 grid styles).
It’s fantastic to have a single, compressed stylesheet that gives me a great canvas from which to develop my sites with.
as-Design May 21st
I personally prefer YAML (and have used it on several WordPress themes and other templates), because it is nice for rapid-prototyping the first design steps and later on it provides solid cross-browser (excellent IE support) css-rules, flexible and robust layouts and fancy navigation styles, which are easy to personalize. The documentation is very good and easy to understand, as long as you know the basics of CSS and XHTML. Additionally there is a markup-draft so you can easily insert your WordPress template tags and you have a solid foundation for your theme.
A often heard malus for Blueprint is it’s boundedness to 950px which is to big for 800px resolution and to narrow for 1600px. However YAML allows both, fixed and flexible layouts because all measurements were relative.
One main reason why YAML isn’t that common is it’s non-English origin. So give it a try!
daniel lopes May 21st
Design based on tables instead of CSS divs and is semantically incorrect and much more work for maintenance, and can have more incompatibilities between browsers.
I personally prefer use my own CSS grids instead of frameworks but this is preference.
Nice article.
eod May 21st
kickass this article, great ressource, thanks for sharing !
Jeremy Davis May 21st
Thanks for the article. I’ve known about grid frameworks for a while but have never pushed myself to using one. I guess I need to try one just so I can get my own opinion on the subject.
Thanks for the inspiration.
Devin May 21st
I like the power of controlling my own css. Any btw, you can compress any css with csstweak.
http://www.apple.com/downloads/dashboard/developer/csstweak.html
Tom May 21st
Thanks for the Wordpress Themes, great for inspiration.
Talking about CSS frameworks, I use a custom one, based on my needs.
Andy May 21st
Have not used any CSS frameworks before, good place to start looking into it.
Thank you!
Gustavo May 21st
I don’t get it… What exactly is a CSS Framework? I opened the sample in blueprint’s download and… It just looks like it could be coded in minutes. Is it some kind of pre-defined model for those who don’t have coding skills? If so, it’s great.
Really, I’m not trying to be offensive or anything, I just really don’t get this framework thing.
Stefan T. May 21st
“Design based on tables instead of CSS divs and is semantically incorrect and much more work for maintenance, and can have more incompatibilities between browsers.”
Yeah, I really don’t understand why the author even mentions table-based layouts, like anyone still uses that. Eirc Meyer was trying to prove something entirely different, he wasn’t promoting table-based layouts as the right thing to do instead of CSS grids.
Snorri3D May 21st
Nice article thx for that
Rijalul Fikri May 21st
Nice article, I’ll take it for consideration. Thx’s
Joefrey Mahusay May 21st
Very interesting article. Thanks
mishoo May 21st
Which grid framework should you use?
None. Learn CSS from the ground up and you’ll never need one. These frameworks just make people forget or not learn the basics which leads to all sorts of problems. Too many beginners will just copy and paste and then when it gets tough have no idea why something is not lining up.
Michael May 21st
I didn’t know any real designers use tables still? Great article though. I reuse some of my layouts but am going to try 960 soon.
Nate May 21st
Should come in handy, some good resources in here.
Lamin Barrow May 21st
@ Daniel
I totally agree with you. For something as simple as CSS you don’t need to use a framework just implement your own and that will make you feel better from the inside.
Ashley Morgan May 21st
Nice article and thanks for the link.
Lamin Barrow May 21st
On the other hand there is certainly nothing wrong with these kind of frameworks in-fact you can learn a lot from them. But in the end the choice is left with you as the designer. You decide to do what you want.
Tor Løvskogen May 21st
I use the grid as a theory when I design and build websites, not as a framework.
godonholiday May 21st
Would be nice to have a back to basics with this… maybe explain what it is? is it a program?
Would have been nice to see you go through an example site using a blueprint grid system?
as it is… it is a great one stop place for resources relating to it….. shame i just dont really understand it all.
godonholiday May 21st
wow even on the YAML site… its hard to get an understanding of how this all works? a demo of this would be great.
Raj Dah May 21st
godonholiday: Ah yes, that’s what I’m leading up to
I’m going to be doing an entire series for a WP theme, using Blueprint, and adding nice jQuery features as I go along. Expect the first to be either later this week or sometime next week.
My tutorials will be with Blueprint, but if there’s enough of a demand for other frameworks, I might look into it.
Sean May 21st
A CSS framework is basically having the CSS written for you in terms of the basics that you would normally do yourself. It’s a stylesheet that styles HTML to a certain feel, and if you make the HTML to correspond, like adding in the correct id’s and classes. You could create the divs according to the stylesheet framework to achieve the claimed grid, but I feel that your HTML mark-up suffers from divitus at that point.
I personally don’t feel CSS frameworks in their current sense are beneficial. To achieve the desired grid from the framework, you need to use (as the author pointed out) HTML for part of the design, and that is definately against the whole concept. It destroys the modularity of CSS / HTML / Browser. Strictly speak, HTML is only supposed to contain content, and classify content properly, such as a header, a paragraph, a list, and so on. CSS is supposed to control how that content is aesthetically shown.
Blurring the relationship makes maintenance harder, and like I said, removes the purpose of separation. From an MVC programmer’s viewpoint, CSS/XHTML are a bit too custom to streamline. In my opinion, you’re not that far away from the old table layouts.
On a different note, I do prefer to start my CSS files with a few things already defined. My reset is always going to be the same. My input tags, or anchor tags, or heading tags, might all have a certain style that I need to add in. But even then, I expect to change that up when I start designing.
Fredro May 21st
Hmm interesting. After downloading a few packages, these just seem like glorified css templates to me. I generally draw my layout and grids in photoshop, then slice up images and hand-code the CSS. I’m sure this could be useful for some people who need to cut in development time though, just not for me.
will May 21st
Meh…
There is a lot to be said for doing this bit yourself if you ask me.
I use a reset.css file and that is about it.
Pablo May 21st
Don’t forget: http://layout.constantology.com/
Miles Johnson May 21st
Im always against css frameworks. Im all for reset stylesheets but frameworks no.
Everyone has their own style of production and coding and this just hinders that even further. Unique classnames and ids are need for large production sites, etc.
This needs you to learn another framework when you SHOULD already know css on your own and shouldnt have any problem in writing it from the ground up.
Robin May 21st
I deal mostly with sites and applications that have many pages, so using a framework and grid can be a quick way to create prototypes when in a pinch. They are also handy when you are the front-end designer and you are dealing with developers who don’t know much about css. You can simply point out what each class does in terms of layout and they are off and running.
Typically I will take something like Blueprint and snag the parts that I want. The most useful is the reset.css, developed by Eric Meyer. I always use that now. It makes all the html elements across different browsers behave similarly in appearance. Another good one is the ie.css file that is part of Blueprint. It covers some of the hacks that are needed for IE to behave right. These two files are a great start to develop from even if you aren’t using a grid system.
Nico May 21st
Very interesting. To be honest, I had never heard of a grid before, thanks for the great information!
Peter Butler May 21st
Excellent article, well written, well researced, personally I have used YAML, YUI and BlueprintCSS, and for me the winner is blueprint, which I find easy to use and integrates very well with the application framework I use.
Keep up the good work
Duluoz May 21st
Tor Løvskogen has it right - use a ‘grid’ during the design process if you wish but keep the non-semantic, bloated, multi-style sheet, “shoot yourself in the foot” frameworks out of web development.
Keep it simple! Why would you use a “reset” style sheet, when you know you have to re-define all the elements you just (think) you “universalized”. Its MUCH easier to modify only what you need as you go along. I’m all for a universal selector that clears your padding and margins - but thats as much of a reset as you’ll ever need.
Why are you sacrificing performance with these frameworks?
Keep it simple!!!
If you RELY on a framework - keep learning - get those training wheels off.
Benji May 21st
Blueprint didn’t worked for me, It has some bugs and there’s no community or any support at all, end up using YUI a well documented framework with lots of more resources! love the reset.css!
Steven Snell May 21st
This must have taken a very long time to put together. I’ve been wanting to try the 960 grid system but haven’t found the time yet.
Thanks for the links to my posts.
swggy May 21st
Very helpful - I’m drifting this way on web builds, so it was timely. I’m particularly interested in the 960 grid system. Thanks.
Razvan May 21st
I’ve used 960gs and blueprint in the past.
Anthony Short May 21st
For all the people who don’t like the ‘framework’ idea, I’m with you on that front. Framework is just a trendy term amidst the likes of JQuery and Prototype.
I’m working on an idea at the moment to help cut the non-semantic code completely and increase the flexibility of the grid so that we don’t start seeing sites that all look the same. Lets face it, CSS is limited and is reaching its limit.
http://anthonyshort.com.au/index.php/blog/comments/a-better-way-to-use-css-templates/
My site is a work in progress at the moment, so ignore the bugs
Rolando Murillo May 21st
By seen all this options, I go for 960 Grid System, ’cause it’s simple, very simple: an excelent grid system and CSS reseter. And it comes with a Photoshop template for designin’ in it, so it’s perfect. : D
Louie May 21st
Great article! Thanks for sharing
Daniel May 21st
This is a great article for a Grid Newbie like myself. While I have been using CSS for a while now I have never used a grid layout framework before and I am just about to test the BluePrint Solutions after reading this article
For me this was a great insight…
Cheers Raj………
Mike May 21st
For anyone who may be interested, I combined Blueprint, Tripoli, and a print stylesheet to make BlueTripCSS
http://capsizedesigns.com/blog/2008/04/bluetripcss-a-fusion-of-blueprint-and-tripoli/
Chan May 21st
Grids CSS is probably a good choice for applications that are meant to be consumed by both PC browsers and mobile A-Grade browsers; because the Grids model tends to assume a larger screen size, it’s not recommended as a starting point for applications that are mobile-specific.
fisch79 May 21st
This opened up a whole new horizon for me… THanks!
D. Carreira May 21st
Nice article.
David Carreira
Michael Lomas May 22nd
I do find this article a little strange as well, as developers surely we can’t advocate the use of generic templates / frameworks?
I’m all for re-usable code, where would we be without JS frameworks? But the use of XHTML frameworks seems to go against everything that’s generally accepted on the topic, no WYSIWYG editors, which is all they really are, we might as well make new sites using Dreamweaver’s pre-set layouts.
However… I can see the bigger picture. When I create a new site there are always common features, certain stylesheet rules, the way I layout headers, footers and their ids/classes, in short, I have my own framework. Having a central resource for dealing with all cross browser issues that creates the common layouts isn’t necessarily a terrible thing.
I think it comes down to preference, those not using public frameworks (like me) tend to have our own in house frameworks we stick to anyway. Those willing to accept a standardised approach should do so (and I’ll have a good look at them myself) as I’d bet it cuts a lot of time out of testing for browser errors.
I think the key is understanding the code that you’re provided with, be it in house or framework based, so you’re in a position to manipulate it if required.
PieterC May 22nd
I don’t like the un-semantic name usage of most of this frameworks. The best you could use is CSS Boilerplate. Then you don’t get those ugly class names.
James May 22nd
I’ve never used a framework and I doubt I ever will…
I honestly don’t see the advantage, most of them seem bloated and unecessary. I’m all for using reset stylesheets but I like to retain a sense of semantic logic within my HTML and CSS - a framework would “ruin” my workflow.
Jeff Finley May 22nd
Wow, this is an amazing resource. I never knew about CSS Grid Frameworks before now and those premium Wordpress themes are a real gem. Thanks you guys.
James May 22nd
Fantastic list of resources!
Connor May 22nd
Nice Tutorial! One comment though…Speaking about the pain known as Internet Explorer, I just happen to be using it right now (1 in 1000 chance), and I notice the header (The spoonfed part) is mis-aligned by a pixel or so. I’m using IE7.
Paul Palmer May 22nd
I think these grid frameworks are fantastic for those who are learning how to design and implement a grid-based site. Once you get used to them, you’ll find that it may be easier to roll your own to suit your personal taste/style. Also, as Sean pointed out, grid frameworks often suffer from “divitus” which is the snooty cousin of table-based design.
Ryan May 22nd
Doing a major overhaul of our current site, this should be an immense help. I’ve heard of Blueprint in the past, however, never taken the time to learn about it. Thanks for the info!
Philm May 23rd
Alot of you who have posted above are mistakenly taking the “I’m too great to lower myself to use a CSS framework” or “Learn CSS and you won’t need one” approach. I think you’re all overthinking it and missing the point tbh.
Maybe that’s the difference in attitudes between coders and designers, there’s no need to get all prickly about it. At the top of the article it says:
“They’re an invisible foundation used to achieve visual cohesion in magazine and newspaper page design and layout. They essentially amount to a lattice that divides horizontal and vertical space in consistent units where text, headlines, images, and advertising can be placed.”
Every magazine or printed piece of literature you read or see has been based on a grid of some sort, we don’t see publishers bickering saying “I’m not using a grid for my magazine, I’ll just throw stuff on the page because we can”.
For traditional designers, taking a traditional approach online is a great idea and makes perfect sense…
freddie May 23rd
Thanks for this article. I see the framework as a time saving. I’ll use it!
Harry Roberts May 24th
I’ve developed a framework solely for grid layouts and typography: http://csswizardry.com/typogridphy/
Harry
Shane May 25th
Wow - a very good overview of grid systems - I’ve always found them to be a little bloated, but they’re very useful for a number of different applications and site designs, so thanks for posting the article.
Raj Dash May 25th
Nettuts readers are without a doubt some of the nicest, most polite commenters I have ever read online. Even those that disagree are so polite. It’s been a joy to read all your comments, learning about all different points of view. Apologies that I haven’t really responded much to most. Thanks also for the links to all the examples and tools.
cheers
-raj
djesse May 26th
“Though it doesn’t seem to have all that much use in the WordPress community. In fact, in the many hundreds of WP themes I’ve looked at for the last three years, I don’t recalling seeing it used once.”
This isn’t really an argument to describe the quality of YAML as a CSS framework. A more deep feature review would have been a good idea.
“That might be because you need a license to use it with some CMSes (Content Management Systems).”
This is completely wrong. YAML can be used free under Creative Commons License with every CMS you like.
Best regards
Dirk
Will May 27th
“Test HTML mockup in as many browsers and versions as possible. (You might need to employ a few friends if you only have one computer.)”
Or, you could make use of browsershots.org.
Mark Abucayon May 28th
wow I love this one…very interesting article love reading this one. thanks guys for this article great job..
simonjs May 28th
I came across the a fluid version of the 960 grid system whilst looking into it a while ago. Although I haven’t used it yet, it looks quite promising from the demo:
http://www.designinfluences.com/fluid960gs/
ilovecolors May 28th
I’ve found quite useful the 960 base psd and the sketch sheets although I won’t be using any framework, simply because of 1) the time involved in learning all the stuff, 2) it could have bugs and 3) the code size, which I don’t want my users to download over and over. However, for starters, it’s a great start, just make sure you don’t stay too much there without watching the backstage. I do use a reset.css from Yahoo! UI library, and it’s cool. Great site btw, keep it up!
Colin Miller - Freelance web designer May 28th
Very useful article. Coming from a trained graphic design background, the use of grids is standard practice (print). Designing grid systems for web sites can be painful, so this article was very informative. Thanks
dakeat May 28th
Solid introduction and basic comparison. While I am still a fan of creating my own “frameworks”, there is no denying the time that could potentially be saved with one of these prefabs. I have yet to try one on a project since I am a fan of using classes and id’s that have a bit more relative meaning. I’ll have to give one a test drive one of these days.
Nathan May 29th
I’ve only used Blueprint, I liked it but I didn’t like the fact you had to add extra tags for IE or the margin it leaves on the right. So, I just wrote my own based off of it. My framework is based off of a 10px wide system, which I feel gives you more control over the widths over Blueprint.
Frederico May 29th
I guess there is no way to avoid making myself look stupid here, but where would I learn how to design with grid framework?
Raj Dash May 30th
A few clarifications/ notes/ arguments are in order…
Blueprint IS NOT fixed to 950 pixels wide, nor to a 24-column grid. This seems to be a common misunderstanding, so I probably didn’t explain it well. That is merely the default (30 pixel wide columns, 10 pixel wide gutters). You have a lot of control over this. Use Kematzy.com/blueprint-generator to design your own custom Blueprint grids, but save time by not having to devise new CSS classes. So if you prefer a 960 px wide grid, you can rebuild the framework. Fast.
Stylesheets are only loaded once into a visitor’s web browser. They won’t be loaded over and over. But yes, the HTML page COULD be reloaded. Still, unless you overdo the custom classes, the comments that you’re getting bloat from the extra HTML div tags and classes seem a little overly concerned. You’re really not adding that much more in total bytes. What’s more, if you wanted to achieve the exact same grid layout (effectively) using your own CSS classes instead of Blueprint (or whatever), you would have to add your own bloat”. So unless I’m missing something, I can’t see how this argument is valid. Read Philm’s comment, which more eloquently says what I’ve tried to say in the article.
Dirk/ djesse: I don’t think I described the quality of YAML based on tha lack of use. But I guess I did miss the CC license. Thanks for pointing that out.
General comment: I did say that grids are a framework. You can pull them out. They’re not all bloated, despite comments saying otherwise. But if you dont’ want to use them, you not have to replace a CSS framework with your own CSS + div “bloat”, to achieve the same effects? From scratch. I don’t know about you, but as a former active programmer, I like to find short cuts that don’t “cost” a lot. Why would I create a whole new set of CSS classes when it’s ready and waiting in a CSS grid framework?
I’m not a web designer, but I’ve done a lot of print layout. I used grids a lot. To me, it seems illogical not to use grids in web design, whether custom or with a framework.
Frederico: There is a tutorial coming that shows how to design with Blueprint. After that, I’ll be doing futher tutorials that use Blueprint, but do not focus on that aspect.
mindplay.dk June 3rd
Comparing my Grid Designer to Blueprint is probably a bit irrelevant - it was not designed as a framework, merely as a utility to help you design your horizontal and vertical grid specifications.
Whether you choose to apply what you designed in a handcoded CSS environment, or one based on Blueprint or another framework, is up to you.
If you use Blueprint, one of the things you might find my Grid Designer incredibly useful for, is the vertical grid design - the typography. Something that a lot of people seem to forget, is that grids have two dimensions…
Thiago Menezes June 4th
Ahhh!! Sometimes I feel there’s too much to read! Look at that amount of links!
Pai June 4th
i used to use blueprint.. until recently i switched to 960.gs..
both does the job pretty well anyway..
Not A Niche June 5th
Hey Raj,
you might be surprised, but there is a theme which is using YAML, and not only that. With some clicks in your admin it’s possible to change the layout to a sidebar on the right or on the left or having two sidebars. And many more changes are possible just with some clicks in your admin. Check out the video on this page
http://dynamicinternet.eu/wordpress/wordpress-themes/yaml-green-theme/
Unfortunately the page is only in German but check out the video and you will understand. Very cool. A new way of adjusting your WordPress template
Isaac Z. Schlueter June 9th
Hey, just thought you should know, it looks like someone is ripping off your content:
http://cssdevkit.com/?p=55
–i
Benoit Deziel June 11th
First of all, those CSS frameworks aren’t totally templates, because the grid system isn’t one. If so, many designers in the print industry would have used templates for decades. I’ve done print design and I think those CSS frameworks give a solid foundation to start a great design. As a web designer, I use 960.gs or Blueprint on every projects since 6 months or so, depending on my design choices. Those frameworks don’t limit your creativity, they help you design a more robust, flexible, consistent web site.
My point is, no matter if you use one of those frameworks or create your own, design on a grid system and you’ll be happy with the result.
If you fill that there is to much code in these frameworks, just delete the code your not using. Better yet, modify the code and keep it as your own framework. For Blueprint, the source code is release under a MIT License, so you can do whatever you want with it. Also, there is some generator for Blueprint to fit your needs.
And for those who are concerns about divitus, if you know how to use those frameworks right, you can still make your code semantic by using multiple class names.
So my choice is to stick with CSS Frameworks and modify them to my needs to keep the code unbloated and the lightest as possible.
Raj Dash June 15th
mindplay.dk: Thanks for clarifying that. I should have put Grid Designer under the “tools” category.
Thiago: Well, no need to read them all right away
Pai: Not surprising since one of the 960 developers also had a hand in Blueprint.
Not a Niche: Thanks for the heads up. As thorough as I tried to be, I never came across any. Thanks for the link.
Isaac: Thanks for letting us know. It appears that the page is gone, so Collis might have dealth with it.
Benoit: Exactly. Good argument. As for print design templates, are you sure? I worked in Pagemaker a great deal and I had a couple of layout templates - basically blank Pagemaker files with a grid set down from the first time I created the “layout”. It saved me so much time when putting together an issue of my print magazine.
Paula Sáez July 2nd
Muchas gracias por los tips, desafortunadamente no entiendo muchas veces el idioma. Asi estudiare Inglés tambien. Un saludo cordial a los sres de Nettuts
travist July 17th
Great article, interesting design approach.
I tend to agree with a lot of the comments here, in that CSS grids are really not necessary. I’ve spent a lot of time trying to really be effective with using all of blueprint for a recent design. And while I feel like there are some interesting concepts I’ve learned (and even has included them in my own custom css), the concept of a framework is too limiting. If you can put your design in the box, it will work fine. But, I don’t want to be beholden to artificial constraints created by a framework, i’d rather let technology and client requirements be my constraint.
The other really, really annoying thing about blueprint is the 960px factor. I ended up using the blue print grid generator to generate a 900px model, but even then there’s lots of pain… so I’ve decided to not use it for my current design. Who knows, maybe I’ll give it a go again, but the for time being, I’m going to have to give this the thumbs down.