Edge of the Web 2009


            CSS FRAMEWORKS
                make the right choice




Kevin Yank	

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




            TYPOGRAPHIC GRIDS
http://www.flickr.com/photos/evaekeblad/468013086/




                       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
BASELINE GRIDS
BASELINE GRIDS
           vertical rhythm              Heading 1
                                        Lorem ipsum dolor...
BASELINE GRIDS
           vertical rhythm              Heading 1
                                        Lorem ipsum dolor...
BASELINE GRIDS
         vertical rhythm                 Heading 1
                                         Lorem ipsum dol...
BASELINE GRIDS
BASELINE GRIDS
BASELINE GRIDS
BASELINE GRIDS
BASELINE GRIDS
h1,   h2,   h3, h4, h5, h6!   {   position: relative; }
h1,   h2!   !    !   !   !    {   line-height: 36px...
BASELINE GRIDS
ideal leading is font and design dependent




               Helvetica vs Calibri
    http://forabeautiful...
BASELINE GRIDS
ideal leading is font and design dependent




                Helvetica vs Times
    http://forabeautifulw...
BASELINE GRIDS
ideal leading is font and design dependent




             Helvetica vs Helvetica
    http://forabeautiful...
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>
           !   ...
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 THOUGHT



when all you have is a hammer…

  think outside the framework
THANKS!

   @sentience
kevin@sitepoint.com
Upcoming SlideShare
Loading in …5
×

CSS Frameworks: Make the Right Choice (EOTW09)

5,811 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
11 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,811
On SlideShare
0
From Embeds
0
Number of Embeds
41
Actions
Shares
0
Downloads
193
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide

CSS Frameworks: Make the Right Choice (EOTW09)

  1. 1. Edge of the Web 2009 CSS FRAMEWORKS make the right choice Kevin Yank sitepoint.com @sentience @sitepointdotcom
  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. CSS RESET http://www.flickr.com/photos/redux/3219068532/
  7. 7. CSS RESET
  8. 8. 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; }
  9. 9. CSS RESET YUI Reset CSS Eric Meyer’s Reset CSS leaves critical styles alone resets critical styles ins left underlined no :focus outline, unstyled ins sets default font styles attempts to inherit font styles strong not bold, em not italic leaves built-in font styles
  10. 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
  12. 12. CONTROVERSY IN MICROCOSM
  13. 13. CONTROVERSY IN MICROCOSM “The problem I’vetake style effectsresets is is that then find me “I“The problem I’ve had with thesefor granted. […] It makes don’t want to had with these resets that I I then find myself think just that littlemore thanever needed to just toof get myself declaring much bit than I Iaboutneeded to just toget declaring much more harder ever the semantics my browsers back to tothe resetthings theI way I want.strongturns document. With renderingin place, don’t Ipick As ititturns browsers back rendering things the way want. As because out,the I’m perfectly for boldfacing. Instead, I pickelements render out, design calls happy with how number ofof the right element— I’m perfectly happy with how a a number elements render by default. I like strongto have or b or andor whatever—and then by default.it’slike lists have bullets and strong elements to whether I lists to or em bullets h3 strong elements to have bolded text.” ” ” have boldedneeded. style it as text. — — Jonathan Snook, No CSS Reset Jonathan Meyer, Reset Reasoning — Eric Snook, No CSS Reset
  14. 14. CONTROVERSY IN MICROCOSM “The problemto take style effects for granted. […]then find meme “I don’t want I’vetake style effectsresets is that […]makes “I don’t want to had with these for granted. I It It makes myself thinkjust that little bit harder Iabout needed to justof my my think just that little bit than ever the semantics toof declaring much more harder about the semantics get browsers back to renderingin in place,don’t pick strongitbecause document. With the reset things theI way I want.strong because document. With the reset place, I don’t pick As turns out,thedesign callshappyboldfacing. Instead, I pickelements render the design calls for with how a number of the right element— I’m perfectly for boldfacing. Instead, I pick the right element— by whether Iit’s strong oror em or oror h3strong elementsthen default. like stronghave or b b h3 or or whatever—and then whether it’s lists to em bullets and whatever—and to have bolded text.” ” ” style it asas needed. style it needed. — Eric Meyer, Reset Reasoning — Jonathan Meyer, Reset Reasoning — Eric Snook, No CSS Reset
  15. 15. CONTROVERSY IN MICROCOSM
  16. 16. CSS RESET
  17. 17. http://www.flickr.com/photos/evaekeblad/468013086/ TYPOGRAPHIC GRIDS
  18. 18. http://www.flickr.com/photos/evaekeblad/468013086/ COLUMN GRIDS
  19. 19. COLUMN GRIDS Blueprint 960 Grid System YUI Grids CSS fluid or 950px fixed 960px fixed 750/950/974px fixed 24 columns 12/16 columns custom or custom or custom good docs, nice code, nice code, fluid and mixed any source order any source order layouts
  20. 20. BLUEPRINT 30px 10px 950px
  21. 21. BLUEPRINT 30px 10px 950px class="container"
  22. 22. BLUEPRINT 30px 10px 950px site header class="span-24" class="container"
  23. 23. BLUEPRINT 30px 10px 950px site header class="span-24" content class="span-18" class="container"
  24. 24. BLUEPRINT 30px 10px 950px site header class="span-24" sidebar content class="span-18" class="span-6 class="container" last"
  25. 25. BLUEPRINT 30px 10px 950px site header class="span-24" feature A class="span-9" sidebar class="span-6 class="container" last" content class="span-18"
  26. 26. BLUEPRINT 30px 10px 950px site header class="span-24" feature A feature B class="span-9" class="span-9 last" sidebar class="span-6 class="container" last" content class="span-18"
  27. 27. BLUEPRINT 30px 10px 950px site header class="span-24" feature A feature B class="span-9" class="span-9 last" sidebar body content class="container" class="span-6 class="span-18 last" last" content class="span-18"
  28. 28. BLUEPRINT 30px 10px 950px site header class="span-24" feature A feature B class="span-9" class="span-9 last" sidebar body content class="container" class="span-6 class="span-18 last" last" content class="span-18" department A department B department C class="span-6" class="span-6" class="span-6 last"
  29. 29. 960 GRID SYSTEM 60px 20px 40px 960px
  30. 30. 960 GRID SYSTEM 60px 20px 40px 960px class="container_16"
  31. 31. 960 GRID SYSTEM 60px 20px 40px 960px site header class="grid_16" class="container_16"
  32. 32. 960 GRID SYSTEM 60px 20px 40px 960px site header class="grid_16" content class="grid_12" class="container_16"
  33. 33. 960 GRID SYSTEM 60px 20px 40px 960px site header class="grid_16" content class="grid_12" sidebar class="container_16" class="grid_4"
  34. 34. 960 GRID SYSTEM 60px 20px 40px 960px site header class="grid_16" feature A feature B class="grid_6 alpha" class="grid_6 omega" body content sidebar class="container_16" class="grid_4" class="grid_12 alpha omega" content class="grid_12" department A department B department C class="grid_4 alpha" class="grid_4" class="grid_4 omega"
  35. 35. YUI GRIDS CSS
  36. 36. 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>
  37. 37. 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>
  38. 38. ANNOYED?
  39. 39. NON-SEMANTIC CLASSES
  40. 40. NON-SEMANTIC CLASSES class="span-9 last" class="grid_6 alpha" class="yui-t6"
  41. 41. NON-SEMANTIC CLASSES HTML4 HTML5 Draft “The class attribute has several roles in “Authors may use any value in the HTML: class attribute, but are encouraged to • As a style sheet selector (when an use the values that describe the nature author wishes to assign style of the content, rather than values that information to a set of elements). describe the desired presentation of the • For general purpose processing by content.” user agents.” “Good names don’t change “Think about why you want something to look a certain way, and not really about how it should look. Looks can always change, but the reasons for giving something a look stay the same.”
  42. 42. NON-SEMANTIC CLASSES Let’s use our own classes!
  43. 43. PRESENTATIONAL THINKING
  44. 44. COLUMN GRIDS Blueprint 960 Grid System YUI Grids CSS fluid or 950px fixed 960px fixed 750/950/974px fixed 24 columns 12/16 columns custom or custom or custom good docs, nice code, nice code, fluid and mixed any source order, any source order layouts semantic classes
  45. 45. COLUMN GRIDS
  46. 46. BASELINE GRIDS
  47. 47. BASELINE GRIDS vertical rhythm Heading 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel purus scelerisque sit amet vestibulum justo viverra. Cras posuere lobortis libero default font 12px/18px egestas suscipit. Donec aliquet, sem at ornare dictum, elit risus eleifend leo, eget suscipit ipsum nunc nec felis. Pellentesque lacus quam, iaculis sed imperdiet non, mollis sit amet lectus. Ut consequat malesuada lobortis. Integer et congue dolor. Etiam mi lacus, eleifend ac ornare id, malesuada et metus. Etiam et lacus nisi. Fusce justo justo, lobortis nec mollis in, laoreet tempor velit. Phasellus vel augue h2 { non ligula condimentum dapibus. Pellentesque nec turpis egestas sapien gravida ! font-size:2em; ultrices. ! line-height:1.5; ! margin-bottom:0.75em; } 12px × 3 × 1 = 36px = 2 grids/line 12px × 3 × 0.5 = 18px = 1 grid margin
  48. 48. BASELINE GRIDS vertical rhythm Heading 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel purus scelerisque sit amet vestibulum justo viverra. Cras posuere lobortis libero default font 12px/18px egestas suscipit. Donec aliquet, sem at ornare dictum, elit risus eleifend leo, eget suscipit ipsum nunc nec felis. Pellentesque lacus quam, iaculis sed imperdiet non, mollis sit amet lectus. Ut consequat malesuada lobortis. Integer et congue dolor. Etiam mi lacus, eleifend ac ornare id, malesuada et metus. Etiam et lacus nisi. Fusce justo justo, lobortis nec mollis in, laoreet tempor velit. Phasellus vel augue h3 { non ligula condimentum dapibus. Pellentesque nec turpis egestas sapien gravida ! font-size:1.5em; ultrices. ! line-height:1; ! margin-bottom:1em; Heading 2 } Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel purus scelerisque sit amet vestibulum justo viverra. 12px × 2 × 1.5 = 36px = 2 grids/line 12px × 2 × 0.75 = 36px = 2 grids/line 12px × 3 × 1 = 18px = 1 grid margin 12px × 3 × 0.5 = 18px = 1 grid margin
  49. 49. BASELINE GRIDS vertical rhythm Heading 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel purus scelerisque sit amet vestibulum justo viverra. Cras posuere lobortis libero default font 12px/18px egestas suscipit. Donec aliquet, sem at ornare dictum, elit risus eleifend leo, eget suscipit ipsum nunc nec felis. Pellentesque lacus quam, iaculis sed imperdiet non, mollis sit amet lectus. Ut consequat malesuada lobortis. Integer et congue dolor. Etiam mi lacus, eleifend ac ornare id, malesuada et metus. Etiam et lacus nisi. Fusce justo justo, lobortis nec mollis in, laoreet tempor velit. Phasellus vel augue non ligula condimentum dapibus. Pellentesque nec turpis egestas sapien gravida ultrices. Heading 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sollicitudin nisl vel purus scelerisque sit amet vestibulum justo viverra. Heading 3 12px × 1.5 × 1 = 18px = 1 grids/line Cras posuere lobortis libero egestas suscipit. Donec aliquet, sem at ornare dictum, elit risus eleifend leo, eget suscipit ipsum nunc nec felis. Pellentesque lacus quam, 12px ×× 23× 1.5= 18px ==22grids/line 12px × × 1 ==36px = 1 grid margin 12px 1.5 × 1 36px grids/line iaculis sed imperdiet non, mollis sit amet lectus. Ut consequat malesuada lobortis. Integer et congue dolor. 12px × 2 × 0.75= 18px = 1 grid margin 12px × 3 × 0.5 = 18px = 1 grid margin
  50. 50. BASELINE GRIDS
  51. 51. BASELINE GRIDS
  52. 52. BASELINE GRIDS
  53. 53. BASELINE GRIDS
  54. 54. 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; }
  55. 55. BASELINE GRIDS ideal leading is font and design dependent Helvetica vs Calibri http://forabeautifulweb.com/blog/about/lead_weight
  56. 56. BASELINE GRIDS ideal leading is font and design dependent Helvetica vs Times http://forabeautifulweb.com/blog/about/lead_weight
  57. 57. BASELINE GRIDS ideal leading is font and design dependent Helvetica vs Helvetica http://forabeautifulweb.com/blog/about/lead_weight
  58. 58. BASELINE GRIDS
  59. 59. http://www.flickr.com/photos/therefore/18542525/ CSS PRE-FAB
  60. 60. CSS PRE-FAB ready-made styles for documents made of prescribed components
  61. 61. CSS PRE-FAB
  62. 62. 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/
  63. 63. 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/
  64. 64. 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/
  65. 65. CSS PRE-FAB
  66. 66. http://www.flickr.com/photos/bobalong/3410454292/ CSS ABSTRACTION
  67. 67. CSS ABSTRACTION “Adding any form of macros or additional scopes and indirections, including symbolic constants, is not just redundant, but changes CSS in ways that make it unsuitable for its intended audience. Given that there is currently no alternative to CSS, these things must not be added.” — Bert Bos, Why “variables” in CSS are harmful
  68. 68. CSS ABSTRACTION
  69. 69. SERVER-SIDE FRAMEWORKS
  70. 70. 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)
  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
  72. 72. 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); }
  73. 73. SERVER-SIDE FRAMEWORKS
  74. 74. THREE QUESTIONS
  75. 75. THREE QUESTIONS What do CSS frameworks do? How do I choose a CSS framework? Are CSS frameworks pure evil?
  76. 76. FINAL THOUGHT when all you have is a hammer… think outside the framework
  77. 77. THANKS! @sentience kevin@sitepoint.com

×