Search

CSS Frameworks: Make the Right Choice (WDS09)

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

0 comments

Post a comment

    Post a comment
    Embed Video
    Edit your comment Cancel

    Notes on slide 1

    1 Event

    CSS Frameworks: Make the Right Choice (WDS09) - Presentation Transcript

    1. CSS FRAMEWORKS make the right choice Kevin Yank, sitepoint.com Web Directions South 2009
    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. SlickMap CSS
    4. THREE QUESTIONS What do CSS frameworks do? How do I choose a CSS framework? Are CSS frameworks pure evil evil?
    5. THREE QUESTIONS
    6. THREE QUESTIONS
    7. CSS RESET http://www.flickr.com/photos/redux/3219068532/
    8. CSS RESET
    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. 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. 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. CSS RESET
    13. CONTROVERSY IN MICROCOSM
    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. 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. CONTROVERSY IN MICROCOSM
    17. CSS RESET
    18. http://www.flickr.com/photos/evaekeblad/468013086/ GRID FRAMEWORKS
    19. COLUMN GRIDS
    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. BLUEPRINT 30px 10px 950px
    22. BLUEPRINT 30px 10px 950px class="container"
    23. BLUEPRINT 30px 10px 950px site header class="span-24" class="container"
    24. BLUEPRINT 30px 10px 950px site header class="span-24" content class="span-18" class="container"
    25. BLUEPRINT 30px 10px 950px site header class="span-24" sidebar content class="span-18" class="span-6 class="container" last"
    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. 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. 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. 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. 960 GRID SYSTEM 60px 20px 40px 960px
    31. 960 GRID SYSTEM 60px 20px 40px 960px class="container_16"
    32. 960 GRID SYSTEM 60px 20px 40px 960px site header class="grid_16" class="container_16"
    33. 960 GRID SYSTEM 60px 20px 40px 960px site header class="grid_16" content class="grid_12" class="container_16"
    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. 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. YUI GRIDS CSS
    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. 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. ANNOYED?
    40. NON-SEMANTIC CLASSES
    41. NON-SEMANTIC CLASSES class="span-9 last" class="grid_6 alpha" class="yui-t6"
    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. NON-SEMANTIC CLASSES Let’s use our own classes!
    44. PRESENTATIONAL THINKING
    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. COLUMN GRIDS
    47. TYPOGRAPHIC GRIDS
    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. 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. 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. TYPOGRAPHIC GRIDS
    52. TYPOGRAPHIC GRIDS
    53. TYPOGRAPHIC GRIDS
    54. TYPOGRAPHIC GRIDS
    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. TYPOGRAPHIC GRIDS ideal leading is font and design dependent Helvetica vs Calibri http://forabeautifulweb.com/blog/about/lead_weight
    57. TYPOGRAPHIC GRIDS ideal leading is font and design dependent Helvetica vs Times http://forabeautifulweb.com/blog/about/lead_weight
    58. TYPOGRAPHIC GRIDS ideal leading is font and design dependent Helvetica vs Helvetica http://forabeautifulweb.com/blog/about/lead_weight
    59. TYPOGRAPHIC GRIDS
    60. http://www.flickr.com/photos/therefore/18542525/ CSS PRE-FAB
    61. CSS PRE-FAB ready-made styles for documents made of prescribed components
    62. CSS PRE-FAB
    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. 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. 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. CSS PRE-FAB
    67. http://www.flickr.com/photos/bobalong/3410454292/ CSS ABSTRACTION
    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. CSS ABSTRACTION
    70. SERVER-SIDE FRAMEWORKS
    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. 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. 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. SERVER-SIDE FRAMEWORKS
    75. THREE QUESTIONS
    76. THREE QUESTIONS What do CSS frameworks do? How do I choose a CSS framework? Are CSS frameworks pure evil?
    77. FINAL THOUGHTS Combine Strip http://www.sitepoint.com/dustmeselectors/
    78. FINAL THOUGHTS Combine Strip http://www.sitepoint.com/dustmeselectors/ Shrink http://floele.flyspray.org/csstidy/ (or don’t serve it yourself)
    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. FINAL THOUGHTS when all you have is a hammer… think outside the framework
    81. THANKS!
    SlideShare Zeitgeist 2009

    + Kevin YankKevin Yank Nominate

    custom

    287 views, 0 favs, 0 embeds more stats

    With the proliferation and widespread adoption of J more

    More info about this document

    © All Rights Reserved

    Go to text version

    • Total Views 287
      • 287 on SlideShare
      • 0 from embeds
    • Comments 0
    • Favorites 0
    • Downloads 23
    Most viewed embeds

    more

    All embeds

    less

    Flagged as inappropriate Flag as inappropriate
    Flag as inappropriate

    Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

    Cancel
    File a copyright complaint
    Having problems? Go to our helpdesk?

    Categories

    Tags

    Groups / Events

    -->
    Search
    RSS Feed
    What's new?

    © 2009 SlideShare Inc. All Rights Reserved