With the proliferation and widespread adoption of JavaScript frameworks, smart developers have wondered if a similar approach to smoothing over the rough spots of CSS might work. Thus, CSS frameworks like Blueprint, YUI Library CSS Tools, Boilerplate, and many others were born. In this session, we will survey the landscape of CSS frameworks and consider how each of them deals with the unique challenge of creating generalised, reusable CSS styles. There are a number of different approaches, and some are better than others. Choose the right framework and you’ll save yourself a lot of work. Choose the wrong one, and you’ll find your projects weighed down by restrictive assumptions and masses of code that you don’t understand. When it comes to CSS frameworks, making the right choice is everything. By the end of this session, you might just decide that the right framework for you is no framework at all.

1. Edge of the Web 2009
CSS FRAMEWORKS
make the right choice
Kevin Yank
sitepoint.com
@sentience
@sitepointdotcom

2. 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

3. SlickMap CSS

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

5. THREE QUESTIONS

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

7. CSS RESET

8. CSS RESET
body,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 {
;
rgin:0 ;
! font-size:100%;
! font-weight:normal;
ma 0
dding:
}
q:before,q:after {
! content:'';
pa
}
abbr,acronym {
}
! border:0;
}

9. 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

10. 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

11. CSS RESET

12. CONTROVERSY IN
MICROCOSM

13. 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 back to tothe resetthings theI way I want.strongturns
document. With renderingin place, don’t Ipick As ititturns
browsers back 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 like strongto have or b or andor whatever—and then
by default.it’slike lists have bullets and strong elements to
whether I lists to or em bullets h3 strong elements to
have bolded text.” ” ”
have boldedneeded.
style it as text.
— — Jonathan Snook, No CSS Reset
Jonathan Meyer, Reset Reasoning
— Eric Snook, No CSS Reset

14. 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 back to renderingin in place,don’t pick strongitbecause
document. With the reset things theI way I want.strong because
document. With the reset place, I 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 whether Iit’s strong oror em or oror h3strong elementsthen
default. like stronghave or b b h3 or or whatever—and then
whether it’s lists to em bullets and whatever—and to
have bolded text.” ” ”
style it asas needed.
style it needed.
— Eric Meyer, Reset Reasoning
— Jonathan Meyer, Reset Reasoning
— Eric Snook, No CSS Reset

15. CONTROVERSY IN
MICROCOSM

16. CSS RESET

17. http://www.flickr.com/photos/evaekeblad/468013086/
TYPOGRAPHIC GRIDS

18. http://www.flickr.com/photos/evaekeblad/468013086/
COLUMN GRIDS

19. 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

20. BLUEPRINT
30px 10px
950px

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

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

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

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

25. 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"

26. 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"

27. 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"

28. 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"

29. 960 GRID SYSTEM
60px 20px 40px
960px

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

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

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

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

34. 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_4"
class="grid_12 alpha omega"
content class="grid_12"
department A department B department C
class="grid_4 alpha" class="grid_4" class="grid_4 omega"

35. YUI GRIDS CSS

36. 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>

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

38. ANNOYED?

39. NON-SEMANTIC CLASSES

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

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

42. NON-SEMANTIC CLASSES
Let’s use our own classes!

43. PRESENTATIONAL
THINKING

44. 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

45. COLUMN GRIDS

46. BASELINE GRIDS

47. BASELINE 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

48. BASELINE 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

49. BASELINE 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

50. BASELINE GRIDS

51. BASELINE GRIDS

52. BASELINE GRIDS

53. BASELINE GRIDS

54. 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; }

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

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

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

58. BASELINE GRIDS

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

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

61. CSS PRE-FAB

62. 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/

63. 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/

64. 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/

65. CSS PRE-FAB

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

67. 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

68. CSS ABSTRACTION

69. SERVER-SIDE
FRAMEWORKS

70. 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)

71. 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

72. 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);
}

73. SERVER-SIDE
FRAMEWORKS

74. THREE QUESTIONS

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

76. FINAL THOUGHT
when all you have is a hammer…
think outside the framework

77. THANKS!
@sentience
kevin@sitepoint.com