CSS FRAMEWORKS
make the right choice
Kevin Yank, sitepoint.com Web Directions South 2009

CSS FRAMEWORKS
make the right choice

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

THREE QUESTIONS
What do CSS frameworks do?
How do I choose a CSS framework?
evil
Are CSS frameworks pure evil?

THREE QUESTIONS
What do CSS frameworks do?
How do I choose a CSS framework?
Are CSS frameworks pure evil
evil?

THREE QUESTIONS

THREE QUESTIONS

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

CSS RESET

CSS RESET

CSS RESET

CSS RESET

CSS RESET
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockq
uote,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;
}

CSS RESET
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockq
uote,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;
}
*{ :0;
h1,h2,h3,h4,h5,h6 { margin
g:0;
font-size:100%; paddin
font-weight:normal;
}
}
q:before,q:after {
content:'';
}
abbr,acronym {
border:0;
}

CSS RESET
YUI Reset CSS Eric Meyer’s Reset CSS
leaves critical styles alone resets critical styles
ins left underlined no :focus outline, unstyled ins
sets default font styles attempts to inherit font styles
strong not bold, em not italic leaves built-in font styles

CSS RESET
YUI Reset CSS Eric Meyer’s Reset CSS
leaves critical styles alone resets critical styles
ins left underlined no :focus outline, unstyled ins
sets default font styles attempts to inherit font styles
strong not bold, em not italic leaves built-in font styles

CSS RESET
YUI Reset CSS Eric Meyer’s Reset CSS
leaves critical styles alone resets critical styles
ins left underlined no :focus outline, unstyled ins
sets default font styles attempts to inherit font styles
strong not bold, em not italic leaves built-in font styles

CSS RESET
YUI Reset CSS Eric Meyer’s Reset CSS
leaves critical styles alone resets critical styles
ins left underlined no :focus outline, unstyled ins
sets default font styles attempts to inherit font styles
strong not bold, em not italic leaves built-in font styles

CSS RESET
YUI Reset CSS Eric Meyer’s Reset CSS
leaves critical styles alone resets critical styles
ins left underlined no :focus outline, unstyled ins
sets default font styles attempts to inherit font styles
strong not bold, em not italic leaves built-in font styles

CSS RESET

CSS RESET

CONTROVERSY IN
MICROCOSM

CONTROVERSY IN
MICROCOSM
“The problem I’vetake style effectsresets is is that then find me
“I“The problem I’ve had with thesefor granted. […] It makes
don’t want to had with these resets that I I then find
myself think just that littlemore thanever needed to just toof get
myself declaring much bit than I Iaboutneeded to just toget
declaring much more harder ever the semantics my
browsers backWith the reset in place, Iway I want. strong turns
browsers back to rendering things thedon’tI pick As ititturns
document. to rendering things the way want. As because
out,the I’m perfectly for boldfacing. Instead, I pickelements render
out, design calls happy with how number ofof the right element—
I’m perfectly happy with how a a number elements render
by default. I likeit’slike to havehaveor band andor whatever—and then
by default. Ilists lists to em bullets h3 strong elements to
whether strong or bullets or strong elements to have
have boldedneeded.”
bolded text.” ”
style it as text.
— — Jonathan Snook, No CSS Reset
Jonathan Meyer, Reset Reasoning
— Eric Snook, No CSS Reset

CONTROVERSY IN
MICROCOSM
“The problemto take style effects for granted. […]then find meme
“I don’t want I’vetake style effectsresets is that […]makes
“I don’t want to had with these for granted. I It It makes
myself thinkjust that little bit harder Iabout needed to justof my my
think just that little bit than ever the semantics toof
declaring much more harder about the semantics get
browsers backWith the reset in place, Iwaypick strongitbecause
document. With renderingin place, I don’t I want. strong because
document. to the reset things the don’t pick As turns
out,thedesign callshappyboldfacing. Instead, I pickelements render
the design calls for with how a number of the right element—
I’m perfectly for boldfacing. Instead, I pick the right element—
by default. I likeit’s strongor em oror band h3 or whatever—and then
whether it’s lists to have em b oror strong elements to then
whether strong or bullets h3 or whatever—and have
style it asas needed.”
bolded text.” ”
style it needed.
— Eric Meyer, Reset Reasoning
— Jonathan Meyer, Reset Reasoning
— Eric Snook, No CSS Reset

CONTROVERSY IN
MICROCOSM

CSS RESET

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

COLUMN GRIDS
http://www.flickr.com/photos/tochis/1302364866/

