CSS Framework?
What’s out there?
Conclusion
CSS Frameworks: An introduction
Horst Gutmann
2/2/2008
1 / 21

CSS Framework?
What’s out there?
Conclusion
1 CSS Framework?
2 What’s out there?
Blueprint
YUI Grids
YAML
3 Conclusion
2 / 21

CSS Framework?
What’s out there?
Conclusion
CSS Framework?
... or library, or in some cases a collection of common hacks
for common problems.
The moment you extract some general definitions from one
project and make them accessible to other projects, have
created yourself a framework
They help you not to have to look up the same CSS hacks for
positioning in IE again and again ;-)
3 / 21

CSS Framework?
What’s out there?
Conclusion
Purpose
The goal here is to allow the designer or developer to
focus on tasks that are unique to a given project, rather
than reinventing the wheel each time around.
– Jeff Croft1
1
http://www.alistapart.com/articles/frameworksfordesigners
4 / 21

CSS Framework?
What’s out there?
Conclusion
Separation
In most cases it makes sense reset
to modularize a basic baseline
stylesheet to make it possible add-ons
to only use some parts of it. typography
This makes reusing the forms
stylesheets even easier. grid
...
5 / 21

CSS Framework?
What’s out there?
Conclusion
Advantages
DRY (Don’t repeat yourself)
Basic concept that makes it easy for other people to
understand the style
Implicitly use coding/naming guidelines
6 / 21

CSS Framework?
What’s out there?
Conclusion
Disadvantages
... that are not yours
You have to learn the framework
Possible semantical implications
Might offer too much
7 / 21

CSS Framework? Blueprint
What’s out there? YUI Grids
Conclusion YAML
Something has to be there...
Symfony
Ruby on Turbo-
Rails gears
Backend
Django ...
jQuery JavaScript CSS
YUI ?
...
8 / 21

CSS Framework? Blueprint
What’s out there? YUI Grids
Conclusion YAML
Basic example
... with 4 columns
Most frameworks and
base-designs are targeted
at a maximum of 3
columns
1st 2nd 3rd 4th
... so how to get 4
columns to work, should
give some indication of
the flexibility of a
framework
... and when you have to
start with nesting
... and how much
extra-markup is required
9 / 21

CSS Framework? Blueprint
What’s out there? YUI Grids
Conclusion YAML
http://blueprintcss.googlecode.com
License: MIT
Based on the idea of splitting the width of a
page into 24 columns (with 40px = 30px +
10px margin each)
By default max-width 950px (24 ∗ 40 − 10)
Semi-official tool to create a grid for every
fixed resolution
No fluid layout possible (yet)
10 / 21

CSS Framework? Blueprint
What’s out there? YUI Grids
Conclusion YAML
Required structure
.container
.column .column .column .column
.span-6 .span-6 .span-6 .span-6
.last
.span-6 basically defines a column that occupies 6 grid-columns.
11 / 21

CSS Framework? Blueprint
What’s out there? YUI Grids
Conclusion YAML
Tools
Figure: Layout buildera
Figure: Grid generatora
a
http:
a
http://kematzy.com/ //www.blueprintlayouttool.com/
blueprint-generator/
12 / 21

CSS Framework? Blueprint
What’s out there? YUI Grids
Conclusion YAML
http://developer.yahoo.com/yui
License: BSD
Part of the Yahoo User Interface library
Let’s you separate a page into multiple
columns (with a max. of 4) and subcolumns
No pre-defined columns like in Blueprint.
Requires a basic page structure with id’
elements.
Font-size using % (mapping table provided)
13 / 21

CSS Framework? Blueprint
What’s out there? YUI Grids
Conclusion YAML
Template base structure
#doc{2,3,4} | #custom-doc
#hd #doc defines the initial width of
the grid (#doc3 = 100%)
#bd
#bd is required for automatic
cleaning floats
#yui-main .yui-b
2-column designs with
templates .yui-t{1,2,3,4,5,6},
#yui-main and .yui-b
#ft
Nesting using pre-made floats
((1/3,1/3,1/3), (1/4,3/4), ...)
Figure: Structure for
templates
14 / 21

CSS Framework? Blueprint
What’s out there? YUI Grids
Conclusion YAML
Grid example
<d i v i d=” bd ”>
<d i v c l a s s=” y u i −g ”>
<d i v c l a s s=” y u i −g f i r s t ”>
<d i v c l a s s=” y u i −u f i r s t ”>1 s t</ d i v>
<d i v c l a s s=” y u i −u”>2 nd</ d i v>
</ d i v>
<d i v c l a s s=” y u i −g ”>
<d i v c l a s s=” y u i −u f i r s t ”>3 r d</ d i v>
<d i v c l a s s=” y u i −u”>4 t h</ d i v>
</ d i v>
</ d i v>
</ d i v>
15 / 21

CSS Framework? Blueprint
What’s out there? YUI Grids
Conclusion YAML
http://www.yaml.de
License: CC-A and commercial license
Very well documented
Floats everywhere
Also supports IE5.
No separation between reset- and
base-stylesheet
No merged stylesheet provided
16 / 21

CSS Framework? Blueprint
What’s out there? YUI Grids
Conclusion YAML
Recommended base structure
#page_margin
#page
#header #topnav
#nav Recommended because
#main
mostly the IE-hacks are
#col1
based on this structurea
#col3 has an auto-width
#col2
a
http://www.yaml.de/en/documentation
#col3
variations.html
#footer
17 / 21

CSS Framework? Blueprint
What’s out there? YUI Grids
Conclusion YAML
One last time: The example
<d i v i d=” body ”>
<d i v i d=” c o l 1 ”>
<d i v i d=” c o l 1 c o n t e n t ”>1 s t</ d i v></ d i v>
<d i v i d=” c o l 2 ”>
<d i v i d=” c o l 2 c o n t e n t ”>2 nd</ d i v></ d i v>
<d i v i d=” c o l 3 ”>
<d i v c l a s s=” s u b c o l u m n s ”>
<d i v c l a s s=” c 5 0 l ”>
<d i v c l a s s=” s u b c l ”>3 r d</ d i v></ d i v>
<d i v c l a s s=” c 5 0 r ”>
<d i v c l a s s=” s u b c r ”>4 t h</ d i v></ d i v>
</ d i v>
</ d i v>
</ d i v>
18 / 21

CSS Framework? Blueprint
What’s out there? YUI Grids
Conclusion YAML
Uhm...
#c o l 1 {
w i d t h : 25%;
float : left ;
}
The problem here is, that this #c o l 2 {
w i d t h : 25%;
is not all that is required. You
float : left ;
also need at least this: }
#c o l 3 {
margin : 0 ;
w i d t h : 50%;
}
19 / 21

CSS Framework?
What’s out there?
Conclusion
Conclusion
You’ll have to see for yourself, which one is the best for you
Blueprint looks like a good approach for fixed-width designs
because it makes calculating image dimensions easy.
YUI looks more lightweight compared to YAML
YUI doesn’t let you grid header not footer.
Is it still worth supporting IE5?
20 / 21

CSS Framework?
What’s out there?
Conclusion
Thanks for your attention
Questions?
21 / 21