CSS FRAMEWORKSmake the right choice

Kevin Yank sitepoint.com@sentience @sitepointdotcom

Edge of the Web 2009

CSS FRAMEWORKS

“a set of tools, libraries, conventions, and best practices that attempt to abstract routine tasks into generic modules that can

be reused”

— Jeff Croft, Frameworks for Designers

SlickMap CSS

THREE QUESTIONS

What do CSS frameworks do?

How do I choose a CSS framework?

Are CSS frameworks pure evil?pure evil

THREE QUESTIONS

CSS RESET

http://www.flickr.com/photos/redux/3219068532/

CSS RESET

CSS RESETbody,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { ! margin:0;! padding:0;}table {! border-collapse:collapse;! border-spacing:0;}fieldset,img { ! border:0;}address,caption,cite,code,dfn,em,strong,th,var {! font-style:normal;! font-weight:normal;}ol,ul {! list-style:none;}caption,th {! text-align:left;}h1,h2,h3,h4,h5,h6 {! font-size:100%;! font-weight:normal;}q:before,q:after {! content:'';}abbr,acronym {! border:0;}

* {margin:0

;

padding:0;

}

CSS RESET

YUI Reset CSS Eric Meyer’s Reset CSS

leaves critical styles aloneins left underlined

resets critical stylesno :focus outline, unstyled ins

sets default font stylesstrong not bold, em not italic

attempts to inherit font stylesleaves built-in font styles

CSS RESET

YUI Reset CSS Eric Meyer’s Reset CSS

leaves critical styles aloneins left underlined

resets critical stylesno :focus outline, unstyled ins

sets default font stylesstrong not bold, em not italic

attempts to inherit font stylesleaves built-in font styles

CSS RESETCSS RESET

CONTROVERSY IN MICROCOSM

CONTROVERSY IN MICROCOSM

“The problem I’ve had with these resets is that I then find myself declaring much more than I ever needed to just to get browsers back to rendering things the way I want. As it turns

out, I’m perfectly happy with how a number of elements render by default. I like lists to have bullets and strong elements to

have bolded text.”

— Jonathan Snook, No CSS Reset

“I don’t want to take style effects for granted. […] It makes me think just that little bit harder about the semantics of my

document. With the reset in place, I don’t pick strong because the design calls for boldfacing. Instead, I pick the right element—

whether it’s strong or em or b or h3 or whatever—and then style it as needed.”

— Eric Meyer, Reset Reasoning

“The problem I’ve had with these resets is that I then find myself declaring much more than I ever needed to just to get browsers back to rendering things the way I want. As it turns

out, I’m perfectly happy with how a number of elements render by default. I like lists to have bullets and strong elements to

have bolded text.”

— Jonathan Snook, No CSS Reset

“The problem I’ve had with these resets is that I then find myself declaring much more than I ever needed to just to get browsers back to rendering things the way I want. As it turns

out, I’m perfectly happy with how a number of elements render by default. I like lists to have bullets and strong elements to

have bolded text.”

— Jonathan Snook, No CSS Reset

CONTROVERSY IN MICROCOSM

“The problem I’ve had with these resets is that I then find myself declaring much more than I ever needed to just to get browsers back to rendering things the way I want. As it turns

out, I’m perfectly happy with how a number of elements render by default. I like lists to have bullets and strong elements to

have bolded text.”

— Jonathan Snook, No CSS Reset

“I don’t want to take style effects for granted. […] It makes me think just that little bit harder about the semantics of my

document. With the reset in place, I don’t pick strong because the design calls for boldfacing. Instead, I pick the right element—

whether it’s strong or em or b or h3 or whatever—and then style it as needed.”

— Eric Meyer, Reset Reasoning

“I don’t want to take style effects for granted. […] It makes me think just that little bit harder about the semantics of my

document. With the reset in place, I don’t pick strong because the design calls for boldfacing. Instead, I pick the right element—

whether it’s strong or em or b or h3 or whatever—and then style it as needed.”