COLUMN GRIDS
Blueprint 960 Grid System YUI Grids CSS
fluid or
950px fixed 960px fixed
750/950/974px fixed
24 columns 12/16 columns
custom
or custom or custom
good docs, nice code, nice code, fluid and mixed
any source order any source order layouts

BLUEPRINT
30px 10px
950px

BLUEPRINT
30px 10px
950px
class="container"

BLUEPRINT
30px 10px
950px
site header class="span-24"
class="container"

BLUEPRINT
30px 10px
950px
site header class="span-24"
content class="span-18"
class="container"

BLUEPRINT
30px 10px
950px
site header class="span-24"
sidebar
content class="span-18" class="span-6
class="container" last"

BLUEPRINT
30px 10px
950px
site header class="span-24"
feature A
class="span-9"
sidebar
class="span-6
class="container" last"
content class="span-18"

BLUEPRINT
30px 10px
950px
site header class="span-24"
feature A feature B
class="span-9" class="span-9 last"
sidebar
class="span-6
class="container" last"
content class="span-18"

BLUEPRINT
30px 10px
950px
site header class="span-24"
feature A feature B
class="span-9" class="span-9 last"
sidebar
body content
class="container" class="span-6
class="span-18 last" last"
content class="span-18"

BLUEPRINT
30px 10px
950px
site header class="span-24"
feature A feature B
class="span-9" class="span-9 last"
sidebar
body content
class="container" class="span-6
class="span-18 last" last"
content class="span-18"
department A department B department C
class="span-6" class="span-6" class="span-6 last"

960 GRID SYSTEM
60px 20px 40px
960px

960 GRID SYSTEM
60px 20px 40px
960px
class="container_16"

960 GRID SYSTEM
60px 20px 40px
960px
site header class="grid_16"
class="container_16"

960 GRID SYSTEM
60px 20px 40px
960px
site header class="grid_16"
content class="grid_12"
class="container_16"

960 GRID SYSTEM
60px 20px 40px
960px
site header class="grid_16"
content class="grid_12" sidebar
class="container_16" class="grid_4"

960 GRID SYSTEM
60px 20px 40px
960px
site header class="grid_16"
feature A feature B
class="grid_6 alpha" class="grid_6 omega"
body content sidebar
class="container_16"
class="grid_12 alpha omega"
class="grid_4"
content class="grid_12"
department A department B department C
class="grid_4 alpha" class="grid_4" class="grid_4 omega"

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>

YUI GRIDS CSS
<div id="doc3" class="yui-t6">
! <div id="hd"><h1>Header</h1></div> class="yui-t6" 300px right sidebar
! <div id="bd">
! ! <div id="yui-main">
! ! ! <div class="yui-b">
id="doc3" 100% width
!
!
!
!
!
!
!
!
<div class="yui-g">
! <div class="yui-u first">class="yui-g" 2-col sub-grid
! ! ! ! ! ! <!-- 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"> class="yui-gb" 3-col sub-grid
! ! ! ! ! ! <!-- YOUR DATA GOES HERE -->
! ! ! ! ! </div>
! ! ! ! ! <div class="yui-u">
! ! ! ! ! ! <!-- YOUR DATA GOES HERE -->
! ! ! ! ! </div>
!
!
!
!
!
!
!
!
!
!
<div class="yui-u">
! <!-- YOUR DATA GOES HERE class="yui-u" grid unit
-->
! ! ! ! ! </div>
! ! ! ! </div>
! ! ! </div>
! ! </div>
! ! <div class="yui-b">
! ! ! <!-- YOUR NAVIGATION GOES HERE -->
! ! </div>
! </div>
<div id="ft"><p>Footer</p></div>
</div>

ANNOYED?

NON-SEMANTIC CLASSES

NON-SEMANTIC CLASSES
class="span-9 last"
class="grid_6 alpha"
class="yui-t6"

NON-SEMANTIC CLASSES

NON-SEMANTIC CLASSES
HTML4
“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.”

NON-SEMANTIC CLASSES
HTML4 HTML5 Draft
“The class attribute has several roles in “Authors may use any value in the class
HTML: attribute, but are encouraged to use the
• As a style sheet selector (when an values that describe the nature of the
author wishes to assign style content, rather than values that describe
information to a set of elements). the desired presentation of the content.”
• For general purpose processing by
user agents.”

NON-SEMANTIC CLASSES
HTML4 HTML5 Draft
“The class attribute has several roles in “Authors may use any value in the class
HTML: attribute, but are encouraged to use the
• As a style sheet selector (when an values that describe the nature of the
author wishes to assign style content, rather than values that describe
information to a set of elements). the desired presentation of the content.”
• For general purpose processing by
user agents.”
“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
fluid or
950px fixed 960px fixed
750/950/974px fixed
24 columns 12/16 columns
custom
or custom or custom
good docs, nice code,
nice code, fluid and mixed
any source order,
any source order layouts
semantic classes

