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