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