COLUMN GRIDS

TYPOGRAPHIC GRIDS

TYPOGRAPHIC GRIDS
h1 {
! font-size:3em;
! line-height:1;
! margin-bottom:0.5em;
}

TYPOGRAPHIC GRIDS
vertical rhythm
h1 {
! font-size:3em;
! line-height:1;
! margin-bottom:0.5em;
}

TYPOGRAPHIC GRIDS
vertical rhythm
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel
purus scelerisque sit amet vestibulum justo viverra. Cras posuere lobortis libero
default font 12px/18px
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
h1 { non ligula condimentum dapibus. Pellentesque nec turpis egestas sapien gravida
! font-size:3em; ultrices.
! line-height:1;
! margin-bottom:0.5em;
}

TYPOGRAPHIC GRIDS
vertical rhythm
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel
purus scelerisque sit amet vestibulum justo viverra. Cras posuere lobortis libero
default font 12px/18px
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
h2 { non ligula condimentum dapibus. Pellentesque nec turpis egestas sapien gravida
! font-size:2em; ultrices.
! line-height:1.5;
! margin-bottom:0.75em;
}

TYPOGRAPHIC GRIDS
vertical rhythm Heading 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel
purus scelerisque sit amet vestibulum justo viverra. Cras posuere lobortis libero
default font 12px/18px
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
h2 { non ligula condimentum dapibus. Pellentesque nec turpis egestas sapien gravida
! font-size:2em; ultrices.
! line-height:1.5;
! margin-bottom:0.75em;
}
12px × 3 × 1 = 36px = 2 grids/line

TYPOGRAPHIC GRIDS
vertical rhythm Heading 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel
purus scelerisque sit amet vestibulum justo viverra. Cras posuere lobortis libero
default font 12px/18px
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
h2 { non ligula condimentum dapibus. Pellentesque nec turpis egestas sapien gravida
! font-size:2em; ultrices.
! line-height:1.5;
! margin-bottom:0.75em;
}
12px × 3 × 1 = 36px = 2 grids/line
12px × 3 × 0.5 = 18px = 1 grid margin

TYPOGRAPHIC GRIDS
vertical rhythm Heading 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel
purus scelerisque sit amet vestibulum justo viverra. Cras posuere lobortis libero
default font 12px/18px
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
h3 { non ligula condimentum dapibus. Pellentesque nec turpis egestas sapien gravida
! font-size:1.5em; ultrices.
! line-height:1;
! margin-bottom:1em;
}
12px × 3 × 1 = 36px = 2 grids/line
12px × 3 × 0.5 = 18px = 1 grid margin

TYPOGRAPHIC GRIDS
vertical rhythm Heading 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel
purus scelerisque sit amet vestibulum justo viverra. Cras posuere lobortis libero
default font 12px/18px
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
h3 { non ligula condimentum dapibus. Pellentesque nec turpis egestas sapien gravida
! font-size:1.5em; ultrices.
! line-height:1;
! margin-bottom:1em; Heading 2
}
12px × 2 × 1.5 = 36px = 2 grids/line
12px × 3 × 1 = 36px = 2 grids/line
12px × 3 × 0.5 = 18px = 1 grid margin