— Eric Meyer, Reset Reasoning

“I don’t want to take style effects for granted. […] It makes me think just that little bit harder about the semantics of my

document. With the reset in place, I don’t pick strong because the design calls for boldfacing. Instead, I pick the right element—

whether it’s strong or em or b or h3 or whatever—and then style it as needed.”

— Eric Meyer, Reset Reasoning

CONTROVERSY IN MICROCOSM

CSS RESET

TYPOGRAPHIC GRIDS

http://www.flickr.com/photos/evaekeblad/468013086/

COLUMN GRIDS

http://www.flickr.com/photos/evaekeblad/468013086/

COLUMN GRIDS

Blueprint 960 Grid System YUI Grids CSS

950px fixed 960px fixedfluid or

750/950/974px fixed

24 columnsor custom

12/16 columnsor custom custom

good docs, nice code, any source order

nice code,any source order

fluid and mixed layouts

BLUEPRINT

950px

30px 10px

BLUEPRINT

class="container"

950px

30px 10px

BLUEPRINT

site header class="span-24"

class="container"

950px

30px 10px

BLUEPRINT

site header class="span-24"

class="container"content class="span-18"

950px

30px 10px

BLUEPRINT

site header class="span-24"

class="container"content class="span-18"sidebar

class="span-6 last"

950px

30px 10px

BLUEPRINT

site header class="span-24"

class="container"content class="span-18"

sidebar class="span-6

last"

feature A class="span-9"

950px

30px 10px

BLUEPRINT

site header class="span-24"

class="container"content class="span-18"

sidebar class="span-6

last"

feature A class="span-9"

feature B class="span-9 last"

950px

30px 10px

BLUEPRINT

site header class="span-24"

class="container"content class="span-18"

sidebar class="span-6

last"

feature A class="span-9"

feature B class="span-9 last"

body content class="span-18 last"

950px

30px 10px

BLUEPRINT

site header class="span-24"

class="container"content class="span-18"

sidebar class="span-6

last"

feature A class="span-9"

feature B class="span-9 last"

body content class="span-18 last"

department A class="span-6"

department B class="span-6"

department C class="span-6 last"

950px

30px 10px

960 GRID SYSTEM

960px

60px 20px 40px

class="container_16"

960 GRID SYSTEM

960px

60px 20px 40px

class="container_16"

960 GRID SYSTEM

site header class="grid_16"960px

60px 20px 40px

class="container_16"content class="grid_12"

960 GRID SYSTEM

site header class="grid_16"960px

60px 20px 40px

class="container_16"content class="grid_12"

960 GRID SYSTEM

site header class="grid_16"

sidebar class="grid_4"

960px

60px 20px 40px

class="container_16"content class="grid_12"

feature A class="grid_6 alpha"

feature B class="grid_6 omega"

body content class="grid_12 alpha omega"

960 GRID SYSTEM

site header class="grid_16"

sidebar class="grid_4"

department A class="grid_4 alpha"

department B class="grid_4"

department C class="grid_4 omega"

960px

60px 20px 40px

YUI GRIDS CSS

YUI GRIDS CSS<div id="doc3" class="yui-t6">! <div id="hd"><h1>Header</h1></div>! <div id="bd">! ! <div id="yui-main">! ! ! <div class="yui-b">! ! ! ! <div class="yui-g">! ! ! ! ! <div class="yui-u first">! ! ! ! ! ! <!-- YOUR DATA GOES HERE -->! ! ! ! ! </div>! ! ! ! ! <div class="yui-u">! ! ! ! ! ! <!-- YOUR DATA GOES HERE -->! ! ! ! ! </div>! ! ! ! </div>! ! ! ! <div class="yui-g">! ! ! ! ! <!-- YOUR DATA GOES HERE -->! ! ! ! </div>! ! ! ! <div class="yui-gb">! ! ! ! ! <div class="yui-u first">! ! ! ! ! ! <!-- YOUR DATA GOES HERE -->! ! ! ! ! </div>! ! ! ! ! <div class="yui-u">! ! ! ! ! ! <!-- YOUR DATA GOES HERE -->! ! ! ! ! </div>! ! ! ! ! <div class="yui-u">! ! ! ! ! ! <!-- YOUR DATA GOES HERE -->! ! ! ! ! </div>! ! ! ! </div>! ! ! </div>! ! </div>! ! <div class="yui-b">! ! ! <!-- YOUR NAVIGATION GOES HERE -->! ! </div>! </div> <div id="ft"><p>Footer</p></div></div>

