10 Promising CSS Framework That Worth A Look

May 25th, 09 by Dicky | View Comments |
You maybe interested in our latest article Personal Facebook Fan Pages of Celebrities.

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. 
  4. 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”.

  5. 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.

  6. 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.

  7. 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.

  8. 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.

  9. 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.

  10. 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.

  11. 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?

We regularly update articles about resources, tutorials and Wordpress to help designers and developers. If you are new to WebDesignBooth, why not subscribe to our RSS feed and get the latest updates immediately. You can also subscribe through email or follow us on Twitter.
  • http://www.netcrema.com/?p=1293 10 Promising CSS Framework That Worth A Look « Netcrema – creme de la social news via digg + delicious + stumpleupon + reddit

    [...] 10 Promising CSS Framework That Worth A Look [...]

  • http://www.3fay.com 3faycom

    very nice list.keep it up your good effort…

  • http://popurls.com/pop popurls.com // popular today

    popurls.com // popular today…

    story has entered the popular today section on popurls.com…

  • http://bradcolbow.com Brad C

    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.

  • http://www.vcarrer.com Vladimir Carrer
  • http://www.joyologo.com joyologo design shop 2.0

    thanks for css framework helpful resources..

  • w1sh

    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.

  • http://briancray.com Brian Cray

    My vote is in for BluePrint. The simplest, and simple = good in my book.

  • FatGeek

    Thanks for this list, I found another one here: http://bit.ly/Jw1e3

  • http://www.e11world.com e11world

    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!

  • http://design-newz.com/2009/05/26/10-promising-css-framework-that-are-worth-a-look/ 10 Promising CSS Framework That Are Worth A Look | Design Newz

    [...] 10 Promising CSS Framework That Are Worth A Look [...]

  • Steve Costello

    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://andrewvieau.com/blog/2009/05/26/frameworks/ Frameworks

    [...] not sure if I’ll need a CSS Frameworks.  I just discovered the concept, so I’m not really sure what it all entails.  But I should [...]

  • Alana
  • http://cssbrigit.com/CNews/entrada/2009052611545778 CSS Brigit | 10 Promising CSS Framework That Worth A Look

    10 Promising CSS Framework That Worth A Look…

    We all know that a good CSS Framework can help us and save our development time. Today, i am going to share 10 most promising CSS Framework that worth a look.

  • http://www.vcarrer.com Vladimir Carrer

    @w1sh: Thanks :)

  • http://giridhar.wordpress.com/2009/05/27/links-for-2009-05-27/ links for 2009-05-27 « Giri’s Blogmarks

    [...] 10 Promising CSS Framework That Worth A Look (tags: webdesign css framework) [...]

  • http://www.webdesignspeed.com/10-promising-css-framework-that-worth-a-look/ 10 Promising CSS Framework That Worth A Look | Web design speed

    [...] Go to Source [...]

  • http://www.fabianlink.com/?p=263 Fabián Link » 10 Promising CSS Framework

    [...] http://www.webdesignbooth.com/10-promising-css-framework-that-worth-a-look/ Etiquetas: CSS, Diseño Web Author: admin Categories: CSS, Diseño Web Tags: CSS, Diseño Web [...]

  • http://www.qianduan.net/15-extremely-useful-css-grid-layout-generators.html 15个非常有用的CSS网格布局生成器| CSS| 前端观察

    [...] 除了这些在线生成器之外,设计师还需要花费大量的时间来做重复的事情。还好现在已经有了很多不错的CSS框架,现在让我们看看一些很有用的CSS网格布局生成器吧。 [...]

  • http://www.webdesignspeed.com/15-extremely-useful-css-grid-layout-generator-for-web-designers/ 15 Extremely Useful CSS Grid Layout Generator For Web Designers | Web design speed

    [...] generators, designers have to waste extra effords to do repeat jobs. Since we had shared about CSS Frameworks last week, i would like to extend the topic by sharing some useful CSS grid layout [...]

  • http://www.cssbaby.com/archives/45 15个非常有用的栅格布局生成器 – 宝贝网志

    [...] 网上有很多布局生成器,它们对设计人员非常有帮助。比如在线 favicon 生成器、背景生成器、按钮生成器等等。Balkhis为我们写过一篇很棒的文章《extremely useful online generators》。 如果没有这些生成器,设计人员将会浪费很多时间做重复的工作。自从上周我们分享了《CSS Fraomework》。我希望通过分享一些有用的 CSS 栅格布局来扩展这个专题。 [...]

  • http://www.jaceju.net/blog/?p=575 網站製作學習誌 » [Web] 連結分享

    [...] 10 Promising CSS Framework That Worth A Look [...]

  • http://www.cosassencillas.com/2009/06/04/15-generadores-cuadricula-disenadores-web/ 15 generadores de cuadrícula para diseñadores web

    [...] y esfuerzos extra en su trabajo. La semana pasada ese mismo blog compartió con todos el artículo 10 Promising CSS Framework That Worth A Look, y ahora amplia el tema mediante los generadores de cuadrícula de [...]

  • http://ragingfx.com/2009-07/new-theme/ ragingFX

    [...] to work with XHTML/CSS was the need for a compact framework. I’ve been doodling around them all. At first I was so amazed by Blueprint CSS, this css framework was actually very good on making [...]

  • http://startwmlife.com/?p=1071 飞鱼的声纳 » Blog Archive » 10个值得一看的CSS框架 – 关注时间管理、wordpress主题设计、文章写作和资料整理

    [...] 原文:10 Promising CSS Framework That Worth A Look cT="0";nc="#444444";nBgc="#FFF7DE";nBorder="#CC3333"; tc="#FFFFFF";tBgc="#CC3333";tBorder="#CC3333"; tDigg="%E6%8E%A8%E8%8D%90%E6%AD%A4%E7%AF%87%E6%96%87%E7%AB%A0";tDugg="%E5%B7%B2%E6%8E%A8%E8%8D%90"; defaultItemUrl="http://startwmlife.com/?p=1071";defaultFeedUrl ="http://feed.feedsky.com/wantfee"; 相关文章无相关文章 [...]

  • http://www.csswithcolour.com/blog/223/usage-of-css-frameworks-in-slicing-pages/ Usage of CSS frameworks in slicing pages? | Blog – PSD to HTML – CSS WITH COLOUR (Frontend Development)

    [...] Tools for Getting Started [6] Overview: Emastic CSS Framework [7] Overview: YUI 2: Grids CSS [8] 10 Promising CSS Framework That Worth A Look [9] Frameworks for [...]

  • http://www.iplace.cn/archives/1972-15-very-useful-css-grid-layout-generator.html 15个非常有用的CSS网格布局生成器 : 椽椽鱼-设计-css-div-html-yaml

    [...] 除了这些在线生成器之外,设计师还需要花费大量的时间来做重复的事情。还好现在已经有了很多不错的CSS框架,现在让我们看看一些很有用的CSS网格布局生成器吧。 [...]

  • http://w3spice.com waqas

    Awesome! very good list

  • http://www.artmov.com/blog/223/usage-of-css-frameworks-in-slicing-pages/ Artmov » Archive » Usage of CSS frameworks in slicing pages?

    [...] Tools for Getting Started [6] Overview: Emastic CSS Framework [7] Overview: YUI 2: Grids CSS [8] 10 Promising CSS Framework That Worth A Look [9] Frameworks for Designers October 31st, 2009  •  Coding [...]

  • http://tr.im/mewC Rahul – Web Guru

    Makes one’s work that much more easier. Let’s try not to re-invent the wheel.

    Use CSS fremawork.

  • http://tr.im/mewC Rahul – Web Guru

    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.

  • http://www.afiffattouh.com/web-design/5-alternative-and-tiny-css-grid-systems 5 Alternative And Tiny CSS Grid Systems | Afif Fattouh – Web Specialist

    [...] Do you want to know more about CSS Frameworks and grid system? If yes, then you may want to read our previous article that talk about useful CSS Frameworks. [...]

  • http://tramullas.com/2010/03/09/diseno-de-informacion-con-grids-para-css/ Diseño de información con grids para css | tramullas.com

    [...] 10 Promising CSS Frameworks That Worth A Look (vía WebDesignBooth). [...]

  • http://www.centerstagewebdesign.com Raleigh Web Design

    Great List…Will begin exploring the top 5 today!

  • me

    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

    ————————————–

  • Harry

    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.

  • http://www.webedesigner.com/ Greg Harris

    Awesome, blog post!! I just had to comment.

  • http://aulasmater.wordpress.com/2010/06/10/frameworks-css/ Frameworks CSS « Sistemas Web e Photoshop

    [...] Lista de 10 Frameworks CSS que vale a pena dar uma olhada CategoriasUncategorized Comentários (0) Trackbacks (0) Deixe um comentário Trackback [...]

  • http://bigthingsandlittlethings.wordpress.com/2010/06/30/css-speeding-things-up/ CSS – speeding things up « A lovely blog from Big Things and Little Things Web Design

    [...] some of the external CSS frameworks out there – there is a handy list of some of them here http://www.webdesignbooth.com/10-promising-css-framework-that-worth-a-look/ – have they streamlined your workflow or do they cause more problems than they solve? [...]

  • http://www.bigthingsandlittlethings.co.uk/blog/?p=45 CSS – speeding things up « Big Things and Little Things Web Design

    [...] some of the external CSS frameworks out there – there is a handy list of some of them here http://www.webdesignbooth.com/10-promising-css-framework-that-worth-a-look/ – have they streamlined your workflow or do they cause more problems than they [...]

  • http://www.together.in.th/twitter-2010-10-06/ [Twitter] – 2010-10-06 « NAzT's Blog

    [...] @tonkla: 10 Promising CSS Framework That Worth A Look http://www.webdesignbooth.com/10-promising-css-framework-that-worth-a-look/ 11:00:32, [...]

  • supladito

    we’re talking bout CSS framework here…

  • http://midashuang.wordpress.com/2010/11/24/links-for-2010-11-24/ links for 2010-11-24 | Midashuang's Blog

    [...] 10 Promising CSS Framework That Worth A Look (tags: css framework webdesign) [...]

  • http://www.marbiedesign.nl/design-onder-de-loep-5 Design onder de loep 5 | MARBIE DESIGN

    [...] The Importance Of Wireframes In Web Design And 9 Tools To Create Wireframes Frameworks: 10-promising-css-framework-that-worth-a-look Choosing The [...]

  • http://www.marbiedesign.nl/en/design-revisited-5 Design Revisited 5 | MARBIE DESIGN

    [...] Resources The Importance Of Wireframes In Web Design And 9 Tools To Create Wireframes Frameworks: 10-promising-css-framework-that-worth-a-look Choosing The Best CSS Framework : A Complete Guide 5 Popular CSS Frameworks + Tutorials & [...]

  • Code from scratch

    960 is complete crap. The purpose of CSS is to get away from that table cell-like square thinking.

  • http://www.betolerant.fr Jeune gay

    Thanks for this fabulous framework ;)

  • http://www.articlepin.com/ ArticlePin

    Great post! As a web developer I like Elastic and BlueprintCSS.

  • http://www.cnpintegrations.com joomla web developer

    This list of CSS frameworks is surely going to benefit a lot of developers and designers. any thanks for the collection!

  • http://www.sign-mart.com Sign supplies

    Amazing post! I initially found your blog a week or so ago, and I want to subscribe to your RSS feed.

    signsupplies

  • http://www.maxwol.com Online Cosmetic shop

    I recently came across your blog and have been reading along. I thought I would leave my first comment. I don’t know what to say except that I have enjoyed reading. Nice blog. I will keep visiting this blog very often.
     

  • http://www.ruaninvestor.com/ Insurance planning

    Thanks very good post. it is indeed wonderful to read your article,I like it very much.

  • http://www.sleekandchicboutique.com/ Cheap fashion jewelry

    Wow! Great website! I love reading all the article! keep it up! 

  • http://ideageek.it/server-emule Server Emule 2011

    Great post! As a web developer I like Elastic and BlueprintCSS

  • http://ideageek.it/server-emule Server Emule 2011

    Great post! As a web developer I like Elastic and BlueprintCSS

  • http://www.myrankmonsters.com Web Marketing Company Oklahoma

    our post is rocking and knowledgeable… I really appreciate the way you write . I would like to read more from you

  • http://google.com test

    nice

  • http://www.creativementor.com.au/dreamweaver-training-course.html Dreamweaver Courses

    If you want to discover how to create a web page, then read this document. It will give you some ways on how to create a web page using the Dreamweaver software.

blog comments powered by Disqus