Advertisement
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.
-
Blueprint: A CSS Framework
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. -
960 Grid 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. -
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”.
-
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.
-
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.
-
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. -
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. -
Elastic CSS Framework
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. -
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.
-
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
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?
very nice list.keep it up your good effort…
Nice list. I’ve been playing around with 960, I use the PSD templates as a starting point for design but I usually wind up breaking out of the grid structure at some point. Depending on how I use it it can be a real time saver.
I love to see some of my frameworks on the list:
http://code.google.com/p/emastic/
http://code.google.com/p/the-golden-grid/
http://code.google.com/p/malo/
http://code.google.com/p/formy-css-framework/
http://code.google.com/p/hartija/
thanks for css framework helpful resources..
Hey Vlad, I really like some of your frameworks. I’ll totally end up using the Golden Grid one.
I’m kinda hooked on BluePrint + Boks at the moment.
I think a custom grid generator is something all CSS frameworks need or they’ll get left behind.
@w1sh: Thanks
My vote is in for BluePrint. The simplest, and simple = good in my book.
Thanks for this list, I found another one here: http://bit.ly/Jw1e3
I’m still not really fan of the grids. I kind of use my own technique with this but I will try some of these. Thanks!
Wow… I’m not sure how the jQuery library ended up being excluded from this list, given the amount of support and the size of the developer community it has… not to mention its inclusion in development environments such as Visual Studio 2008. Nice list, otherwise.
http://unobtrusivecss.com/
Awesome! very good list
Makes one’s work that much more easier. Let’s try not to re-invent the wheel.
Use CSS fremawork.
Makes one’s work that much more easier. Let’s try not to re-invent the wheel.
Let’s use CSS framework to make efficient and better designs.
Great List…Will begin exploring the top 5 today!
People who use Blueprint must not use Dreamweaver.
I have Dreamweaver CS4 and the last column of Blueprint always goes under the first row.
I got it down to the simplest demo but it doesn’t work in Dreamweaver!!
————-]
The header
The first column
The center column
The last column
The footer
————————————–
I can strongly recommend the floatz CSS framework. Especially when it comes to complex web form layouts:
http://code.google.com/p/floatz
It is worth to take a look at it.
Awesome, blog post!! I just had to comment.