CSS FRAMEWORKS
                            make the right choice




Kevin Yank, sitepoint.com                       Web D...
CSS FRAMEWORKS


  “a set of tools, libraries, conventions, and best practices that
attempt to abstract routine tasks into...
SlickMap CSS
THREE QUESTIONS


   What do CSS frameworks do?

 How do I choose a CSS framework?

   Are CSS frameworks pure evil
      ...
THREE QUESTIONS
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:...
CSS RESET

     YUI Reset CSS                      Eric Meyer’s Reset CSS


leaves critical styles alone              rese...
CSS RESET

     YUI Reset CSS                      Eric Meyer’s Reset CSS


leaves critical styles alone              rese...
CSS RESET
CONTROVERSY IN
  MICROCOSM
CONTROVERSY IN
              MICROCOSM

  “The problem I’vetake style effectsresets is is that then find me
     “I“The pro...
CONTROVERSY IN
              MICROCOSM

  “The problemto take style effects for granted. […]then find meme
   “I don’t want...
CONTROVERSY IN
  MICROCOSM
CSS RESET
http://www.flickr.com/photos/evaekeblad/468013086/




               GRID FRAMEWORKS
COLUMN GRIDS
COLUMN GRIDS

      Blueprint         960 Grid System      YUI Grids CSS

                                                ...
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"
...
BLUEPRINT
       30px   10px




                     950px


    site header class="span-24"



                         ...
BLUEPRINT
                 30px   10px




                               950px


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




                               950px


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




                               950px


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




                                     950px


                  site heade...
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="contain...
960 GRID SYSTEM
   60px   20px   40px




                        960px


    site header class="grid_16"




content clas...
960 GRID SYSTEM
   60px   20px   40px




                        960px


    site header class="grid_16"




content clas...
960 GRID SYSTEM
                       60px   20px   40px




                                            960px


        ...
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 GRIDS CSS
               <div id="doc3" class="yui-t6">
               !                                     class="yu...
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...
NON-SEMANTIC CLASSES



     Let’s use our own classes!
PRESENTATIONAL
   THINKING
COLUMN GRIDS

      Blueprint         960 Grid System      YUI Grids CSS

                                                ...
COLUMN GRIDS
TYPOGRAPHIC GRIDS
TYPOGRAPHIC GRIDS
           vertical rhythm              Heading 1
                                        Lorem ipsum do...
TYPOGRAPHIC GRIDS
           vertical rhythm              Heading 1
                                        Lorem ipsum do...
TYPOGRAPHIC GRIDS
         vertical rhythm                 Heading 1
                                         Lorem ipsum ...