<div id="doc3" class="yui-t6">! <div id="hd"><h1>Header</h1></div>! <div id="bd">! ! <div id="yui-main">! ! ! <div class="yui-b">! ! ! ! <div class="yui-g">! ! ! ! ! <div class="yui-u first">! ! ! ! ! ! <!-- YOUR DATA GOES HERE -->! ! ! ! ! </div>! ! ! ! ! <div class="yui-u">! ! ! ! ! ! <!-- YOUR DATA GOES HERE -->! ! ! ! ! </div>! ! ! ! </div>! ! ! ! <div class="yui-g">! ! ! ! ! <!-- YOUR DATA GOES HERE -->! ! ! ! </div>! ! ! ! <div class="yui-gb">! ! ! ! ! <div class="yui-u first">! ! ! ! ! ! <!-- YOUR DATA GOES HERE -->! ! ! ! ! </div>! ! ! ! ! <div class="yui-u">! ! ! ! ! ! <!-- YOUR DATA GOES HERE -->! ! ! ! ! </div>! ! ! ! ! <div class="yui-u">! ! ! ! ! ! <!-- YOUR DATA GOES HERE -->! ! ! ! ! </div>! ! ! ! </div>! ! ! </div>! ! </div>! ! <div class="yui-b">! ! ! <!-- YOUR NAVIGATION GOES HERE -->! ! </div>! </div> <div id="ft"><p>Footer</p></div></div>

YUI GRIDS CSS<div id="doc3" class="yui-t6">! <div id="hd"><h1>Header</h1></div>! <div id="bd">! ! <div id="yui-main">! ! ! <div class="yui-b">! ! ! ! <div class="yui-g">! ! ! ! ! <div class="yui-u first">! ! ! ! ! ! <!-- YOUR DATA GOES HERE -->! ! ! ! ! </div>! ! ! ! ! <div class="yui-u">! ! ! ! ! ! <!-- YOUR DATA GOES HERE -->! ! ! ! ! </div>! ! ! ! </div>! ! ! ! <div class="yui-g">! ! ! ! ! <!-- YOUR DATA GOES HERE -->! ! ! ! </div>! ! ! ! <div class="yui-gb">! ! ! ! ! <div class="yui-u first">! ! ! ! ! ! <!-- YOUR DATA GOES HERE -->! ! ! ! ! </div>! ! ! ! ! <div class="yui-u">! ! ! ! ! ! <!-- YOUR DATA GOES HERE -->! ! ! ! ! </div>! ! ! ! ! <div class="yui-u">! ! ! ! ! ! <!-- YOUR DATA GOES HERE -->! ! ! ! ! </div>! ! ! ! </div>! ! ! </div>! ! </div>! ! <div class="yui-b">! ! ! <!-- YOUR NAVIGATION GOES HERE -->! ! </div>! </div> <div id="ft"><p>Footer</p></div></div>

