10 Promising CSS Framework That Worth A Look

Most of web designers should heard about “CSS Framework”, and I believe some of you had tried them before.

Just like other programming and scripting language, CSS do have some repeat code that can be packed together to ease our daily job.

When use properly, CSS Framework may cut down your development time. On the other hand, it may cause extra works and time if you choose the wrong framework for your project.

There are a lot of open source CSS Framework, and you can easily reach them by using Google. Today, I am going to show you 10 promising CSS Framework that worth a look.

1.
Blueprint: A CSS Framework

blueprint
Blueprint includes a CSS reset that eliminates the discrepancies across different browsers. There are a lot of external tools and templates to aid your web development with Blueprint.
2.
960 Grid System

960-system
Another excellent CSS Framework that worth a look. The download includes templates for Fireworks, Photoshops, Inkscape and etc. so that you can start designing your web template immediately. The PSD file that comes with guides ready save designers a lot of time.

3.
Tripoli Framework

Tripoli had been tested and supports virtually all available browsers, including IE5! It comes with some base files, and some plugins such as “Layout”, “Visual”, “Type”, and “Negative”.
4.
YAML – Yet Another Multicolumn Layout

YAML is another bulletproof CSS Framework that has a very good documentation. You can easily get started by downloading the PDF documentation and the sample project from the official site. There are some tools that will help you on your development too. For example, the YAML Builder can visually create YAML-based CSS layouts.
5.
YUI Grid CSS

YUI Grids CSS support fluid-width layouts as well as fixed-width layouts. This is the advantage of YUI Grids CSS over the other CSS Frameworks. To get started with YUI Grids CSS, you can download the cheat sheet and YUI Grids Builder from the official site.
6.
BlueTrip

bluetrip
BlueTrip is a full featured and beautiful framework that combines advantages from different CSS Framework. The official site has a complete documentation and demos.
7.
Content With Style

content-with-style
This is a fixed width layout and the zip files contains a few layouts such as vertical navigation with 1 content column, vertical navigation with 2 content columns, and etc.
8.
Elastic CSS Framework

elastic
Elastic provides a declarative language to define the layout structure and behavior. This is a young framework, and the best site to demo the usage of Elastic is the official site itself.
9.
Molio CSS/HTML Templates

Mollio was launched since IE7 exposed a few rendering problems. It is a starting point for website layout and very suitable for beginners that start learning CSS Frameworks.
10.
SenCSS

sencss
SenCSS doesn’t include a layout system, but it does provide other things such as baseline, fonts, paddings, margins and more. It comes with a commented version and a minified version which suitable for production use.

Some other CSS Framework that you may consider too

1. WYMstyle
2. CSS-boilerplate
3. Typogridphy
4. CleverCSS
5. Logicss

Conclusion

Choosing a right CSS Framework is the most important step. I used both Blueprint and 960 framework regularly and now i start to combine the advantages of both framework and try to come out with a framework that suit me. So how about you, my dearest readers?

A CSS Framework

In my Modular CSS article I documented the possibility of breaking down stylesheets into components that could be reused across projects. All well and good. The next logical step is to extend this to become a CSS framework, allowing rapid development of sites with pre-written and tested components. All that's really required to produce this is a set of naming conventions and a flexible base template...
Who is this for?

If you've been creating sites with CSS for a while you may be getting frustrated with having to recreate and retest basic layouts on a regular basis. In this article I'm trying to illustrate a simple way of skipping the tedious startup on your average project, letting you get to the interesting stuff as quickly and efficiently as possible. I've not attempted to explain the layouts included here so it may not be suitable if you're a CSS beginner. Sorry about that... Feel free to dissect them yourself if you're interested; I've kept them as simple as possible.
How many layouts are there?

Well, loads but the majority of them fall into rough groups. Any framework must account for the most common layouts, otherwise it'll never get used.

* Vertical navigation with one content column
* Vertical navigation with two columns of content
* Horizontal navigation with one content column
* Horizontal navigation with 2 columns of content
* Horizontal navigation with local navigation and one column of content
* Horizontal navigation with local navigation and 2 columns of content