TYPOGRAPHIC GRIDS
TYPOGRAPHIC GRIDS
TYPOGRAPHIC GRIDS
TYPOGRAPHIC GRIDS
TYPOGRAPHIC GRIDS
h1,   h2,   h3, h4, h5, h6!   {   position: relative; }
h1,   h2!   !    !   !   !    {   line-height: 3...
TYPOGRAPHIC GRIDS
 ideal leading is font and design dependent




                Helvetica vs Calibri
     http://forabea...
TYPOGRAPHIC GRIDS
 ideal leading is font and design dependent




                 Helvetica vs Times
     http://forabeau...
TYPOGRAPHIC GRIDS
 ideal leading is font and design dependent




              Helvetica vs Helvetica
     http://forabea...
TYPOGRAPHIC 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>
           !   ...
CSS PRE-FAB




           <ul class="v9-6-9">
           !   <li class="a-magazine span-9"> content </li>
           !   ...
CSS PRE-FAB




           <ul class="v9-9-6">
           !   <li class="a-magazine span-9"> content </li>
           !   ...
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, i...
CSS ABSTRACTION
SERVER-SIDE
FRAMEWORKS
SERVER-SIDE
FRAMEWORKS
      !sitepoint_bg = #036
      !sitepoint_fg = #F60

      #header
        background-color= !sit...
SERVER-SIDE
FRAMEWORKS
      sitepoint_bg = #036
      sitepoint_fg = #F60

      #header:
        background-color: $site...
SERVER-SIDE
                   FRAMEWORKS


@constants {                          @grid {
!   sitepoint_bg:#036;          ...
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 THOUGHTS


Combine

Strip
http://www.sitepoint.com/dustmeselectors/
FINAL THOUGHTS


Combine

Strip
http://www.sitepoint.com/dustmeselectors/

Shrink
http://floele.flyspray.org/csstidy/

     ...
FINAL THOUGHTS


                    training wheels

learning CSS without that “ugly first page”

            See: Object ...
FINAL THOUGHTS



 when all you have is a hammer…

   think outside the framework
THANKS!
Upcoming SlideShare
Loading in …5
×

CSS Frameworks: Make the Right Choice (WDS09)

3,979 views

Published on

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.

Published in: Technology, Education
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,979
On SlideShare
0
From Embeds
0
Number of Embeds
39
Actions
Shares
0
Downloads
85
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

CSS Frameworks: Make the Right Choice (WDS09)

  1. 1. CSS FRAMEWORKS make the right choice Kevin Yank, sitepoint.com Web Directions South 2009
  2. 2. CSS FRAMEWORKS “a set of tools, libraries, conventions, and best practices that attempt to abstract routine tasks into generic modules that can be reused” — Jeff Croft, Frameworks for Designers
  3. 3. SlickMap CSS
  4. 4. THREE QUESTIONS What do CSS frameworks do? How do I choose a CSS framework? Are CSS frameworks pure evil evil?
  5. 5. THREE QUESTIONS
  6. 6. THREE QUESTIONS
  7. 7. CSS RESET http://www.flickr.com/photos/redux/3219068532/
  8. 8. CSS RESET
  9. 9. 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 { * { :0; ! font-size:100%; margin :0; g ! font-weight:normal; paddin } } q:before,q:after { ! content:''; } abbr,acronym { ! border:0; }
  10. 10. CSS RESET YUI Reset CSS Eric Meyer’s Reset CSS leaves critical styles alone resets critical styles ins left underlined no :focus outline, unstyled ins sets default font styles attempts to inherit font styles strong not bold, em not italic leaves built-in font styles
  11. 11. 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
  12. 12. CSS RESET
  13. 13. CONTROVERSY IN MICROCOSM
  14. 14. 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
  15. 15. 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
  16. 16. CONTROVERSY IN MICROCOSM
  17. 17. CSS RESET
  18. 18. http://www.flickr.com/photos/evaekeblad/468013086/ GRID FRAMEWORKS
  19. 19. COLUMN GRIDS
  20. 20. 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
  21. 21. BLUEPRINT 30px 10px 950px
  22. 22. BLUEPRINT 30px 10px 950px class="container"
  23. 23. BLUEPRINT 30px 10px 950px site header class="span-24" class="container"
  24. 24. BLUEPRINT 30px 10px 950px site header class="span-24" content class="span-18" class="container"
  25. 25. BLUEPRINT 30px 10px 950px site header class="span-24" sidebar content class="span-18" class="span-6 class="container" last"
  26. 26. 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"
  27. 27. 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"
  28. 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"
  29. 29. 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"
  30. 30. 960 GRID SYSTEM 60px 20px 40px 960px
  31. 31. 960 GRID SYSTEM 60px 20px 40px 960px class="container_16"
  32. 32. 960 GRID SYSTEM 60px 20px 40px 960px site header class="grid_16" class="container_16"
  33. 33. 960 GRID SYSTEM 60px 20px 40px 960px site header class="grid_16" content class="grid_12" class="container_16"
  34. 34. 960 GRID SYSTEM 60px 20px 40px 960px site header class="grid_16" content class="grid_12" sidebar class="container_16" class="grid_4"
  35. 35. 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"
  36. 36. YUI GRIDS CSS
  37. 37. 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>
  38. 38. 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>
  39. 39. ANNOYED?
  40. 40. NON-SEMANTIC CLASSES
  41. 41. NON-SEMANTIC CLASSES class="span-9 last" class="grid_6 alpha" class="yui-t6"
  42. 42. 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.”
  43. 43. NON-SEMANTIC CLASSES Let’s use our own classes!
  44. 44. PRESENTATIONAL THINKING
  45. 45. 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
  46. 46. COLUMN GRIDS
  47. 47. TYPOGRAPHIC GRIDS
  48. 48. 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
  49. 49. 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
  50. 50. 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
  51. 51. TYPOGRAPHIC GRIDS
  52. 52. TYPOGRAPHIC GRIDS
  53. 53. TYPOGRAPHIC GRIDS
  54. 54. TYPOGRAPHIC GRIDS
  55. 55. TYPOGRAPHIC 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; }
  56. 56. TYPOGRAPHIC GRIDS ideal leading is font and design dependent Helvetica vs Calibri http://forabeautifulweb.com/blog/about/lead_weight
  57. 57. TYPOGRAPHIC GRIDS ideal leading is font and design dependent Helvetica vs Times http://forabeautifulweb.com/blog/about/lead_weight
  58. 58. TYPOGRAPHIC GRIDS ideal leading is font and design dependent Helvetica vs Helvetica http://forabeautifulweb.com/blog/about/lead_weight
  59. 59. TYPOGRAPHIC GRIDS
  60. 60. http://www.flickr.com/photos/therefore/18542525/ CSS PRE-FAB
  61. 61. CSS PRE-FAB ready-made styles for documents made of prescribed components
  62. 62. CSS PRE-FAB
  63. 63. 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/
  64. 64. 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/
  65. 65. 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/
  66. 66. CSS PRE-FAB
  67. 67. http://www.flickr.com/photos/bobalong/3410454292/ CSS ABSTRACTION
  68. 68. 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
  69. 69. CSS ABSTRACTION
  70. 70. SERVER-SIDE FRAMEWORKS
  71. 71. SERVER-SIDE FRAMEWORKS !sitepoint_bg = #036 !sitepoint_fg = #F60 #header background-color= !sitepoint_bg a:link color= !sitepoint_fg a:visited color= !sitepoint_fg - #830 @import blueprint.css !blueprint_grid_columns = 16 !blueprint_grid_width = 40px !blueprint_grid_margin = 20px +blueprint-grid #container +container #header +column(16)
  72. 72. 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
  73. 73. 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); }
  74. 74. SERVER-SIDE FRAMEWORKS
  75. 75. THREE QUESTIONS
  76. 76. THREE QUESTIONS What do CSS frameworks do? How do I choose a CSS framework? Are CSS frameworks pure evil?
  77. 77. FINAL THOUGHTS Combine Strip http://www.sitepoint.com/dustmeselectors/
  78. 78. FINAL THOUGHTS Combine Strip http://www.sitepoint.com/dustmeselectors/ Shrink http://floele.flyspray.org/csstidy/ (or don’t serve it yourself)
  79. 79. 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
  80. 80. FINAL THOUGHTS when all you have is a hammer… think outside the framework
  81. 81. THANKS!

×