css frameworks: make the right choice (eotw09)
DESCRIPTION
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.TRANSCRIPT
![Page 1: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/1.jpg)
CSS FRAMEWORKSmake the right choice
Kevin Yank sitepoint.com@sentience @sitepointdotcom
Edge of the Web 2009
![Page 2: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/2.jpg)
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
![Page 3: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/3.jpg)
SlickMap CSS
![Page 4: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/4.jpg)
THREE QUESTIONS
What do CSS frameworks do?
How do I choose a CSS framework?
Are CSS frameworks pure evil?pure evil
![Page 5: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/5.jpg)
THREE QUESTIONS
![Page 6: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/6.jpg)
CSS RESET
http://www.flickr.com/photos/redux/3219068532/
![Page 7: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/7.jpg)
CSS RESET
![Page 8: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/8.jpg)
CSS RESETbody,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { ! margin:0;! padding:0;}table {! border-collapse:collapse;! border-spacing:0;}fieldset,img { ! border:0;}address,caption,cite,code,dfn,em,strong,th,var {! font-style:normal;! font-weight:normal;}ol,ul {! list-style:none;}caption,th {! text-align:left;}h1,h2,h3,h4,h5,h6 {! font-size:100%;! font-weight:normal;}q:before,q:after {! content:'';}abbr,acronym {! border:0;}
* {margin:0
;
padding:0;
}
![Page 9: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/9.jpg)
CSS RESET
YUI Reset CSS Eric Meyer’s Reset CSS
leaves critical styles aloneins left underlined
resets critical stylesno :focus outline, unstyled ins
sets default font stylesstrong not bold, em not italic
attempts to inherit font stylesleaves built-in font styles
![Page 10: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/10.jpg)
CSS RESET
YUI Reset CSS Eric Meyer’s Reset CSS
leaves critical styles aloneins left underlined
resets critical stylesno :focus outline, unstyled ins
sets default font stylesstrong not bold, em not italic
attempts to inherit font stylesleaves built-in font styles
![Page 11: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/11.jpg)
CSS RESETCSS RESET
![Page 12: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/12.jpg)
CONTROVERSY IN MICROCOSM
![Page 13: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/13.jpg)
CONTROVERSY IN MICROCOSM
“The problem I’ve had with these resets is that I then find myself declaring much more than I ever needed to just to get browsers back to rendering things the way I want. As it turns
out, I’m perfectly happy with how a number of elements render by default. I like lists to have bullets and strong elements to
have bolded text.”
— Jonathan Snook, No CSS Reset
“I don’t want to take style effects for granted. […] It makes me think just that little bit harder about the semantics of my
document. With the reset in place, I don’t pick strong because the design calls for boldfacing. Instead, I pick the right element—
whether it’s strong or em or b or h3 or whatever—and then style it as needed.”
— Eric Meyer, Reset Reasoning
“The problem I’ve had with these resets is that I then find myself declaring much more than I ever needed to just to get browsers back to rendering things the way I want. As it turns
out, I’m perfectly happy with how a number of elements render by default. I like lists to have bullets and strong elements to
have bolded text.”
— Jonathan Snook, No CSS Reset
“The problem I’ve had with these resets is that I then find myself declaring much more than I ever needed to just to get browsers back to rendering things the way I want. As it turns
out, I’m perfectly happy with how a number of elements render by default. I like lists to have bullets and strong elements to
have bolded text.”
— Jonathan Snook, No CSS Reset
![Page 14: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/14.jpg)
CONTROVERSY IN MICROCOSM
“The problem I’ve had with these resets is that I then find myself declaring much more than I ever needed to just to get browsers back to rendering things the way I want. As it turns
out, I’m perfectly happy with how a number of elements render by default. I like lists to have bullets and strong elements to
have bolded text.”
— Jonathan Snook, No CSS Reset
“I don’t want to take style effects for granted. […] It makes me think just that little bit harder about the semantics of my
document. With the reset in place, I don’t pick strong because the design calls for boldfacing. Instead, I pick the right element—
whether it’s strong or em or b or h3 or whatever—and then style it as needed.”
— Eric Meyer, Reset Reasoning
“I don’t want to take style effects for granted. […] It makes me think just that little bit harder about the semantics of my
document. With the reset in place, I don’t pick strong because the design calls for boldfacing. Instead, I pick the right element—
whether it’s strong or em or b or h3 or whatever—and then style it as needed.”
— Eric Meyer, Reset Reasoning
“I don’t want to take style effects for granted. […] It makes me think just that little bit harder about the semantics of my
document. With the reset in place, I don’t pick strong because the design calls for boldfacing. Instead, I pick the right element—
whether it’s strong or em or b or h3 or whatever—and then style it as needed.”
— Eric Meyer, Reset Reasoning
![Page 15: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/15.jpg)
CONTROVERSY IN MICROCOSM
![Page 16: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/16.jpg)
CSS RESET
![Page 17: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/17.jpg)
TYPOGRAPHIC GRIDS
http://www.flickr.com/photos/evaekeblad/468013086/
![Page 18: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/18.jpg)
COLUMN GRIDS
http://www.flickr.com/photos/evaekeblad/468013086/
![Page 19: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/19.jpg)
COLUMN GRIDS
Blueprint 960 Grid System YUI Grids CSS
950px fixed 960px fixedfluid or
750/950/974px fixed
24 columnsor custom
12/16 columnsor custom custom
good docs, nice code, any source order
nice code,any source order
fluid and mixed layouts
![Page 20: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/20.jpg)
BLUEPRINT
950px
30px 10px
![Page 21: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/21.jpg)
BLUEPRINT
class="container"
950px
30px 10px
![Page 22: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/22.jpg)
BLUEPRINT
site header class="span-24"
class="container"
950px
30px 10px
![Page 23: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/23.jpg)
BLUEPRINT
site header class="span-24"
class="container"content class="span-18"
950px
30px 10px
![Page 24: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/24.jpg)
BLUEPRINT
site header class="span-24"
class="container"content class="span-18"sidebar
class="span-6 last"
950px
30px 10px
![Page 25: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/25.jpg)
BLUEPRINT
site header class="span-24"
class="container"content class="span-18"
sidebar class="span-6
last"
feature A class="span-9"
950px
30px 10px
![Page 26: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/26.jpg)
BLUEPRINT
site header class="span-24"
class="container"content class="span-18"
sidebar class="span-6
last"
feature A class="span-9"
feature B class="span-9 last"
950px
30px 10px
![Page 27: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/27.jpg)
BLUEPRINT
site header class="span-24"
class="container"content class="span-18"
sidebar class="span-6
last"
feature A class="span-9"
feature B class="span-9 last"
body content class="span-18 last"
950px
30px 10px
![Page 28: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/28.jpg)
BLUEPRINT
site header class="span-24"
class="container"content class="span-18"
sidebar class="span-6
last"
feature A class="span-9"
feature B class="span-9 last"
body content class="span-18 last"
department A class="span-6"
department B class="span-6"
department C class="span-6 last"
950px
30px 10px
![Page 29: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/29.jpg)
960 GRID SYSTEM
960px
60px 20px 40px
![Page 30: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/30.jpg)
class="container_16"
960 GRID SYSTEM
960px
60px 20px 40px
![Page 31: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/31.jpg)
class="container_16"
960 GRID SYSTEM
site header class="grid_16"960px
60px 20px 40px
![Page 32: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/32.jpg)
class="container_16"content class="grid_12"
960 GRID SYSTEM
site header class="grid_16"960px
60px 20px 40px
![Page 33: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/33.jpg)
class="container_16"content class="grid_12"
960 GRID SYSTEM
site header class="grid_16"
sidebar class="grid_4"
960px
60px 20px 40px
![Page 34: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/34.jpg)
class="container_16"content class="grid_12"
feature A class="grid_6 alpha"
feature B class="grid_6 omega"
body content class="grid_12 alpha omega"
960 GRID SYSTEM
site header class="grid_16"
sidebar class="grid_4"
department A class="grid_4 alpha"
department B class="grid_4"
department C class="grid_4 omega"
960px
60px 20px 40px
![Page 35: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/35.jpg)
YUI GRIDS CSS
![Page 36: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/36.jpg)
YUI GRIDS CSS<div id="doc3" class="yui-t6">! <div id="hd"><h1>Header</h1></div>! <div id="bd">! ! <div id="yui-main">! ! ! <div class="yui-b">! ! ! ! <div class="yui-g">! ! ! ! ! <div class="yui-u first">! ! ! ! ! ! <!-- YOUR DATA GOES HERE -->! ! ! ! ! </div>! ! ! ! ! <div class="yui-u">! ! ! ! ! ! <!-- YOUR DATA GOES HERE -->! ! ! ! ! </div>! ! ! ! </div>! ! ! ! <div class="yui-g">! ! ! ! ! <!-- YOUR DATA GOES HERE -->! ! ! ! </div>! ! ! ! <div class="yui-gb">! ! ! ! ! <div class="yui-u first">! ! ! ! ! ! <!-- YOUR DATA GOES HERE -->! ! ! ! ! </div>! ! ! ! ! <div class="yui-u">! ! ! ! ! ! <!-- YOUR DATA GOES HERE -->! ! ! ! ! </div>! ! ! ! ! <div class="yui-u">! ! ! ! ! ! <!-- YOUR DATA GOES HERE -->! ! ! ! ! </div>! ! ! ! </div>! ! ! </div>! ! </div>! ! <div class="yui-b">! ! ! <!-- YOUR NAVIGATION GOES HERE -->! ! </div>! </div> <div id="ft"><p>Footer</p></div></div>
<div id="doc3" class="yui-t6">! <div id="hd"><h1>Header</h1></div>! <div id="bd">! ! <div id="yui-main">! ! ! <div class="yui-b">! ! ! ! <div class="yui-g">! ! ! ! ! <div class="yui-u first">! ! ! ! ! ! <!-- YOUR DATA GOES HERE -->! ! ! ! ! </div>! ! ! ! ! <div class="yui-u">! ! ! ! ! ! <!-- YOUR DATA GOES HERE -->! ! ! ! ! </div>! ! ! ! </div>! ! ! ! <div class="yui-g">! ! ! ! ! <!-- YOUR DATA GOES HERE -->! ! ! ! </div>! ! ! ! <div class="yui-gb">! ! ! ! ! <div class="yui-u first">! ! ! ! ! ! <!-- YOUR DATA GOES HERE -->! ! ! ! ! </div>! ! ! ! ! <div class="yui-u">! ! ! ! ! ! <!-- YOUR DATA GOES HERE -->! ! ! ! ! </div>! ! ! ! ! <div class="yui-u">! ! ! ! ! ! <!-- YOUR DATA GOES HERE -->! ! ! ! ! </div>! ! ! ! </div>! ! ! </div>! ! </div>! ! <div class="yui-b">! ! ! <!-- YOUR NAVIGATION GOES HERE -->! ! </div>! </div> <div id="ft"><p>Footer</p></div></div>
![Page 37: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/37.jpg)
YUI GRIDS CSS<div id="doc3" class="yui-t6">! <div id="hd"><h1>Header</h1></div>! <div id="bd">! ! <div id="yui-main">! ! ! <div class="yui-b">! ! ! ! <div class="yui-g">! ! ! ! ! <div class="yui-u first">! ! ! ! ! ! <!-- YOUR DATA GOES HERE -->! ! ! ! ! </div>! ! ! ! ! <div class="yui-u">! ! ! ! ! ! <!-- YOUR DATA GOES HERE -->! ! ! ! ! </div>! ! ! ! </div>! ! ! ! <div class="yui-g">! ! ! ! ! <!-- YOUR DATA GOES HERE -->! ! ! ! </div>! ! ! ! <div class="yui-gb">! ! ! ! ! <div class="yui-u first">! ! ! ! ! ! <!-- YOUR DATA GOES HERE -->! ! ! ! ! </div>! ! ! ! ! <div class="yui-u">! ! ! ! ! ! <!-- YOUR DATA GOES HERE -->! ! ! ! ! </div>! ! ! ! ! <div class="yui-u">! ! ! ! ! ! <!-- YOUR DATA GOES HERE -->! ! ! ! ! </div>! ! ! ! </div>! ! ! </div>! ! </div>! ! <div class="yui-b">! ! ! <!-- YOUR NAVIGATION GOES HERE -->! ! </div>! </div> <div id="ft"><p>Footer</p></div></div>
<div id="doc3" class="yui-t6">! <div id="hd"><h1>Header</h1></div>! <div id="bd">! ! <div id="yui-main">! ! ! <div class="yui-b">! ! ! ! <div class="yui-g">! ! ! ! ! <div class="yui-u first">! ! ! ! ! ! <!-- YOUR DATA GOES HERE -->! ! ! ! ! </div>! ! ! ! ! <div class="yui-u">! ! ! ! ! ! <!-- YOUR DATA GOES HERE -->! ! ! ! ! </div>! ! ! ! </div>! ! ! ! <div class="yui-g">! ! ! ! ! <!-- YOUR DATA GOES HERE -->! ! ! ! </div>! ! ! ! <div class="yui-gb">! ! ! ! ! <div class="yui-u first">! ! ! ! ! ! <!-- YOUR DATA GOES HERE -->! ! ! ! ! </div>! ! ! ! ! <div class="yui-u">! ! ! ! ! ! <!-- YOUR DATA GOES HERE -->! ! ! ! ! </div>! ! ! ! ! <div class="yui-u">! ! ! ! ! ! <!-- YOUR DATA GOES HERE -->! ! ! ! ! </div>! ! ! ! </div>! ! ! </div>! ! </div>! ! <div class="yui-b">! ! ! <!-- YOUR NAVIGATION GOES HERE -->! ! </div>! </div> <div id="ft"><p>Footer</p></div></div>
id="doc3" 100% width
class="yui-t6" 300px right sidebar
class="yui-g" 2-col sub-grid
class="yui-gb" 3-col sub-grid
class="yui-u" grid unit
![Page 38: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/38.jpg)
ANNOYED?
![Page 39: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/39.jpg)
NON-SEMANTIC CLASSES
![Page 40: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/40.jpg)
NON-SEMANTIC CLASSES
class="span-9 last"
class="grid_6 alpha"
class="yui-t6"
![Page 41: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/41.jpg)
NON-SEMANTIC CLASSESHTML4
“The class attribute has several roles in HTML:
• As a style sheet selector (when an author wishes to assign style information to a set of elements).
• For general purpose processing by user agents.”
HTML5 Draft
“Authors may use any value in the class attribute, but are encouraged to use the values that describe the nature of the content, rather than values that describe the desired presentation of the content.”
“Good names don’t change
“Think about why you want something to look a certain way, and not really about how it should look. Looks can always change, but the reasons for giving something a look stay the same.”
![Page 42: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/42.jpg)
NON-SEMANTIC CLASSES
Let’s use our own classes!
![Page 43: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/43.jpg)
PRESENTATIONAL THINKING
![Page 44: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/44.jpg)
COLUMN GRIDS
Blueprint 960 Grid System YUI Grids CSS
950px fixed 960px fixedfluid or
750/950/974px fixed
24 columnsor custom
12/16 columnsor custom custom
good docs, nice code, any source order,
semantic classes
nice code,any source order
fluid and mixed layouts
![Page 45: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/45.jpg)
COLUMN GRIDS
![Page 46: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/46.jpg)
BASELINE GRIDS
![Page 47: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/47.jpg)
BASELINE GRIDS
vertical rhythm
default font 12px/18px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel
purus scelerisque sit amet vestibulum justo viverra. Cras posuere lobortis libero
egestas suscipit. Donec aliquet, sem at ornare dictum, elit risus eleifend leo, eget
suscipit ipsum nunc nec felis. Pellentesque lacus quam, iaculis sed imperdiet non,
mollis sit amet lectus. Ut consequat malesuada lobortis. Integer et congue dolor.
Etiam mi lacus, eleifend ac ornare id, malesuada et metus. Etiam et lacus nisi.
Fusce justo justo, lobortis nec mollis in, laoreet tempor velit. Phasellus vel augue
non ligula condimentum dapibus. Pellentesque nec turpis egestas sapien gravida
ultrices.
12px × 3 × 1 = 36px = 2 grids/line
12px × 3 × 0.5 = 18px = 1 grid margin
Heading 1
h2 {! font-size:2em;! line-height:1.5;! margin-bottom:0.75em;}
h2 {! font-size:2em;! line-height:1.5;! margin-bottom:0.75em;}
![Page 48: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/48.jpg)
BASELINE GRIDS
vertical rhythm
default font 12px/18px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel
purus scelerisque sit amet vestibulum justo viverra. Cras posuere lobortis libero
egestas suscipit. Donec aliquet, sem at ornare dictum, elit risus eleifend leo, eget
suscipit ipsum nunc nec felis. Pellentesque lacus quam, iaculis sed imperdiet non,
mollis sit amet lectus. Ut consequat malesuada lobortis. Integer et congue dolor.
Etiam mi lacus, eleifend ac ornare id, malesuada et metus. Etiam et lacus nisi.
Fusce justo justo, lobortis nec mollis in, laoreet tempor velit. Phasellus vel augue
non ligula condimentum dapibus. Pellentesque nec turpis egestas sapien gravida
ultrices.
12px × 3 × 1 = 36px = 2 grids/line
12px × 3 × 0.5 = 18px = 1 grid margin
Heading 1
12px × 2 × 1.5 = 36px = 2 grids/line
12px × 2 × 0.75 = 18px = 1 grid margin
Heading 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel
purus scelerisque sit amet vestibulum justo viverra.
h3 {! font-size:1.5em;! line-height:1;! margin-bottom:1em;}
h3 {! font-size:1.5em;! line-height:1;! margin-bottom:1em;}
![Page 49: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/49.jpg)
BASELINE GRIDS
vertical rhythm
default font 12px/18px
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel
purus scelerisque sit amet vestibulum justo viverra. Cras posuere lobortis libero
egestas suscipit. Donec aliquet, sem at ornare dictum, elit risus eleifend leo, eget
suscipit ipsum nunc nec felis. Pellentesque lacus quam, iaculis sed imperdiet non,
mollis sit amet lectus. Ut consequat malesuada lobortis. Integer et congue dolor.
Etiam mi lacus, eleifend ac ornare id, malesuada et metus. Etiam et lacus nisi.
Fusce justo justo, lobortis nec mollis in, laoreet tempor velit. Phasellus vel augue
non ligula condimentum dapibus. Pellentesque nec turpis egestas sapien gravida
ultrices.
12px × 3 × 1 = 36px = 2 grids/line
12px × 3 × 0.5 = 18px = 1 grid margin
Heading 1
12px × 2 × 1.5 = 36px = 2 grids/line
12px × 2 × 0.75 = 18px = 1 grid margin
Heading 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel
purus scelerisque sit amet vestibulum justo viverra.
12px × 1.5 × 1 = 18px = 1 grids/line
12px × 1.5 × 1 = 18px = 1 grid margin
Heading 3
Cras posuere lobortis libero egestas suscipit. Donec aliquet, sem at ornare dictum,
elit risus eleifend leo, eget suscipit ipsum nunc nec felis. Pellentesque lacus quam,
iaculis sed imperdiet non, mollis sit amet lectus. Ut consequat malesuada lobortis.
Integer et congue dolor.
![Page 50: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/50.jpg)
BASELINE GRIDS
![Page 51: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/51.jpg)
BASELINE GRIDS
![Page 52: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/52.jpg)
BASELINE GRIDS
![Page 54: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/54.jpg)
BASELINE GRIDS
h1, h2, h3, h4, h5, h6! { position: relative; }h1, h2! ! ! ! ! { line-height: 36px; margin-bottom: 18px; }h1, h2, h3, h4! ! ! { margin-top: 18px; }h3, h4, h5, h6! ! ! { line-height: 18px; }h1! ! ! ! ! ! { font-size: 36px; top: 5px; }h2! ! ! ! ! ! { font-size: 28px; top: 8px; }h3! ! ! ! ! ! { font-size: 22px; top: 1px; }h4! ! ! ! ! ! { font-size: 18px; top: 2px; }h5! ! ! ! ! ! { font-size: 15px; top: 4px; }h6! ! ! ! ! ! { font-size: 13px; top: 5px; }
h1, h2, h3, h4, h5, h6! { position: relative; }h1, h2! ! ! ! ! { line-height: 36px; margin-bottom: 18px; }h1, h2, h3, h4! ! ! { margin-top: 18px; }h3, h4, h5, h6! ! ! { line-height: 18px; }h1! ! ! ! ! ! { font-size: 36px; top: 5px; }h2! ! ! ! ! ! { font-size: 28px; top: 8px; }h3! ! ! ! ! ! { font-size: 22px; top: 1px; }h4! ! ! ! ! ! { font-size: 18px; top: 2px; }h5! ! ! ! ! ! { font-size: 15px; top: 4px; }h6! ! ! ! ! ! { font-size: 13px; top: 5px; }
![Page 55: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/55.jpg)
BASELINE GRIDSideal leading is font and design dependent
http://forabeautifulweb.com/blog/about/lead_weight
Helvetica vs CalibriHelvetica vs Calibri
![Page 56: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/56.jpg)
BASELINE GRIDSideal leading is font and design dependent
http://forabeautifulweb.com/blog/about/lead_weight
Helvetica vs TimesHelvetica vs Times
![Page 57: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/57.jpg)
BASELINE GRIDSideal leading is font and design dependent
http://forabeautifulweb.com/blog/about/lead_weight
Helvetica vs HelveticaHelvetica vs Helvetica
![Page 58: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/58.jpg)
BASELINE GRIDS
![Page 59: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/59.jpg)
CSS PRE-FAB
http://www.flickr.com/photos/therefore/18542525/
![Page 60: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/60.jpg)
CSS PRE-FAB
ready-made styles for documents made of prescribed components
![Page 62: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/62.jpg)
CSS PRE-FAB
http://forabeautifulweb.com/blog/about/an_appropriate_use_for_css_frameworks/
<ul class="v6-9-9">! <li class="a-magazine span-6"> content </li>! <li class="a-subscribe span-9"> content </li>! <li class="a-shop span-9 last"> content </li></ul>
<ul class="v6-9-9">! <li class="a-magazine span-6"> content </li>! <li class="a-subscribe span-9"> content </li>! <li class="a-shop span-9 last"> content </li></ul>
![Page 63: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/63.jpg)
CSS PRE-FAB
http://forabeautifulweb.com/blog/about/an_appropriate_use_for_css_frameworks/
<ul class="v9-6-9">! <li class="a-magazine span-9"> content </li>! <li class="a-subscribe span-6"> content </li>! <li class="a-shop span-9 last"> content </li></ul>
<ul class="v9-6-9">! <li class="a-magazine span-9"> content </li>! <li class="a-subscribe span-6"> content </li>! <li class="a-shop span-9 last"> content </li></ul>
![Page 64: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/64.jpg)
CSS PRE-FAB
http://forabeautifulweb.com/blog/about/an_appropriate_use_for_css_frameworks/
<ul class="v9-9-6">! <li class="a-magazine span-9"> content </li>! <li class="a-subscribe span-9"> content </li>! <li class="a-shop span-6 last"> content </li></ul>
<ul class="v9-9-6">! <li class="a-magazine span-9"> content </li>! <li class="a-subscribe span-9"> content </li>! <li class="a-shop span-6 last"> content </li></ul>
![Page 65: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/65.jpg)
CSS PRE-FAB
![Page 66: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/66.jpg)
CSS ABSTRACTION
http://www.flickr.com/photos/bobalong/3410454292/
![Page 67: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/67.jpg)
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
![Page 68: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/68.jpg)
CSS ABSTRACTION
![Page 69: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/69.jpg)
SERVER-SIDE FRAMEWORKS
![Page 70: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/70.jpg)
@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
![Page 71: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/71.jpg)
SERVER-SIDE FRAMEWORKS
sitepoint_bg = #036sitepoint_fg = #F60
#header: background-color: $sitepoint_bg
a:link color: $sitepoint_fg a:visited color: $sitepoint_fg - #830
![Page 72: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/72.jpg)
SERVER-SIDE FRAMEWORKS
@constants {! sitepoint_bg:#036;! sitepoint_fg:#F60;}
#header {! background-color:!sitepoint_bg;
! a:link, a:visited {! ! color:!sitepoint_fg;! }}
@grid {! column-count:16;! column-width:40;! left-gutter-width:10;! right-gutter-width:10;! unit:px;}
#container { +container;}
#header { +columns(16);}
![Page 73: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/73.jpg)
SERVER-SIDE FRAMEWORKS
![Page 74: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/74.jpg)
THREE QUESTIONS
![Page 75: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/75.jpg)
THREE QUESTIONS
What do CSS frameworks do?
How do I choose a CSS framework?
Are CSS frameworks pure evil?
What do CSS frameworks do?
How do I choose a CSS framework?
Are CSS frameworks pure evil?
![Page 76: CSS Frameworks: Make the Right Choice (EOTW09)](https://reader033.vdocuments.net/reader033/viewer/2022061300/54c7c4dc4a79595a768b45b9/html5/thumbnails/76.jpg)
FINAL THOUGHT
when all you have is a hammer…
think outside the framework