TYPOGRAPHIC GRIDS
vertical rhythm Heading 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel
purus scelerisque sit amet vestibulum justo viverra. Cras posuere lobortis libero
default font 12px/18px
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
h3 { non ligula condimentum dapibus. Pellentesque nec turpis egestas sapien gravida
! font-size:1.5em; ultrices.
! line-height:1;
! margin-bottom:1em; Heading 2
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel
purus scelerisque sit amet vestibulum justo viverra.
12px × 2 × 1.5 = 36px = 2 grids/line
12px × 2 × 0.75 = 36px = 2 grids/line
12px × 3 × 1 = 18px = 1 grid margin
12px × 3 × 0.5 = 18px = 1 grid margin

TYPOGRAPHIC GRIDS
vertical rhythm Heading 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel
purus scelerisque sit amet vestibulum justo viverra. Cras posuere lobortis libero
default font 12px/18px
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.
Heading 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel
purus scelerisque sit amet vestibulum justo viverra.
12px × 23× 1.5= 36px = 22grids/line
12px × × 1 = 36px = grids/line
12px × 2 × 0.75= 18px = 1 grid margin
12px × 3 × 0.5 = 18px = 1 grid margin

TYPOGRAPHIC GRIDS
vertical rhythm Heading 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel
purus scelerisque sit amet vestibulum justo viverra. Cras posuere lobortis libero
default font 12px/18px
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.
Heading 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel
purus scelerisque sit amet vestibulum justo viverra.
Heading 3
12px × 1.5 × 1 = 18px = 1 grids/line
12px × 23× 1.5= 36px = 22grids/line
12px × × 1 = 36px = grids/line
12px × 2 × 0.75= 18px = 1 grid margin
12px × 3 × 0.5 = 18px = 1 grid margin

TYPOGRAPHIC GRIDS
vertical rhythm Heading 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel
purus scelerisque sit amet vestibulum justo viverra. Cras posuere lobortis libero
default font 12px/18px
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.
Heading 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel
purus scelerisque sit amet vestibulum justo viverra.
Heading 3
12px × 1.5 × 1 = 18px = 1 grids/line
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,
12px ×× 23× 1.5= 18px ==22grids/line
12px × × 1 ==36px = 1 grid margin
12px 1.5 × 1 36px grids/line iaculis sed imperdiet non, mollis sit amet lectus. Ut consequat malesuada lobortis.
Integer et congue dolor.
12px × 2 × 0.75= 18px = 1 grid margin
12px × 3 × 0.5 = 18px = 1 grid margin

TYPOGRAPHIC GRIDS

TYPOGRAPHIC GRIDS

TYPOGRAPHIC GRIDS

TYPOGRAPHIC GRIDS

TYPOGRAPHIC GRIDS

TYPOGRAPHIC 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; }

TYPOGRAPHIC 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; }

TYPOGRAPHIC GRIDS
ideal leading is font and design dependent
Helvetica vs Calibri
http://forabeautifulweb.com/blog/about/lead_weight

TYPOGRAPHIC GRIDS
ideal leading is font and design dependent
Helvetica vs Times
http://forabeautifulweb.com/blog/about/lead_weight

TYPOGRAPHIC GRIDS
ideal leading is font and design dependent
Helvetica vs Helvetica
http://forabeautifulweb.com/blog/about/lead_weight

TYPOGRAPHIC GRIDS

http://www.flickr.com/photos/therefore/18542525/
CSS PRE-FAB

CSS PRE-FAB
ready-made styles for documents made of prescribed
components

CSS PRE-FAB

CSS PRE-FAB
<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>
http://forabeautifulweb.com/blog/about/an_appropriate_use_for_css_frameworks/

CSS PRE-FAB
<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>
http://forabeautifulweb.com/blog/about/an_appropriate_use_for_css_frameworks/

CSS PRE-FAB
<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>
http://forabeautifulweb.com/blog/about/an_appropriate_use_for_css_frameworks/

CSS PRE-FAB

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

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

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
@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
@constants { @grid {
sitepoint_bg:#036;
column-count:16;
sitepoint_fg:#F60;
column-width:40;
}
left-gutter-width:10;
right-gutter-width:10;
#header {
unit:px;
background-color:!sitepoint_bg; }
a:link, a:visited { #container {
color:!sitepoint_fg; +container;
} }
}
#header {
+columns(16);
}

SERVER-SIDE
FRAMEWORKS

THREE QUESTIONS

THREE QUESTIONS

THREE QUESTIONS
What do CSS frameworks do?
How do I choose a CSS framework?
Are CSS frameworks pure evil?

THREE QUESTIONS

FINAL THOUGHTS

FINAL THOUGHTS

FINAL THOUGHTS
Combine

FINAL THOUGHTS
Combine
Strip
http://www.sitepoint.com/dustmeselectors/

FINAL THOUGHTS
Combine
Strip
http://www.sitepoint.com/dustmeselectors/

FINAL THOUGHTS
Combine
Strip
http://www.sitepoint.com/dustmeselectors/
Shrink
http://floele.flyspray.org/csstidy/

FINAL THOUGHTS
Combine
Strip
http://www.sitepoint.com/dustmeselectors/
Shrink
http://floele.flyspray.org/csstidy/
(or don’t serve it yourself)

FINAL THOUGHTS

FINAL THOUGHTS
training wheels

FINAL THOUGHTS
training wheels
learning CSS without that “ugly first page”

FINAL THOUGHTS
training wheels
learning CSS without that “ugly first page”
See: Object Oriented CSS
http://north.webdirections.org/news/object-oriented-css-the-video

FINAL THOUGHTS

FINAL THOUGHTS
when all you have is a hammer…

FINAL THOUGHTS
when all you have is a hammer…
think outside the framework

FINAL THOUGHTS

THANKS!