These 6 cover most of the blogs out there and most of the corporate sites as well. How can we structure a document so that it'll be useful in all 6 of these scenarios?
What are the common elements?

Malarkey had a shot at pinning down websites' common elements and giving them names a while back but I want something a little more general so that the building blocks can be retasked without slipping their labelling.

So... what are the common building blocks in the above 6 layouts?

* Header
* Footer
* Main content
* Sub content
* Main nav
* Local nav

These elements are used mix and match across most sites you visit so these are the constituent elements that any framework will have to cater for. No designs will use all of them but most will use header, footer, main content and main nav with optional sub content and sub nav.
The ideal structure

For me the most important single aspect of accessibility is the source code order: if it makes sense you're well on your way to building an accessible site.

You can't spent much time on the accessibility mailing lists or forums without someone being told that they should structure their HTML so that the content preceeds the navigation. This stops screenreader users from having to sit through the site's navigation every time they travel to a new page. You can get around this with skip links but that's an extra link to follow...

So, in an ideal world, how would we structure our websites?

1. Header
2. Main content
3. Sub content
4. Local nav
5. Main nav
6. Footer

This source order follows the exact structure people are expected to want: once they have read/listened to the content of your page they are most likely to want to navigate within the current section or to related pages. After they have worked their way through those they'll probably want another section of your site so the main navigation follows.
The page structure

This page structure above looks something like this when turned into (X)HTML:

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

---

---

---

---

---

The magic of CSS

We're going to need some farily advanced CSS tricks to turn this source order into useful layouts. They all have to be flexible, to account for text resizing, which with the footer rules out absolute positioning...

The eureka moment for me was when Dunstan published his absolutely positioned menu technique as part of his Mozilla Europe work. Suddenly it became possible, using an incredibly sneaky trick, to pull the nav bar from the bottom of the source and use it horizontally in the header and still allow for text resizing. Now that's genius.

Then you've got the negative margin tricks for moving floats around. I first came across these when Ryan Brill posted about them on Mezzoblue... Dead handy.

If we're going to use floated layouts we're going to need some way of clearing the contents. I could put clearing divs into each of my elements but there is the black magic clearfix method by Tony Aslett that will do this for me, keeping the source clean.

A few other things that might come in handy:

* Body ids to switch styles
* Display: inline to cure IE's double float bug

See where I'm going with this?

We have a single, flexible source document that will take a variety of content and a load of CSS techniques to manipulate them... To make this framework useful I have to be able to get my single source document to display as any of the common layouts listed above. Once that's done I'll be able to drop any content into the HTML framework, plug in the appropriate layout stylesheet for the design, tweak it and the job will be done. No more rewriting XHTML and CSS for every project; every time I start I will begin work with a solid foundation that I can tweak to fit the specifics of the job. Startup time will be next to nothing.
Back to our five main layouts

Okay, so the source code is fixed. What we want is to be able to plug in tried and tested layout stylesheets for reuse on future projects. I'm going to stick with fixed width layouts for this because they're simpler but using negative margins we could get these fluid with a bit of extra work.

* Vertical navigation with one content column
* Vertical navigation with two columns of content
* Horizontal navigation with one content column
* Horizontal navigation with 2 columns of content
* Horizontal navigation with local navigation and one column of content
* Horizontal navigation with local navigation and 2 columns of content

Achieved: Level 2!

That's it - all the common layouts done with pluggable stylesheets and ready to go. They're set up in a kind of Zen Allotment for you to have a flick through...

If you want to have a play with these yourself, all the source files are packaged up in quick-grow zip file.

30/11/2007 UPDATE: I've uploaded a slightly updated version of the framework. Very little has changed but a few people have voiced concerns over the lack of a formal license. Taking advice from Paul Jones (thanks!) I've added the new BSD terms, which are about as open as they come. I'm happy for people to use the framework for whatever they want. If you do, please drop me a line - I'd love to see what you come up with!