Download - CSS Frameworks
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?BlueprintYUI GridsYAML
3 Conclusion
2 / 21
CSS Framework?What’s out there?
Conclusion
CSS Framework?
... or library, or in some cases a collection of common hacksfor common problems.
The moment you extract some general definitions from oneproject and make them accessible to other projects, havecreated yourself a framework
They help you not to have to look up the same CSS hacks forpositioning 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 tofocus on tasks that are unique to a given project, ratherthan reinventing the wheel each time around.
– Jeff Croft1
1http://www.alistapart.com/articles/frameworksfordesigners4 / 21
CSS Framework?What’s out there?
Conclusion
Separation
In most cases it makes senseto modularize a basicstylesheet to make it possibleto only use some parts of it.This makes reusing thestylesheets even easier.
reset
baseline
add-ons
typographyformsgrid...
5 / 21
CSS Framework?What’s out there?
Conclusion
Advantages
DRY (Don’t repeat yourself)
Basic concept that makes it easy for other people tounderstand 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?What’s out there?
Conclusion
BlueprintYUI GridsYAML
Something has to be there...
Backend
Ruby on Rails
Django
Symfony
Turbo-gears
...
jQuery
YUI
...
?
JavaScript CSS
Figure: Dozens of frameworks in other areas. What about CSS?8 / 21
CSS Framework?What’s out there?
Conclusion
BlueprintYUI GridsYAML
Basic example
1st 2nd 3rd 4th
... with 4 columns
Most frameworks andbase-designs are targetedat a maximum of 3columns
... so how to get 4columns to work, shouldgive some indication ofthe flexibility of aframework
... and when you have tostart with nesting
... and how muchextra-markup is required
9 / 21
CSS Framework?What’s out there?
Conclusion
BlueprintYUI GridsYAML
http://blueprintcss.googlecode.com
License: MIT
Based on the idea of splitting the width of apage 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 everyfixed resolution
No fluid layout possible (yet)
10 / 21
CSS Framework?What’s out there?
Conclusion
BlueprintYUI GridsYAML
Required structure
.container
.column.span-6
.column.span-6
.column.span-6
.column.span-6.last
.span-6 basically defines a column that occupies 6 grid-columns.
11 / 21
CSS Framework?What’s out there?
Conclusion
BlueprintYUI GridsYAML
Tools
Figure: Grid generatora
ahttp://kematzy.com/
blueprint-generator/
Figure: Layout buildera
ahttp:
//www.blueprintlayouttool.com/
12 / 21
CSS Framework?What’s out there?
Conclusion
BlueprintYUI GridsYAML
http://developer.yahoo.com/yui
License: BSD
Part of the Yahoo User Interface library
Let’s you separate a page into multiplecolumns (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?What’s out there?
Conclusion
BlueprintYUI GridsYAML
Template base structure
#hd
#ft
#doc{2,3,4} | #custom-doc
#bd
#yui-main .yui-b
Figure: Structure fortemplates
#doc defines the initial width ofthe grid (#doc3 = 100%)
#bd is required for automaticcleaning floats
2-column designs withtemplates .yui-t{1,2,3,4,5,6},#yui-main and .yui-b
Nesting using pre-made floats((1/3,1/3,1/3), (1/4,3/4), ...)
14 / 21
CSS Framework?What’s out there?
Conclusion
BlueprintYUI GridsYAML
Grid example
<div id=”bd”><div c l a s s=” yu i−g”>
<div c l a s s=” yu i−g f i r s t ”><div c l a s s=” yu i−u f i r s t ”>1 s t</ div><div c l a s s=” yu i−u”>2nd</ div>
</ div><div c l a s s=” yu i−g”>
<div c l a s s=” yu i−u f i r s t ”>3 rd</ div><div c l a s s=” yu i−u”>4 th</ div>
</ div></ div>
</ div>
15 / 21
CSS Framework?What’s out there?
Conclusion
BlueprintYUI GridsYAML
http://www.yaml.de
License: CC-A and commercial license
Very well documented
Floats everywhere
Also supports IE5.
No separation between reset- andbase-stylesheet
No merged stylesheet provided
16 / 21
CSS Framework?What’s out there?
Conclusion
BlueprintYUI GridsYAML
Recommended base structure
#header
#footer
#page
#main
#col1
#page_margin
#topnav
#nav
#col2
#col3
Recommended becausemostly the IE-hacks arebased on this structurea
#col3 has an auto-width
ahttp://www.yaml.de/en/documentation/practice/basic-variations.html
17 / 21
CSS Framework?What’s out there?
Conclusion
BlueprintYUI GridsYAML
One last time: The example
<div id=” body ”><div id=” c o l 1 ”>
<div id=” c o l 1 c o n t e n t ”>1 s t</ div></ div><div id=” c o l 2 ”>
<div id=” c o l 2 c o n t e n t ”>2nd</ div></ div><div id=” c o l 3 ”>
<div c l a s s=” subcolumns ”><div c l a s s=” c 5 0 l ”>
<div c l a s s=” s u b c l ”>3 rd</ div></ div><div c l a s s=” c 5 0 r ”>
<div c l a s s=” s u b c r ”>4 th</ div></ div></ div>
</ div></ div>
18 / 21
CSS Framework?What’s out there?
Conclusion
BlueprintYUI GridsYAML
Uhm...
The problem here is, that thisis not all that is required. Youalso need at least this:
#c o l 1 {width : 25%;f l o a t : l e f t ;
}#c o l 2 {
width : 25%;f l o a t : l e f t ;
}#c o l 3 {
margin : 0 ;w idth : 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 designsbecause 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