<div id="doc3" class="yui-t6">! <div id="hd"><h1>Header</h1></div>! <div id="bd">! ! <div id="yui-main">! ! ! <div class="yui-b">! ! ! ! <div class="yui-g">! ! ! ! ! <div class="yui-u first">! ! ! ! ! ! <!-- YOUR DATA GOES HERE -->! ! ! ! ! </div>! ! ! ! ! <div class="yui-u">! ! ! ! ! ! <!-- YOUR DATA GOES HERE -->! ! ! ! ! </div>! ! ! ! </div>! ! ! ! <div class="yui-g">! ! ! ! ! <!-- YOUR DATA GOES HERE -->! ! ! ! </div>! ! ! ! <div class="yui-gb">! ! ! ! ! <div class="yui-u first">! ! ! ! ! ! <!-- YOUR DATA GOES HERE -->! ! ! ! ! </div>! ! ! ! ! <div class="yui-u">! ! ! ! ! ! <!-- YOUR DATA GOES HERE -->! ! ! ! ! </div>! ! ! ! ! <div class="yui-u">! ! ! ! ! ! <!-- YOUR DATA GOES HERE -->! ! ! ! ! </div>! ! ! ! </div>! ! ! </div>! ! </div>! ! <div class="yui-b">! ! ! <!-- YOUR NAVIGATION GOES HERE -->! ! </div>! </div> <div id="ft"><p>Footer</p></div></div>

id="doc3" 100% width

class="yui-t6" 300px right sidebar

class="yui-g" 2-col sub-grid

class="yui-gb" 3-col sub-grid

class="yui-u" grid unit

ANNOYED?

NON-SEMANTIC CLASSES

NON-SEMANTIC CLASSES

class="span-9 last"

class="grid_6 alpha"

class="yui-t6"

NON-SEMANTIC CLASSESHTML4

“The class attribute has several roles in HTML:

• As a style sheet selector (when an author wishes to assign style information to a set of elements).

• For general purpose processing by user agents.”

HTML5 Draft

“Authors may use any value in the class attribute, but are encouraged to use the values that describe the nature of the content, rather than values that describe the desired presentation of the content.”

“Good names don’t change

“Think about why you want something to look a certain way, and not really about how it should look. Looks can always change, but the reasons for giving something a look stay the same.”

NON-SEMANTIC CLASSES

Let’s use our own classes!

PRESENTATIONAL THINKING

COLUMN GRIDS

Blueprint 960 Grid System YUI Grids CSS

950px fixed 960px fixedfluid or

750/950/974px fixed

24 columnsor custom

12/16 columnsor custom custom

good docs, nice code, any source order,

semantic classes

nice code,any source order

fluid and mixed layouts

COLUMN GRIDS

BASELINE GRIDS

BASELINE GRIDS

vertical rhythm

default font 12px/18px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel

purus scelerisque sit amet vestibulum justo viverra. Cras posuere lobortis libero

egestas suscipit. Donec aliquet, sem at ornare dictum, elit risus eleifend leo, eget

suscipit ipsum nunc nec felis. Pellentesque lacus quam, iaculis sed imperdiet non,

mollis sit amet lectus. Ut consequat malesuada lobortis. Integer et congue dolor.

Etiam mi lacus, eleifend ac ornare id, malesuada et metus. Etiam et lacus nisi.

Fusce justo justo, lobortis nec mollis in, laoreet tempor velit. Phasellus vel augue

non ligula condimentum dapibus. Pellentesque nec turpis egestas sapien gravida

ultrices.

12px × 3 × 1 = 36px = 2 grids/line

12px × 3 × 0.5 = 18px = 1 grid margin

Heading 1

h2 {! font-size:2em;! line-height:1.5;! margin-bottom:0.75em;}

h2 {! font-size:2em;! line-height:1.5;! margin-bottom:0.75em;}

BASELINE GRIDS

vertical rhythm

default font 12px/18px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel

purus scelerisque sit amet vestibulum justo viverra. Cras posuere lobortis libero

egestas suscipit. Donec aliquet, sem at ornare dictum, elit risus eleifend leo, eget

suscipit ipsum nunc nec felis. Pellentesque lacus quam, iaculis sed imperdiet non,

mollis sit amet lectus. Ut consequat malesuada lobortis. Integer et congue dolor.

Etiam mi lacus, eleifend ac ornare id, malesuada et metus. Etiam et lacus nisi.

Fusce justo justo, lobortis nec mollis in, laoreet tempor velit. Phasellus vel augue

non ligula condimentum dapibus. Pellentesque nec turpis egestas sapien gravida

