Most designers would have heard of the term ‘CSS Frameworks’, for those who don’t know or aren’t sure, here is a brief description from: Wikipedia:
A CSS framework is a library that is meant to allow for easier, more standards-compliant styling of a webpage using the Cascading Style Sheets language. Just like programming and scripting language libraries, CSS frameworks package a number of ready-made options for designing and outlaying a webpage. .
Sounds great doesn’t it, something that is going to make designing and developing a website that little bit easier. It will take away the repeating of the same old boring stuff and if you write your framework correctly you will be guaranteed your code will meet W3C recommendations. That will leave you plenty of time to design your site, the fun side of the job!
There are a number of Frameworks you can freely download and use, you will need a fair bit of CSS knowledge, some patience and a fair bit of time to get yourself familiar with the layout. The page layout structure is pretty standard across almost all Frameworks, it could be: Header; Main Content; Sub Content; Local Nav; Main Nav; Footer. They also have simple layout structures: Vertical Nav; Horizontal Nav; One Column; Two Column… The variations on structure goes on and on… Any structure you want, basically.
What I am trying to say is that if you are a serious designer/developer you need to use a good Framework, something that in the long term is going to save you a lot frustrations and time. Maybe you will or already have written your own Framework. I have my own, well two actually. One purely for Wordpress and one for everything else. Not much difference in the two, but I do like to follow a particular method when designing for Wordpress, just my preference.
There is a lot more to CSS Frameworks than I have written here, but I am not going to bore you, download them and try them out. If you don’t like it don’t use, its not for everyone. As with everything else in the world there are a few critics of CSS Frameworks, the pros do outnumber the cons, its all about opinion.
As for me I love them, and I am very grateful to the writers of the following ten CSS Frameworks:
12 of the best CSS Frameworks
1.Elements CSS Frameworks (Source: Project Designs)
2.WYMstyle: a CSS framework (Source: Daniel Reszka)
3.YAML CSS Framework (Source: High Resolution)
4.YUI Grids CSS (Source: Yahoo)
7.Schema Web Design Framework
(Source: David Golding Design)
9.Tripoli Beta CSS Framework
(Source: Monc)
10.ESWAT Web Project Framework
(Source: Philip Karpiak)
11.CwS CSS Framework
(Source: Content with Style)
12.My (not really mine) CSS Framework
(Source: That Standards Guy)
There are 42 Comments › Leave your comment
Leave a Reply
66 Trackbacks
- Los 12 mejores CSS Frameworks | Kabytes
- 12 frameworks CSS que deberías conocer | aNieto2K
- Chris Carlson » links for 2008-03-28
- trainingo2.net
- links for 2008-03-29 at DeStructUred Blog
- links for 2008-03-29 « toonz
- Los 12 frameworks de CSS más top » Dubo.cl
- » Top 12 CSS Frameworks and How to Understand Them Webcreatives
- Cybermagic » Blog Archive » Top 12 CSS Frameworks
- links for 2008-03-30 « Brent Sordyl’s Blog
- 20080401 網摘 — Arthur C. Clarke - 網絡暴民 Jacky’s Blog
- links for 2008-03-31 at graemehunter.co.uk
- a study in process + image + space » Blog Archive » links for 2008-03-31
- Блог Волотко Дмитрия - Это нормально © :: Entries :: 10 CSS фраймворков и что это такое
- [網摘] 20080402 « Oceanic | 人生海海
- Brève 14: jQuery, wallpaper, CSS, listes …
- Which Social Networks Provide the Best Design-Related Content? | Vandelay Website Design
- links for 2008-04-04 | Eugeni’s blog
- Top 12 CSS Frameworks | gEEK tHE pLANET
- Two Mad Geeks » CSS Frameworks & How To Understand Them
- 12 frameworks CSS
- callmebird » Blog Archive » CSS Frameworks
- Web Tasarımla ilgili 676 link
- Frameworks CSS | Desarrollo Web, Django, Python, Web2.0 | Culpable de mis opiniones !!
- WordPress Blog » 12 frameworks CSS
- 9 Top CSS Essential Skills That Every Web designer Should Learn - aComment.net
- 9 Top CSS Essential Skills That Every Web designer Should Learn « Kurt’s Rasmussen Class Weblog
- Web Developer Blog - Downloadtube.com » Blog Archive » Free CSS Frameworks For Instant Development of Website Layouts
- El Rallador, Accesibilidad, Usabilidad y Est
- Blog - FRHost Hospedagem de Site » Blog Archive » 9 Dicas de CSS que todo Designer deve Saber
- Ronda frameworks CSS » Criterion
- Getting Started with Application Building | Binary Crunch
- CSS tips that every beginning developer should know | Arbenting
- Heita! » Blog Archive » CSS Frameworks - The what, why, who and possibly even where
- Her Web Tasarımcısının Öğrenmesi Gereken 9 Önemli CSS Yeteneği « Bay Bedava - Netten Başlıklar
- Her Web Tasarımcısının Öğrenmesi Gereken 9 Önemli CSS Yeteneği | Atkn Klkn'ın not defteri
- The newbie guide to running a design business. Part 1.
- CSS Frameworks Suck | Are you Insane?
- her web tasarımcının öğrenmesi gereken 9 önemli css yeteneği |
- YUI Grids vs Blueprint | Spigot Design
- stign.no | CSS frameworks
- Programare web, dezvoltare personală » CSS framework
- Web Design - Electronic Arts UK Community
- Web Design Industry Jargon: Glossary and Resources | How-To | Smashing Magazine
- css framework « TTO
- BluePrint CSS Framework (Updated)
- Top 12 CSS Frameworks | hyperdigitalinteraction Inc.
- Arbenting's Cliff's Notes to CSS | Arbenting
- Top 12 CSS Frameworks | VisualGraf Comunicación
- CSS Rehab - 3 Step Program To Getting Clean « typesett - Your AMUSING Resource for Useful Design, Typography and Web Dev Articles
- Confluence: Horizon Redesign
- 不存在的空间 » Top 12 CSS Frameworks and How to Understand Them
- Tinklapius kurkime lengviau
- CSS Frameworks | milo
- Her Web Tasarımcısının Öğrenmesi Gereken 9 Önemli CSS Yeteneği « IsimsizZ WordPressS
- Radosław Mejer (radmen) 's status on Wednesday, 16-Sep-09 14:37:45 UTC - Identi.ca
- new-impulse multimedia | Blog » Blog Archive » Webdesign vakjargon uitgelegd
- Żargon projektantów stron: słownik i źródła
- Los 12 mejores CSS Frameworks « blog NSNC
- 9 Top CSS Essential Skills : Nauman Akhtar
- Usage of CSS frameworks in slicing pages? | Blog - PSD to HTML - CSS WITH COLOUR (Frontend Development)
- 網站製作學習誌 » [Web] 連結分享
- Web Design Industry Jargon: Glossary and Resources « RAMPAISARI
- 9 Top CSS Essential Skills That Every Web designer Should Learn | DevWebPro
- Kerangka CSS Blueprint Mempermudah Pengembangan Weblog | All Tutorials - Blogger - Wordpress - Joomla - Design - Insurance
- Artmov » Archive » Usage of CSS frameworks in slicing pages?



























