This document discusses CSS frameworks and how to choose the right one. It begins by defining what CSS frameworks are, which is a set of tools, libraries, conventions and best practices that attempt to abstract routine tasks into reusable modules.
It then asks three questions: What do CSS frameworks do? How to choose a CSS framework? Are CSS frameworks pure evil? It discusses how frameworks provide resets, grids and other common components to standardize styles. When choosing a framework, considerations include popularity, documentation, flexibility and source code quality. While frameworks may seem to reduce control and introduce non-semantic classes, they provide large benefits in standardization and speed of development.
3. 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
19. 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
20. 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
21. 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
22. 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
23. 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
27. 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
28. 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
37. 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
43. 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"
44. 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"
45. 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"
46. 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"
49. 960 GRID SYSTEM
60px 20px 40px
960px
site header class="grid_16"
class="container_16"
50. 960 GRID SYSTEM
60px 20px 40px
960px
site header class="grid_16"
content class="grid_12"
class="container_16"
51. 960 GRID SYSTEM
60px 20px 40px
960px
site header class="grid_16"
content class="grid_12" sidebar
class="container_16" class="grid_4"
52. 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"
60. 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.”
61. 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.”
62. 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.”
65. 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
70. 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;
}
71. 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;
}
72. 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
73. 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
74. 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
75. 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
76. 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
77. 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
78. 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
79. 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
107. 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
129. FINAL THOUGHTS
training wheels
learning CSS without that “ugly first page”
130. 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
Show of hands: based on this definition,
• using a CSS framework?
• using a “framework” they created themselves?
• more than enough list posts out there (maybe one or two on sitepoint.com!)
As I take you on this “grand tour of CSS frameworkery”, my aim is to answer three questions for you…
As I take you on this “grand tour of CSS frameworkery”, my aim is to answer three questions for you…
As I take you on this “grand tour of CSS frameworkery”, my aim is to answer three questions for you…
As I take you on this “grand tour of CSS frameworkery”, my aim is to answer three questions for you…
As I take you on this “grand tour of CSS frameworkery”, my aim is to answer three questions for you…
As I take you on this “grand tour of CSS frameworkery”, my aim is to answer three questions for you…
…and by the end, you should have a good feel for whether there are any CSS frameworks that are right for you. (Or if the one you build yourself might be worth putting out there!)
• we’ll look at four types of frameworks
• we’ll look at four types of frameworks
• we’ll look at four types of frameworks
• we’ll look at four types of frameworks
• we’ll look at four types of frameworks
• we’ll look at four types of frameworks
• we’ll look at four types of frameworks
• we’ll look at four types of frameworks
• we’ll look at four types of frameworks
• choosing a CSS Reset is fraught with all the complexities and complications of choosing any CSS framework
• choosing a CSS Reset is fraught with all the complexities and complications of choosing any CSS framework
• choosing a CSS Reset is fraught with all the complexities and complications of choosing any CSS framework
• (if you use one) first style sheet you apply to every page
• (if you use one) first style sheet you apply to every page
• Yahoo! User Interface Library (YUI) Reset CSS
• all sorts of things you might not think of
• more robust than the typical do-it-yourself effort
• doesn’t reset margins and padding that are vital to some form elements
• Yahoo! User Interface Library (YUI) Reset CSS
• all sorts of things you might not think of
• more robust than the typical do-it-yourself effort
• doesn’t reset margins and padding that are vital to some form elements
• Yahoo! User Interface Library (YUI) Reset CSS
• all sorts of things you might not think of
• more robust than the typical do-it-yourself effort
• doesn’t reset margins and padding that are vital to some form elements
• Yahoo! User Interface Library (YUI) Reset CSS
• all sorts of things you might not think of
• more robust than the typical do-it-yourself effort
• doesn’t reset margins and padding that are vital to some form elements
• Yahoo! User Interface Library (YUI) Reset CSS
• all sorts of things you might not think of
• more robust than the typical do-it-yourself effort
• doesn’t reset margins and padding that are vital to some form elements
• Meyer removes :focus (pseudo-class) outlines and other “critical” styles like the underline on ins elements.
• Yahoo! breaks font style inheritance by applying initial values (e.g. font-weight: normal) to all elements.
• Meyer: right thing to do is use inherit, which IE6/7 do not support, so leave these styles alone.
• Meyer removes :focus (pseudo-class) outlines and other “critical” styles like the underline on ins elements.
• Yahoo! breaks font style inheritance by applying initial values (e.g. font-weight: normal) to all elements.
• Meyer: right thing to do is use inherit, which IE6/7 do not support, so leave these styles alone.
• Meyer removes :focus (pseudo-class) outlines and other “critical” styles like the underline on ins elements.
• Yahoo! breaks font style inheritance by applying initial values (e.g. font-weight: normal) to all elements.
• Meyer: right thing to do is use inherit, which IE6/7 do not support, so leave these styles alone.
• Meyer removes :focus (pseudo-class) outlines and other “critical” styles like the underline on ins elements.
• Yahoo! breaks font style inheritance by applying initial values (e.g. font-weight: normal) to all elements.
• Meyer: right thing to do is use inherit, which IE6/7 do not support, so leave these styles alone.
• lack of :focus outline huge accessibility issue by default
• vote
• YUI is a better choice if you want to ignore the details
• apparent differences mostly meaningless
• last row is the only important one
24 columns
24 columns
24 columns
24 columns
24 columns
24 columns
24 columns
24 columns
24 columns
24 columns
24 columns
24 columns
24 columns
24 columns
24 columns
24 columns
24 columns
24 columns
24 columns
• choice of 12 or 16 columns
• don’t be fooled by “960 is 10 better than Blueprint’s 950!” due to outer margins, it’s actually 10 worse!
• I’m a Star Trek fan, but even I think those alpha/omega class names are wanky
• choice of 12 or 16 columns
• don’t be fooled by “960 is 10 better than Blueprint’s 950!” due to outer margins, it’s actually 10 worse!
• I’m a Star Trek fan, but even I think those alpha/omega class names are wanky
• choice of 12 or 16 columns
• don’t be fooled by “960 is 10 better than Blueprint’s 950!” due to outer margins, it’s actually 10 worse!
• I’m a Star Trek fan, but even I think those alpha/omega class names are wanky
• choice of 12 or 16 columns
• don’t be fooled by “960 is 10 better than Blueprint’s 950!” due to outer margins, it’s actually 10 worse!
• I’m a Star Trek fan, but even I think those alpha/omega class names are wanky
• choice of 12 or 16 columns
• don’t be fooled by “960 is 10 better than Blueprint’s 950!” due to outer margins, it’s actually 10 worse!
• I’m a Star Trek fan, but even I think those alpha/omega class names are wanky
• choice of 12 or 16 columns
• don’t be fooled by “960 is 10 better than Blueprint’s 950!” due to outer margins, it’s actually 10 worse!
• I’m a Star Trek fan, but even I think those alpha/omega class names are wanky
• choice of 12 or 16 columns
• don’t be fooled by “960 is 10 better than Blueprint’s 950!” due to outer margins, it’s actually 10 worse!
• I’m a Star Trek fan, but even I think those alpha/omega class names are wanky
• choice of 12 or 16 columns
• don’t be fooled by “960 is 10 better than Blueprint’s 950!” due to outer margins, it’s actually 10 worse!
• I’m a Star Trek fan, but even I think those alpha/omega class names are wanky
• choice of 12 or 16 columns
• don’t be fooled by “960 is 10 better than Blueprint’s 950!” due to outer margins, it’s actually 10 worse!
• I’m a Star Trek fan, but even I think those alpha/omega class names are wanky
• choice of 12 or 16 columns
• don’t be fooled by “960 is 10 better than Blueprint’s 950!” due to outer margins, it’s actually 10 worse!
• I’m a Star Trek fan, but even I think those alpha/omega class names are wanky
• choice of 12 or 16 columns
• don’t be fooled by “960 is 10 better than Blueprint’s 950!” due to outer margins, it’s actually 10 worse!
• I’m a Star Trek fan, but even I think those alpha/omega class names are wanky
• choice of 12 or 16 columns
• don’t be fooled by “960 is 10 better than Blueprint’s 950!” due to outer margins, it’s actually 10 worse!
• I’m a Star Trek fan, but even I think those alpha/omega class names are wanky
• choice of 12 or 16 columns
• don’t be fooled by “960 is 10 better than Blueprint’s 950!” due to outer margins, it’s actually 10 worse!
• I’m a Star Trek fan, but even I think those alpha/omega class names are wanky
• choice of 12 or 16 columns
• don’t be fooled by “960 is 10 better than Blueprint’s 950!” due to outer margins, it’s actually 10 worse!
• I’m a Star Trek fan, but even I think those alpha/omega class names are wanky
• choice of 12 or 16 columns
• don’t be fooled by “960 is 10 better than Blueprint’s 950!” due to outer margins, it’s actually 10 worse!
• I’m a Star Trek fan, but even I think those alpha/omega class names are wanky
• choice of 12 or 16 columns
• don’t be fooled by “960 is 10 better than Blueprint’s 950!” due to outer margins, it’s actually 10 worse!
• I’m a Star Trek fan, but even I think those alpha/omega class names are wanky
• choice of 12 or 16 columns
• don’t be fooled by “960 is 10 better than Blueprint’s 950!” due to outer margins, it’s actually 10 worse!
• I’m a Star Trek fan, but even I think those alpha/omega class names are wanky
• fixed sizes are expressed in ems, even for pixel-width layouts
• result: very difficult to tweak the grid for exceptions, special effects
• fixed sizes are expressed in ems, even for pixel-width layouts
• result: very difficult to tweak the grid for exceptions, special effects
• fixed sizes are expressed in ems, even for pixel-width layouts
• result: very difficult to tweak the grid for exceptions, special effects
• fixed sizes are expressed in ems, even for pixel-width layouts
• result: very difficult to tweak the grid for exceptions, special effects
• fixed sizes are expressed in ems, even for pixel-width layouts
• result: very difficult to tweak the grid for exceptions, special effects
• fixed sizes are expressed in ems, even for pixel-width layouts
• result: very difficult to tweak the grid for exceptions, special effects
…what bugs you about the code I have shown you so far?
Use class with semantics in mind (W3C QA Tip)
http://www.w3.org/QA/Tips/goodclassnames
Use class with semantics in mind (W3C QA Tip)
http://www.w3.org/QA/Tips/goodclassnames
Use class with semantics in mind (W3C QA Tip)
http://www.w3.org/QA/Tips/goodclassnames
Use class with semantics in mind (W3C QA Tip)
http://www.w3.org/QA/Tips/goodclassnames
Use class with semantics in mind (W3C QA Tip)
http://www.w3.org/QA/Tips/goodclassnames
Use class with semantics in mind (W3C QA Tip)
http://www.w3.org/QA/Tips/goodclassnames
Demo semantic class name support in Blueprint
Is Andy Clarke’s “presentational thinking” while writing markup a real-world problem?
• DESKTOP BACKGROUND COMPARISON!!!
• I choose Blueprint if I am prototyping, or if fixed width OK.
• For fluid layout, YUI Grids too painful. Do it yourself.
• YUI: Amazing technical achievement (grid resizes with text), but em-based sizes too inflexible for creating special effects (e.g. overlapping block edges).
• largely concerned with creating vertical rhythms
• vertical rhythm improves readability, perceived polish of design
• here’s how Blueprint does it
• largely concerned with creating vertical rhythms
• vertical rhythm improves readability, perceived polish of design
• here’s how Blueprint does it
• largely concerned with creating vertical rhythms
• vertical rhythm improves readability, perceived polish of design
• here’s how Blueprint does it
• largely concerned with creating vertical rhythms
• vertical rhythm improves readability, perceived polish of design
• here’s how Blueprint does it
• largely concerned with creating vertical rhythms
• vertical rhythm improves readability, perceived polish of design
• here’s how Blueprint does it
• largely concerned with creating vertical rhythms
• vertical rhythm improves readability, perceived polish of design
• here’s how Blueprint does it
• largely concerned with creating vertical rhythms
• vertical rhythm improves readability, perceived polish of design
• here’s how Blueprint does it
• largely concerned with creating vertical rhythms
• vertical rhythm improves readability, perceived polish of design
• here’s how Blueprint does it
• largely concerned with creating vertical rhythms
• vertical rhythm improves readability, perceived polish of design
• here’s how Blueprint does it
• largely concerned with creating vertical rhythms
• vertical rhythm improves readability, perceived polish of design
• here’s how Blueprint does it
• largely concerned with creating vertical rhythms
• vertical rhythm improves readability, perceived polish of design
• here’s how Blueprint does it
• largely concerned with creating vertical rhythms
• vertical rhythm improves readability, perceived polish of design
• here’s how Blueprint does it
• largely concerned with creating vertical rhythms
• vertical rhythm improves readability, perceived polish of design
• here’s how Blueprint does it
• largely concerned with creating vertical rhythms
• vertical rhythm improves readability, perceived polish of design
• here’s how Blueprint does it
• largely concerned with creating vertical rhythms
• vertical rhythm improves readability, perceived polish of design
• here’s how Blueprint does it
• largely concerned with creating vertical rhythms
• vertical rhythm improves readability, perceived polish of design
• here’s how Blueprint does it
• largely concerned with creating vertical rhythms
• vertical rhythm improves readability, perceived polish of design
• here’s how Blueprint does it
• largely concerned with creating vertical rhythms
• vertical rhythm improves readability, perceived polish of design
• here’s how Blueprint does it
• largely concerned with creating vertical rhythms
• vertical rhythm improves readability, perceived polish of design
• here’s how Blueprint does it
• largely concerned with creating vertical rhythms
• vertical rhythm improves readability, perceived polish of design
• here’s how Blueprint does it
• largely concerned with creating vertical rhythms
• vertical rhythm improves readability, perceived polish of design
• here’s how Blueprint does it
• largely concerned with creating vertical rhythms
• vertical rhythm improves readability, perceived polish of design
• here’s how Blueprint does it
• largely concerned with creating vertical rhythms
• vertical rhythm improves readability, perceived polish of design
• here’s how Blueprint does it
• largely concerned with creating vertical rhythms
• vertical rhythm improves readability, perceived polish of design
• here’s how Blueprint does it
• largely concerned with creating vertical rhythms
• vertical rhythm improves readability, perceived polish of design
• here’s how Blueprint does it
• largely concerned with creating vertical rhythms
• vertical rhythm improves readability, perceived polish of design
• here’s how Blueprint does it
• largely concerned with creating vertical rhythms
• vertical rhythm improves readability, perceived polish of design
• here’s how Blueprint does it
• largely concerned with creating vertical rhythms
• vertical rhythm improves readability, perceived polish of design
• here’s how Blueprint does it
• largely concerned with creating vertical rhythms
• vertical rhythm improves readability, perceived polish of design
• here’s how Blueprint does it
• largely concerned with creating vertical rhythms
• vertical rhythm improves readability, perceived polish of design
• here’s how Blueprint does it
• largely concerned with creating vertical rhythms
• vertical rhythm improves readability, perceived polish of design
• here’s how Blueprint does it
• largely concerned with creating vertical rhythms
• vertical rhythm improves readability, perceived polish of design
• here’s how Blueprint does it
• a finished layout with typographic grid
• can anyone suggest how this might be made better?
• a shared baseline, and that’s exactly what a new typographic grid framework called—creatively enough—Baseline aims to do.
• even does it for form fields!
• don’t believe in pixel font sizes? you will not like this framework
• a finished layout with typographic grid
• can anyone suggest how this might be made better?
• a shared baseline, and that’s exactly what a new typographic grid framework called—creatively enough—Baseline aims to do.
• even does it for form fields!
• don’t believe in pixel font sizes? you will not like this framework
• a finished layout with typographic grid
• can anyone suggest how this might be made better?
• a shared baseline, and that’s exactly what a new typographic grid framework called—creatively enough—Baseline aims to do.
• even does it for form fields!
• don’t believe in pixel font sizes? you will not like this framework
• a finished layout with typographic grid
• can anyone suggest how this might be made better?
• a shared baseline, and that’s exactly what a new typographic grid framework called—creatively enough—Baseline aims to do.
• even does it for form fields!
• don’t believe in pixel font sizes? you will not like this framework
• a finished layout with typographic grid
• can anyone suggest how this might be made better?
• a shared baseline, and that’s exactly what a new typographic grid framework called—creatively enough—Baseline aims to do.
• even does it for form fields!
• don’t believe in pixel font sizes? you will not like this framework
• a finished layout with typographic grid
• can anyone suggest how this might be made better?
• a shared baseline, and that’s exactly what a new typographic grid framework called—creatively enough—Baseline aims to do.
• even does it for form fields!
• don’t believe in pixel font sizes? you will not like this framework
• a finished layout with typographic grid
• can anyone suggest how this might be made better?
• a shared baseline, and that’s exactly what a new typographic grid framework called—creatively enough—Baseline aims to do.
• even does it for form fields!
• don’t believe in pixel font sizes? you will not like this framework
• a finished layout with typographic grid
• can anyone suggest how this might be made better?
• a shared baseline, and that’s exactly what a new typographic grid framework called—creatively enough—Baseline aims to do.
• even does it for form fields!
• don’t believe in pixel font sizes? you will not like this framework
• a finished layout with typographic grid
• can anyone suggest how this might be made better?
• a shared baseline, and that’s exactly what a new typographic grid framework called—creatively enough—Baseline aims to do.
• even does it for form fields!
• don’t believe in pixel font sizes? you will not like this framework
• Calibri has smaller x-height that Helvetica, framework line-height is too large.
• Times is a serif font, framework line-height is again too large.
• Light-on-dark designs call for increased leading or they feel too noisy.
• typographic grid comes with a lot of assumptions about the fonts, colours, typical line lengths, and other aspects of your design
• Calibri has smaller x-height that Helvetica, framework line-height is too large.
• Times is a serif font, framework line-height is again too large.
• Light-on-dark designs call for increased leading or they feel too noisy.
• typographic grid comes with a lot of assumptions about the fonts, colours, typical line lengths, and other aspects of your design
aka “libraries”—ready-made solutions for specific tasks
• real time-savers, but not tools for original design
Andy Clarke’s design for The New Internationalist
Andy Clarke’s design for The New Internationalist
Andy Clarke’s design for The New Internationalist
Andy Clarke’s design for The New Internationalist
(Joke about finding a photo to represent abstraction.)
(Joke about finding a photo to represent abstraction.)
(Joke about finding a photo to represent abstraction.)
“CSS is simple. It’s better that way. Needs to work for non-programmers.”
• unfortunately no selector inheritance (mixins)
• give them points for trying to slip a new word into the language—“webdesign”
• by Anthony Short (from Sydney)
• no colour arithmetic, but this is a non-issue in practice
• installation and development workflow very smooth
What do CSS frameworks do?
• reset styles
• horizontal grids for layout, vertical grids for text
• pre-fab styles for particular types of content
• make CSS more powerful with server-side processing
How do you choose a CSS framework?
• don’t adopt for the free code
• because it contains code you agree with
• buying into a shared methodology: community, open documentation, ease of training and recruitment.
Are CSS frameworks pure evil?
• of course not—shortcuts can be good or bad
• no need to reinvent the wheel; just make it your business to know as much about the wheels you use as possible. Choose code you would have written on your best day.
STOP … question time!
• Object Oriented CSS by Nicole Sullivan
• anecdote: the Core library
• have considered a CSS book that used a framework in the same way
• Object Oriented CSS by Nicole Sullivan
• anecdote: the Core library
• have considered a CSS book that used a framework in the same way
• Object Oriented CSS by Nicole Sullivan
• anecdote: the Core library
• have considered a CSS book that used a framework in the same way