• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
CSS Frameworks: Make the Right Choice (EOTW09)
 

CSS Frameworks: Make the Right Choice (EOTW09)

on

  • 4,767 views

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

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.

Statistics

Views

Total Views
4,767
Views on SlideShare
4,729
Embed Views
38

Actions

Likes
11
Downloads
188
Comments
0

5 Embeds 38

http://www.techgig.com 27
http://www.slideshare.net 7
http://115.112.206.131 2
http://www.mefeedia.com 1
http://10.150.200.57 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    CSS Frameworks: Make the Right Choice (EOTW09) CSS Frameworks: Make the Right Choice (EOTW09) Presentation Transcript

    • Edge of the Web 2009 CSS FRAMEWORKS make the right choice Kevin Yank sitepoint.com @sentience @sitepointdotcom
    • CSS FRAMEWORKS “a set of tools, libraries, conventions, and best practices that attempt to abstract routine tasks into generic modules that can be reused” — Jeff Croft, Frameworks for Designers
    • SlickMap CSS
    • THREE QUESTIONS What do CSS frameworks do? How do I choose a CSS framework? Are CSS frameworks pure evil evil?
    • THREE QUESTIONS
    • CSS RESET http://www.flickr.com/photos/redux/3219068532/
    • CSS RESET
    • 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; }
    • CSS RESET YUI Reset CSS Eric Meyer’s Reset CSS leaves critical styles alone resets critical styles ins left underlined no :focus outline, unstyled ins sets default font styles attempts to inherit font styles strong not bold, em not italic leaves built-in font styles
    • CSS RESET YUI Reset CSS Eric Meyer’s Reset CSS leaves critical styles alone resets critical styles ins left underlined no :focus outline, unstyled ins sets default font styles attempts to inherit font styles strong not bold, em not italic leaves built-in font styles
    • CSS RESET
    • CONTROVERSY IN MICROCOSM
    • CONTROVERSY IN MICROCOSM “The problem I’vetake style effectsresets is is that then find me “I“The problem I’ve had with thesefor granted. […] It makes don’t want to had with these resets that I I then find myself think just that littlemore thanever needed to just toof get myself declaring much bit than I Iaboutneeded to just toget declaring much more harder ever the semantics my browsers 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
    • 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
    • CONTROVERSY IN MICROCOSM
    • CSS RESET
    • http://www.flickr.com/photos/evaekeblad/468013086/ TYPOGRAPHIC GRIDS
    • http://www.flickr.com/photos/evaekeblad/468013086/ COLUMN GRIDS
    • COLUMN GRIDS Blueprint 960 Grid System YUI Grids CSS fluid or 950px fixed 960px fixed 750/950/974px fixed 24 columns 12/16 columns custom or custom or custom good docs, nice code, nice code, fluid and mixed any source order any source order layouts
    • BLUEPRINT 30px 10px 950px
    • BLUEPRINT 30px 10px 950px class="container"
    • BLUEPRINT 30px 10px 950px site header class="span-24" class="container"
    • BLUEPRINT 30px 10px 950px site header class="span-24" content class="span-18" class="container"
    • BLUEPRINT 30px 10px 950px site header class="span-24" sidebar content class="span-18" class="span-6 class="container" last"
    • BLUEPRINT 30px 10px 950px site header class="span-24" feature A class="span-9" sidebar class="span-6 class="container" last" content class="span-18"
    • BLUEPRINT 30px 10px 950px site header class="span-24" feature A feature B class="span-9" class="span-9 last" sidebar class="span-6 class="container" last" content class="span-18"
    • BLUEPRINT 30px 10px 950px site header class="span-24" feature A feature B class="span-9" class="span-9 last" sidebar body content class="container" class="span-6 class="span-18 last" last" content class="span-18"
    • BLUEPRINT 30px 10px 950px site header class="span-24" feature A feature B class="span-9" class="span-9 last" sidebar body content class="container" class="span-6 class="span-18 last" last" content class="span-18" department A department B department C class="span-6" class="span-6" class="span-6 last"
    • 960 GRID SYSTEM 60px 20px 40px 960px
    • 960 GRID SYSTEM 60px 20px 40px 960px class="container_16"
    • 960 GRID SYSTEM 60px 20px 40px 960px site header class="grid_16" class="container_16"
    • 960 GRID SYSTEM 60px 20px 40px 960px site header class="grid_16" content class="grid_12" class="container_16"
    • 960 GRID SYSTEM 60px 20px 40px 960px site header class="grid_16" content class="grid_12" sidebar class="container_16" class="grid_4"
    • 960 GRID SYSTEM 60px 20px 40px 960px site header class="grid_16" feature A feature B class="grid_6 alpha" class="grid_6 omega" body content sidebar class="container_16" class="grid_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"
    • YUI GRIDS CSS
    • YUI GRIDS CSS <div id="doc3" class="yui-t6"> ! <div id="hd"><h1>Header</h1></div> ! <div id="bd"> ! ! <div id="yui-main"> ! ! ! <div class="yui-b"> ! ! ! ! <div class="yui-g"> ! ! ! ! ! <div class="yui-u first"> ! ! ! ! ! ! <!-- YOUR DATA GOES HERE --> ! ! ! ! ! </div> ! ! ! ! ! <div class="yui-u"> ! ! ! ! ! ! <!-- YOUR DATA GOES HERE --> ! ! ! ! ! </div> ! ! ! ! </div> ! ! ! ! <div class="yui-g"> ! ! ! ! ! <!-- YOUR DATA GOES HERE --> ! ! ! ! </div> ! ! ! ! <div class="yui-gb"> ! ! ! ! ! <div class="yui-u first"> ! ! ! ! ! ! <!-- YOUR DATA GOES HERE --> ! ! ! ! ! </div> ! ! ! ! ! <div class="yui-u"> ! ! ! ! ! ! <!-- YOUR DATA GOES HERE --> ! ! ! ! ! </div> ! ! ! ! ! <div class="yui-u"> ! ! ! ! ! ! <!-- YOUR DATA GOES HERE --> ! ! ! ! ! </div> ! ! ! ! </div> ! ! ! </div> ! ! </div> ! ! <div class="yui-b"> ! ! ! <!-- YOUR NAVIGATION GOES HERE --> ! ! </div> ! </div> <div id="ft"><p>Footer</p></div> </div>
    • YUI GRIDS CSS <div id="doc3" class="yui-t6"> ! 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>
    • ANNOYED?
    • NON-SEMANTIC CLASSES
    • NON-SEMANTIC CLASSES class="span-9 last" class="grid_6 alpha" class="yui-t6"
    • 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.”
    • NON-SEMANTIC CLASSES Let’s use our own classes!
    • PRESENTATIONAL THINKING
    • COLUMN GRIDS Blueprint 960 Grid System YUI Grids CSS fluid or 950px fixed 960px fixed 750/950/974px fixed 24 columns 12/16 columns custom or custom or custom good docs, nice code, nice code, fluid and mixed any source order, any source order layouts semantic classes
    • COLUMN GRIDS
    • BASELINE GRIDS
    • 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
    • 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
    • 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
    • BASELINE GRIDS
    • BASELINE GRIDS
    • BASELINE GRIDS
    • BASELINE GRIDS
    • 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; }
    • BASELINE GRIDS ideal leading is font and design dependent Helvetica vs Calibri http://forabeautifulweb.com/blog/about/lead_weight
    • BASELINE GRIDS ideal leading is font and design dependent Helvetica vs Times http://forabeautifulweb.com/blog/about/lead_weight
    • BASELINE GRIDS ideal leading is font and design dependent Helvetica vs Helvetica http://forabeautifulweb.com/blog/about/lead_weight
    • BASELINE GRIDS
    • http://www.flickr.com/photos/therefore/18542525/ CSS PRE-FAB
    • CSS PRE-FAB ready-made styles for documents made of prescribed components
    • CSS PRE-FAB
    • CSS PRE-FAB <ul class="v6-9-9"> ! <li class="a-magazine span-6"> content </li> ! <li class="a-subscribe span-9"> content </li> ! <li class="a-shop span-9 last"> content </li> </ul> http://forabeautifulweb.com/blog/about/an_appropriate_use_for_css_frameworks/
    • CSS PRE-FAB <ul class="v9-6-9"> ! <li class="a-magazine span-9"> content </li> ! <li class="a-subscribe span-6"> content </li> ! <li class="a-shop span-9 last"> content </li> </ul> http://forabeautifulweb.com/blog/about/an_appropriate_use_for_css_frameworks/
    • CSS PRE-FAB <ul class="v9-9-6"> ! <li class="a-magazine span-9"> content </li> ! <li class="a-subscribe span-9"> content </li> ! <li class="a-shop span-6 last"> content </li> </ul> http://forabeautifulweb.com/blog/about/an_appropriate_use_for_css_frameworks/
    • CSS PRE-FAB
    • http://www.flickr.com/photos/bobalong/3410454292/ CSS ABSTRACTION
    • CSS ABSTRACTION “Adding any form of macros or additional scopes and indirections, including symbolic constants, is not just redundant, but changes CSS in ways that make it unsuitable for its intended audience. Given that there is currently no alternative to CSS, these things must not be added.” — Bert Bos, Why “variables” in CSS are harmful
    • CSS ABSTRACTION
    • SERVER-SIDE FRAMEWORKS
    • SERVER-SIDE FRAMEWORKS !sitepoint_bg = #036 !sitepoint_fg = #F60 #header background-color= !sitepoint_bg a:link color= !sitepoint_fg a:visited color= !sitepoint_fg - #830 @import blueprint.css !blueprint_grid_columns = 16 !blueprint_grid_width = 40px !blueprint_grid_margin = 20px +blueprint-grid #container +container #header +column(16)
    • SERVER-SIDE FRAMEWORKS sitepoint_bg = #036 sitepoint_fg = #F60 #header: background-color: $sitepoint_bg a:link color: $sitepoint_fg a:visited color: $sitepoint_fg - #830
    • SERVER-SIDE FRAMEWORKS @constants { @grid { ! sitepoint_bg:#036; ! column-count:16; ! sitepoint_fg:#F60; ! column-width:40; } ! left-gutter-width:10; ! right-gutter-width:10; #header { ! unit:px; ! background-color:!sitepoint_bg; } ! a:link, a:visited { #container { ! ! color:!sitepoint_fg; +container; ! } } } #header { +columns(16); }
    • SERVER-SIDE FRAMEWORKS
    • THREE QUESTIONS
    • THREE QUESTIONS What do CSS frameworks do? How do I choose a CSS framework? Are CSS frameworks pure evil?
    • FINAL THOUGHT when all you have is a hammer… think outside the framework
    • THANKS! @sentience kevin@sitepoint.com