ultrices.

12px × 3 × 1 = 36px = 2 grids/line

12px × 3 × 0.5 = 18px = 1 grid margin

Heading 1

12px × 2 × 1.5 = 36px = 2 grids/line

12px × 2 × 0.75 = 18px = 1 grid margin

Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel

purus scelerisque sit amet vestibulum justo viverra.

h3 {! font-size:1.5em;! line-height:1;! margin-bottom:1em;}

h3 {! font-size:1.5em;! line-height:1;! margin-bottom:1em;}

BASELINE GRIDS

vertical rhythm

default font 12px/18px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel

purus scelerisque sit amet vestibulum justo viverra. Cras posuere lobortis libero

egestas suscipit. Donec aliquet, sem at ornare dictum, elit risus eleifend leo, eget

suscipit ipsum nunc nec felis. Pellentesque lacus quam, iaculis sed imperdiet non,

mollis sit amet lectus. Ut consequat malesuada lobortis. Integer et congue dolor.

Etiam mi lacus, eleifend ac ornare id, malesuada et metus. Etiam et lacus nisi.

Fusce justo justo, lobortis nec mollis in, laoreet tempor velit. Phasellus vel augue

non ligula condimentum dapibus. Pellentesque nec turpis egestas sapien gravida

ultrices.

12px × 3 × 1 = 36px = 2 grids/line

12px × 3 × 0.5 = 18px = 1 grid margin

Heading 1

12px × 2 × 1.5 = 36px = 2 grids/line

12px × 2 × 0.75 = 18px = 1 grid margin

Heading 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel

purus scelerisque sit amet vestibulum justo viverra.

12px × 1.5 × 1 = 18px = 1 grids/line

12px × 1.5 × 1 = 18px = 1 grid margin

Heading 3

Cras posuere lobortis libero egestas suscipit. Donec aliquet, sem at ornare dictum,

elit risus eleifend leo, eget suscipit ipsum nunc nec felis. Pellentesque lacus quam,

iaculis sed imperdiet non, mollis sit amet lectus. Ut consequat malesuada lobortis.

Integer et congue dolor.

BASELINE GRIDS

BASELINE GRIDS

BASELINE GRIDS

BASELINE GRIDS

BASELINE GRIDS

h1, h2, h3, h4, h5, h6! { position: relative; }h1, h2! ! ! ! ! { line-height: 36px; margin-bottom: 18px; }h1, h2, h3, h4! ! ! { margin-top: 18px; }h3, h4, h5, h6! ! ! { line-height: 18px; }h1! ! ! ! ! ! { font-size: 36px; top: 5px; }h2! ! ! ! ! ! { font-size: 28px; top: 8px; }h3! ! ! ! ! ! { font-size: 22px; top: 1px; }h4! ! ! ! ! ! { font-size: 18px; top: 2px; }h5! ! ! ! ! ! { font-size: 15px; top: 4px; }h6! ! ! ! ! ! { font-size: 13px; top: 5px; }

h1, h2, h3, h4, h5, h6! { position: relative; }h1, h2! ! ! ! ! { line-height: 36px; margin-bottom: 18px; }h1, h2, h3, h4! ! ! { margin-top: 18px; }h3, h4, h5, h6! ! ! { line-height: 18px; }h1! ! ! ! ! ! { font-size: 36px; top: 5px; }h2! ! ! ! ! ! { font-size: 28px; top: 8px; }h3! ! ! ! ! ! { font-size: 22px; top: 1px; }h4! ! ! ! ! ! { font-size: 18px; top: 2px; }h5! ! ! ! ! ! { font-size: 15px; top: 4px; }h6! ! ! ! ! ! { font-size: 13px; top: 5px; }

BASELINE GRIDSideal leading is font and design dependent

http://forabeautifulweb.com/blog/about/lead_weight

Helvetica vs CalibriHelvetica vs Calibri

BASELINE GRIDSideal leading is font and design dependent