28 Mar, 2008
You’re doing such great work collecting incredibly usefull information for webdesigners.
Great work,
Evert de Ruiter
28 Mar, 2008
Thanks for this links. Here’s another CSS general purpose resource, http://webshopinabox.peter-tashjian.com/WebShopInABox.htm
28 Mar, 2008
I actually meant to provide the following URL for a site that has 101 CSS inspirational galleries http://www.virtualhosting.com/blog/2008/inspiration-overload-100-css-galleries-you-need-to-check-out/
28 Mar, 2008
css frameworks suck, only a n00b would use a css framework. Eric myers reset.css and a simple typography.css is on the other hand ok to use as a base. But other than that css frameworks are bloated and encourage bad practice!!!!
28 Mar, 2008
Hmm- maybe it’s not a full framework, but it’s at least on par with Boilerplate – Check out http://960.gs 960 Grid System from Nathan Smith. It’s pretty straightforward.
28 Mar, 2008
Thanks.. before i read your post.. i only know css framework from yahoo..
28 Mar, 2008
Of all the above I like YUI Grids CSS the most. I’d also tried Blueprint CSS but I sticked to the previous one. Its the best.
29 Mar, 2008
You forgot this:
http://960.gs/
is for grid design
29 Mar, 2008
Dont overlook the Drupal/PHP phptemplate system.
http://drupal.org/node/171194
30 Mar, 2008
A very good list, thanks!
30 Mar, 2008
order from best?
21 Apr, 2008
Thanks for the nice compilation of css frameworks. I have my own css framework as well, but, when i go thru each one of them, i am able to learn a thing or 2.
5 May, 2008
I’ve been working on one that combines the grid of Blueprint with the typography of Tripoli. http://capsizedesigns.com/blog/2008/04/bluetripcss-a-fusion-of-blueprint-and-tripoli/
26 May, 2008
A very good list
15 Jul, 2008
thanks for u information
11 Aug, 2008
CSS “Cascading Style Sheets” Lessons
css list style Properties and examples — http://css-lessons.ucoz.com/list-css-examples.htm
12 Aug, 2008
[...]These days, CSS frameworks are quite a buzz word in web world. I am not sure how many people use it but surely there are plenty of cost-free options available for everyone. Weather it a big team or an independent designer who work on different projects on a regular basis[...]
21 Aug, 2008
hello, im new at css, and i would like to know what is the difference between css frameworks and templates? great article! bye
22 Aug, 2008
Is there some site with real life examples? Examples that use some of these frameworks.
22 Sep, 2008
Yeah,
I didn’t like any of the existing ones so i wrote my own. http://simpl.romack.net/ it’s only about 200 lines not compacted.
27 Sep, 2008
howdo i download and test simpl.css
4 Oct, 2008
s. tunji turner
I will make a download and put up some better documentation prob. a cheatsheet.
There are comments in the existing css though.
1 Dec, 2008
To download simpl.css go here: http://simpl.romack.net/styles/simpl.css
Hope that helps.
1 Dec, 2008
*CORRECTION*
http://simpl.romack.net/Styles/Simpl.css
Note: The url is case sensitive, so if you’re typing it please be aware of that.
2 Dec, 2008
http://unobtrusivecss.com/ – Common sense CSS framework.
16 Jan, 2009
Wow excellent work, I never knew if there were any CSS frameworks at all. I am just wondering where the web development is going to be in the 2009. Its all about frameworks now, you’ve got PHP frameworks, you have got JavaScript frameworks, tools and libraries, Ajax frameworks and libraries etc. Could you please put all these into a one comprehensive article sometime so they actually give an overall broader view of what web designing and development is all about in these days. Thanx
22 Feb, 2009
nice post, actual after a year )
test also jQuery UI (http://jqueryui.com/)
23 Feb, 2009
i think u forgot to add 960 framework
12 May, 2009
960.gs is a must to mention here
21 May, 2009
thanks!
22 May, 2009
Really interesting and useful artcile – thanks!
11 Jun, 2009
Good list!
I like BluePrint a lot.
Just posted an intro about Web Frameworks in general and you’ve been linked.
Carlos
14 Jun, 2009
what about CSS MECHANO, give it a look
5 Aug, 2009
960 GS is a must try. I have tried YAML and Yui (complex) and blueprint (messy). Nothing beats the simplicity of 960 grid system.
5 Aug, 2009
960 GS is a must try. I have tried YAML and Yui (complex) and blueprint (messy). Nothing beats the simplicity of 960 grid system.
25 Aug, 2009
960 gridder is also one of the best css framework.
3 Sep, 2009
I used Blueprint CSS for a major website: the new CCA – Canadian Centre for Architecture. The site has a minimalist aesthetic with a lot of varying templates – over 18 basic configurations in all – that all adhere to the same basic grid – which is wrapped in a semi-liquid, multi-column layout. For the liquid elements of the site, I created my own solutions. But for most of the site BP was the obvious choice, it really saved a lot of time and was very easy to work with. I really think CSS frameworks are the way to go on any major project that needs to handle multiple layouts, dynamic pages of any significant number and needs to be easily upgraded in the future. the price you might pay in code overhead is easily offset by the coherence many frameworks, namely BP and YUI, offer.
8 Sep, 2009
i found this one more to my liking.
snowdust.download from http://www.wedoui.com/
3 Oct, 2009
I love the 960 Grid System, the best imo
9 Nov, 2009
In development but very interesting for the philosophy at the foundation and the high quality/efficiency of the code : http://github.com/stubbornella/oocss/
12 Dec, 2009
great list to look at and learn css frameworks
10 Jan, 2010
WOW! Your footer really blew my mind. Excellent.