In the past couple of months, I have had the great pleasure of presenting a talk entitled “CSS Frameworks: Make the Right Choice” at both of Australia’s premier web design conferences: Web Directions South 2009 and Edge of the Web 2009.
Of course, even the most dedicated SitePoint fan could find it hard to justify a trip to Australia to see me speak; thankfully, the folks at Web Directions were kind enough to share the audio recorded at the event under a Creative Commons license that enables me to share it with you in a richer format.
I am delighted, therefore, to present this video re-creation of the talk including my animated slides, a screencast video demo, and the audio recorded live at Web Directions South 2009. Be sure to visit the Web Directions site for the accumulated audio and slides from the entire conference series!
CSS Frameworks: Make the Right Choice (WDS09) from SitePoint Staff on Vimeo.
SitePoint CTO Kevin Yank presented this talk at Web Directions South 2009 in Sydney, Australia on Friday, October 9th, 2009.
With the proliferation and widespread adoption of JavaScript frameworks, smart developers have wondered if a similar approach to smoothing over the rough spots of CSS might work. Thus, CSS frameworks like Blueprint, YUI Library CSS Tools, Boilerplate, and many others were born. In this session, we will survey the landscape of CSS frameworks and consider how each of them deals with the unique challenge of creating generalised, reusable CSS styles.
There are a number of different approaches, and some are better than others. Choose the right framework and you’ll save yourself a lot of work. Choose the wrong one, and you’ll find your projects weighed down by restrictive assumptions and masses of code that you don’t understand. When it comes to CSS frameworks, making the right choice is everything. By the end of this session, you might just decide that the right framework for you is no framework at all.
Related posts:
- What’s So Bad About CSS Frameworks? Standards-aware web developers often feel conflicted about using CSS frameworks....
- CSS Frameworks and Semantic Class Names CSS frameworks often contain crufty, non-semantic code. Does it have...
- Win Signed SitePoint Books at Web Directions South If you're at the Web Directions South conference in Sydney...
- Top Ruby Frameworks Rails and Merb Join Forces It's not every day that two essentially competing web development...
- First Look: Object Oriented CSS Nicole Sullivan's Object Oriented CSS aims to make your styles...
With jquery you could swap out the class names with a quick boiler plate code, no server side mess.
November 11th, 2009 at 4:31 am
Josh, I don’t think it’s a good idea for your site’s layout to depend on JavaScript being enabled in the browser if you can avoid it.
November 11th, 2009 at 9:04 am
I really enjoyed the presentation.
I want to add few things to make this discussion more interesting.
I’m author of 7 CSS Frameworks(or if you prefer Liberties) Hartija, Formy, Emastic, Malo, The Golden Grid, 1 line CSS Framework and Better Web Readability Project.
@all
One of the main focus of the talk was the Non Semantic of all Grid CSS Frameworks. Semantic is “to give meaning, meaningful”. So we want to build CSS System that is meaningful and hopefully intuitive. Why? Probably because if we get fired the next poor guy will have hard time understanding our naming system or if we have large working group we need to have unified naming system.
The problem with 6/12/16/24 grid/columns system is how do you name your columns is it one,two … or left1,left2 or grid1,grid2. And there is no simple solution for this problem.
In my case(Emastic) the solution is dl20 meaning div left 20em so if you have dl50 you will probably know that is div left 50em. Someone will say that is ugly code but certainly not meaningless. So you have 4 letters that describe your content. One of the crucial think about CSS Frameworks is the size factor, less size the better it is.
To conclude with semantics discussion CSS Frameworks are well documented you can always go to their site and read about the naming system. So you have public reference to the naming system.
About typography, the grids are meaningless without the type.You usually first project the typography then the grid. It took me while to understand this principle but in the end the grids are text holders.
I can talk or write hours about the CSS Frameworks but I don’t want to monopolize the comments. My advise is the same as Kevin open the code CSS and try to understand it, if you like it use it. And don’t be afraid to personalize it.
@sentience:
I think more suitable division of the Grid Frameworks will be: Blueprint / 960.gs / The Golden Grid (there are all px based using the magic of 960 number) then we have YUI / Malo / OO CSS (% based) and Emastic / YAML (In my opinion probably most complete CSS Frameworks)
November 11th, 2009 at 2:16 pm
Excellent, this has open my mind about css frameworks, i’ve never use one
November 11th, 2009 at 3:55 pm
How often do you copy and paste CSS? Have you people not heard of hot-keys? CSS is beyond easy. It is easy to write and extremely small. The video was great at convincing me that you never need one. Any style you want, any structure can be made in 5 minutes with your own hands, use them and your brain.
The “presentation” was great at examples of how people dont know how to code CSS.
Stop over thinking, K.I.S.S.
November 15th, 2009 at 3:13 am