http://forabeautifulweb.com/blog/about/lead_weight

Helvetica vs TimesHelvetica vs Times

BASELINE GRIDSideal leading is font and design dependent

http://forabeautifulweb.com/blog/about/lead_weight

Helvetica vs HelveticaHelvetica vs Helvetica

BASELINE GRIDS

CSS PRE-FAB

http://www.flickr.com/photos/therefore/18542525/

CSS PRE-FAB

ready-made styles for documents made of prescribed components

CSS PRE-FAB

CSS PRE-FAB

http://forabeautifulweb.com/blog/about/an_appropriate_use_for_css_frameworks/

<ul class="v6-9-9">! <li class="a-magazine span-6"> content </li>! <li class="a-subscribe span-9"> content </li>! <li class="a-shop span-9 last"> content </li></ul>

<ul class="v6-9-9">! <li class="a-magazine span-6"> content </li>! <li class="a-subscribe span-9"> content </li>! <li class="a-shop span-9 last"> content </li></ul>

CSS PRE-FAB

http://forabeautifulweb.com/blog/about/an_appropriate_use_for_css_frameworks/

<ul class="v9-6-9">! <li class="a-magazine span-9"> content </li>! <li class="a-subscribe span-6"> content </li>! <li class="a-shop span-9 last"> content </li></ul>

<ul class="v9-6-9">! <li class="a-magazine span-9"> content </li>! <li class="a-subscribe span-6"> content </li>! <li class="a-shop span-9 last"> content </li></ul>

CSS PRE-FAB

http://forabeautifulweb.com/blog/about/an_appropriate_use_for_css_frameworks/

<ul class="v9-9-6">! <li class="a-magazine span-9"> content </li>! <li class="a-subscribe span-9"> content </li>! <li class="a-shop span-6 last"> content </li></ul>

<ul class="v9-9-6">! <li class="a-magazine span-9"> content </li>! <li class="a-subscribe span-9"> content </li>! <li class="a-shop span-6 last"> content </li></ul>

CSS PRE-FAB

CSS ABSTRACTION

http://www.flickr.com/photos/bobalong/3410454292/

CSS ABSTRACTION

“Adding any form of macros or additional scopes and indirections, including symbolic constants, is not just redundant,

but changes CSS in ways that make it unsuitable for its intended audience. Given that there is currently no alternative to CSS,

these things must not be added.”

— Bert Bos, Why “variables” in CSS are harmful

CSS ABSTRACTION

SERVER-SIDE FRAMEWORKS

@import blueprint.css!blueprint_grid_columns = 16!blueprint_grid_width = 40px!blueprint_grid_margin = 20px

+blueprint-grid

#container +container

#header +column(16)

SERVER-SIDE FRAMEWORKS

!sitepoint_bg = #036!sitepoint_fg = #F60

#header background-color= !sitepoint_bg

a:link color= !sitepoint_fg a:visited color= !sitepoint_fg - #830

SERVER-SIDE FRAMEWORKS

sitepoint_bg = #036sitepoint_fg = #F60

#header: background-color: $sitepoint_bg

a:link color: $sitepoint_fg a:visited color: $sitepoint_fg - #830

SERVER-SIDE FRAMEWORKS

@constants {! sitepoint_bg:#036;! sitepoint_fg:#F60;}

#header {! background-color:!sitepoint_bg;

! a:link, a:visited {! ! color:!sitepoint_fg;! }}

@grid {! column-count:16;! column-width:40;! left-gutter-width:10;! right-gutter-width:10;! unit:px;}

#container { +container;}

#header { +columns(16);}

SERVER-SIDE FRAMEWORKS

THREE QUESTIONS

THREE QUESTIONS

What do CSS frameworks do?

How do I choose a CSS framework?

Are CSS frameworks pure evil?

What do CSS frameworks do?

How do I choose a CSS framework?

Are CSS frameworks pure evil?

FINAL THOUGHT

when all you have is a hammer…

think outside the framework

THANKS!

@sentience

kevin@sitepoint.com