CSS Metaframeworks: King of all @media

13,561 views
11,249 views

Published on

Dallas.rb talk discussing trends in creating CSS stylesheets and the growing lineup of CSS Metaframeworks.

Published in: Design, Technology, Education
2 Comments
46 Likes
Statistics
Notes

  •    Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Video from Vimeo:

    CSS Metaframeworks - King of all @media from Wynn Netherland on Vimeo.<br /><object type="application/x-shockwave-flash" data="http://vimeo.com/moogaloop.swf?clip_id=9348454&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" width="350" height="288"><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=9348454&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1"></param><embed src="http://vimeo.com/moogaloop.swf?clip_id=9348454&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" width="350" height="288" type="application/x-shockwave-flash"></embed></object>
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
13,561
On SlideShare
0
From Embeds
0
Number of Embeds
326
Actions
Shares
0
Downloads
264
Comments
2
Likes
46
Embeds 0
No embeds

No notes for slide
  • multikey - automatically index arrays of object values
    ensure index on tags or _keywords
  • CSS Metaframeworks: King of all @media

    1. meta ^ CSS FRAMEWORKS: KING OF ALL @media Dallas.rb February 2, 2010 WYNNNETHERLAND Wednesday, February 3, 2010
    2. before we start Wednesday, February 3, 2010
    3. We need to know about your cool projects! http://thechangelog.com @changelogshow Wednesday, February 3, 2010
    4. Your project could end up here! Wednesday, February 3, 2010
    5. thanks! Wednesday, February 3, 2010
    6. Have you heard? CSS3 is big Wednesday, February 3, 2010
    7. Hot New properties Wednesday, February 3, 2010
    8. border-radius Wednesday, February 3, 2010
    9. border-image Wednesday, February 3, 2010
    10. background-size Wednesday, February 3, 2010
    11. gradients Wednesday, February 3, 2010
    12. RGBA, HSL, HSLA colors rgba (0,0,0,1) is the new black! Wednesday, February 3, 2010
    13. text-shadow Wednesday, February 3, 2010
    14. box-shadow Wednesday, February 3, 2010
    15. word wrap Wednesday, February 3, 2010
    16. outline Wednesday, February 3, 2010
    17. columns Wednesday, February 3, 2010
    18. @font-face means Typographic freedom! Wednesday, February 3, 2010
    19. Cool New selectors Wednesday, February 3, 2010
    20. CSS3 selectors (and some golden oldies) * ::first-letter :enabled E :first-line :disabled .class ::first-line :checked #id E[attribute^=value] :header E F E[attribute$=value] E > F E[attribute*=value] E + F E ~ F E[attribute] :root Steal this from jQuery, please E[attribute=value] :last-child E[attribute~=value] :only-child E[attribute|=value] :nth-child() :first-child :nth-last-child() :link :first-of-type :visited :last-of-type :lang() :only-of-type :before :nth-of-type() ::before :nth-last-of-type() :after :empty ::after :not() :first-letter :target Wednesday, February 3, 2010
    21. Some smash hits from the design blogs Wednesday, February 3, 2010
    22. 30 tips for SemanticTM markup and classes Wednesday, February 3, 2010
    23. 101 CSS resets Wednesday, February 3, 2010
    24. 40 Grid layouts you must see Wednesday, February 3, 2010
    25. 7 UP-lifting reasons to use CSS Sprites Wednesday, February 3, 2010
    26. Have the <TABLE>'s turned? Wednesday, February 3, 2010
    27. 30 sites for great typography Wednesday, February 3, 2010
    28. RT @linkbait: Effortless drop shadows, gradients, and rounded corners Wednesday, February 3, 2010
    29. But this is not a talk about CSS Follow @smashingmag for your CSS tips & tricks Wednesday, February 3, 2010
    30. I want to talk about REAL stylesheet innovation Wednesday, February 3, 2010
    31. I want to talk about HOW we write stylesheets Wednesday, February 3, 2010
    32. I want to talk about how we MAINTAIN stylesheets Wednesday, February 3, 2010
    33. I want to talk about how we SIMPLIFY stylesheets Wednesday, February 3, 2010
    34. A brief History of radio Wednesday, February 3, 2010
    35. In the beginning... Wednesday, February 3, 2010
    36. AM Wednesday, February 3, 2010
    37. AM = Amplitude Modulation Wednesday, February 3, 2010
    38. Invented in 1906 Wednesday, February 3, 2010
    39. Dominant format until 1978 Wednesday, February 3, 2010
    40. Still rockin' after 100 years! Wednesday, February 3, 2010
    41. Then came Wednesday, February 3, 2010
    42. FM Wednesday, February 3, 2010
    43. FM = Frequency Modulation Wednesday, February 3, 2010
    44. Does not suffer susceptibility to atmospheric and electrical interference. Wednesday, February 3, 2010
    45. Patented in 1933. Approved in 1941. Standardized in 1961. World domination in 1978. Unchallenged for thirty years. Wednesday, February 3, 2010
    46. Until... Wednesday, February 3, 2010
    47. XM Wednesday, February 3, 2010
    48. Hey, it w as t h e 9 0 s, X s w e re in! XM = Beyond FM Wednesday, February 3, 2010
    49. Founded in 1988. Launched in 2001. Merged with Sirius in 2009. Wednesday, February 3, 2010
    50. Superior sound. Wednesday, February 3, 2010
    51. No commercials. Wednesday, February 3, 2010
    52. Listen to Kasem's Top 40 from coast to coast. Wednesday, February 3, 2010
    53. What the heck does this have to do with stylesheets, anyway? Wednesday, February 3, 2010
    54. I see some parallels. Wednesday, February 3, 2010
    55. A brief History of web presentation Wednesday, February 3, 2010
    56. In the beginning... Wednesday, February 3, 2010
    57. HTML Wednesday, February 3, 2010
    58. for layout HTML + <TABLE> Wednesday, February 3, 2010
    59. Invented in 1989 Wednesday, February 3, 2010
    60. <TABLE> added in 1997 Wednesday, February 3, 2010
    61. Still rockin' after 20 years! Wednesday, February 3, 2010
    62. Then came Wednesday, February 3, 2010
    63. HTML + CSS Wednesday, February 3, 2010
    64. HTML + CSS = Content + Presentation Wednesday, February 3, 2010
    65. CSS 1 published in 1996. Wednesday, February 3, 2010
    66. No more <FONT> tags. Wednesday, February 3, 2010
    67. font styling, color, borders & more! Wednesday, February 3, 2010
    68. CSS 2 published in 1998. Wednesday, February 3, 2010
    69. Improved selectors Wednesday, February 3, 2010
    70. CSS2 selectors * E .class #id E F E > F E + F E[attribute] E[attribute=value] E[attribute|=value] :first-child :link :visited :lang() :before ::before :after ::after :first-letter :first-line Wednesday, February 3, 2010
    71. ... and even more stuff no browsers supported until years later. Wednesday, February 3, 2010
    72. Which brings us back to... Wednesday, February 3, 2010
    73. CSS 3 published in 20?? Wednesday, February 3, 2010
    74. Web 2.0 brought new demands Wednesday, February 3, 2010
    75. Round corners Wednesday, February 3, 2010
    76. Drop shadows Wednesday, February 3, 2010
    77. Gradients Wednesday, February 3, 2010
    78. But we already covered that. Wednesday, February 3, 2010
    79. That's the 75 slide introduction Wednesday, February 3, 2010
    80. 14 years of CSS has basically given us Wednesday, February 3, 2010
    81. more selectors + more properties Wednesday, February 3, 2010
    82. Until now... Wednesday, February 3, 2010
    83. Metaframeworks = high fidelity stylesheets Wednesday, February 3, 2010
    84. Metaframeworks output CSS. Wednesday, February 3, 2010
    85. Nested rules Wednesday, February 3, 2010
    86. Nested rules - selectors table.users tr td a {color: #111} table.users tr.alt td a {color: #333} Wednesday, February 3, 2010
    87. Nested rules - selectors table.users Lo o k , Ma, tr n o braces td a color: #111 or semicolons td.alt a color: #333 But you can use both if you wanna Wednesday, February 3, 2010
    88. Nested rules - selectors table.users tr td color: #111 &.alt color: #333 &:hover color: #666 Wednesday, February 3, 2010
    89. Nested rules - properties .users font: size: 1.2em style: italics weight: bold Wednesday, February 3, 2010
    90. Variables Wednesday, February 3, 2010
    91. Variables .user { background: #333; border-size: 2px; } .owner { background: #333; border-size: 2px; } .admin { background: #666; border-size: 4px; } Wednesday, February 3, 2010
    92. Variables !gray = #333 !default_border = 2px .user background: = !gray border-size: = !default_border .owner r mixing! background: = !gray border-size: = !default_border and colo .admin Ev e n ma t h ! background: = !gray + #333 border-size: = !default_border + 2px Wednesday, February 3, 2010
    93. Mixins Wednesday, February 3, 2010
    94. Mixins .avatar { padding: 2px; border: solid 1px #ddd; position: absolute; top: 5px; left: 5px; } p img { padding: 2px; border: solid 1px #ddd; } Wednesday, February 3, 2010
    95. Mixins =frame(!padding_width = 2px, !border_color = #ddd) padding = !padding_width border: width: 1px defines t he mixin style: solid color = !border_color .avatar +frame position: absolute top: 5px mixes in t h e rule s left: 5px p img +frame(1px, #ccc) Wednesday, February 3, 2010
    96. Imports Wednesday, February 3, 2010
    97. Imports @import url(/css/reset.css) @import url(/css/typography.css) @import url(/css/layout.css) parent + 3 @imports = 4 http requests Wednesday, February 3, 2010
    98. Imports @import reset.sass # _reset.sass @import typography.sass # _typography.sass @import layout.sass # _layout.sass Included at compile time - just one http request Wednesday, February 3, 2010
    99. Imports + Mixins Now it gets fun! Wednesday, February 3, 2010
    100. Compass CSS3 mixins @import compass/css3.sass .callout +border-radius(5px) +linear-gradient("left top", "left bottom", #fff, #ddd) .callout { very different syntax -moz-border-radius: 5px; -webkit-border-radius: 5px; -border-radius: 5px; background-image: -moz-linear-gradient(top, bottom, from(#fff), to (#ddd)); background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0.00, #fff), color-stop(1.00, #ddd)); } Wednesday, February 3, 2010
    101. Compass CSS3 mixins css3/border_radius.sass css3/inline_block.sass css3/opacity.sass css3/text_shadow.sass css3/box_shadow.sass css3/columns.sass css3/box_sizing.sass css3/gradient.sass css3/background_clip.sass css3/background_origin.sass css3/background_size.sass css3/font_face.sass css3/transform.sass css3/transition.sass Wednesday, February 3, 2010
    102. Bring your favorite CSS Framework Wednesday, February 3, 2010
    103. A Blueprint example <div id='wrapper' class="container"> <div id='content' class="span-7 prepend-1"> <div id='main' class="container"> boo ... </div> <div id='featured' class="span-5 last"> ... </div> </div> <div id='sidebar' class="span-3 append-1 last"> ... </div> </div> Wednesday, February 3, 2010
    104. A Blueprint example @import blueprint/reset.sass @import partials/base.sass @import blueprint @import blueprint/modules/scaffolding.sass #wrapper +container #content +column(7) +append(1) #featured +column(5, true) #sidebar +column(3, true) +prepend(1) Wednesday, February 3, 2010
    105. Functions Wednesday, February 3, 2010
    106. Very. Powerful. Functions. Wednesday, February 3, 2010
    107. Sass 2.4 color functions hue(#cc3) => 60deg saturation(#cc3) => 60% lightness(#cc3) => 50% adjust-hue(#cc3, 20deg) => #9c3 saturate(#cc3, 10%) => #d9d926 desaturate(#cc3, 10%) => #bfbf40 lighten(#cc3, 10%) => #d6d65c darken(#cc3, 10%) => #a3a329 grayscale(#cc3) => desaturate(#cc3, 100%) = #808080 complement(#cc3) => adjust-hue(#cc3, 180deg) = #33c mix(#cc3, #00f) => #e56619 mix(#cc3, #00f, 10%) => #f91405 mix(#cc3, #00f, 90%) => #d1b72d http://nex-3.com/posts/89-powerful-color-manipulation-with-sass Wednesday, February 3, 2010
    108. Sass 2.4 color functions with alpha support! mix(rgba(51, 255, 51, 0.75), #f00) => rgba(178, 95, 19, 0.875) mix(rgba(51, 255, 51, 0.90), #f00) => rgba(163, 114, 22, 0.95) alpha(rgba(51, 255, 51, 0.75)) => 0.75 opacity(rgba(51, 255, 51, 0.75)) => 0.75 opacify(rgba(51, 255, 51, 0.75), 0.1) => rgba(51, 255, 51, 0.85) fade-in(rgba(51, 255, 51, 0.75), 0.1) => rgba(51, 255, 51, 0.85) transparentize(rgba(51, 255, 51, 0.75), 0.1) => rgba(51, 255, 51, 0.65) fade-out(rgba(51, 255, 51, 0.75), 0.1) => rgba(51, 255, 51, 0.65) http://nex-3.com/posts/89-powerful-color-manipulation-with-sass Wednesday, February 3, 2010
    109. Share your patterns Wednesday, February 3, 2010
    110. http://brandonmathis.com/projects/fancy-buttons/ Wednesday, February 3, 2010
    111. Image sprites Wednesday, February 3, 2010
    112. Image sprites EXAMPLE 1 a.twitter +sprite-img("icons-32.png", 1) a.facebook +sprite-img("icons-32png", 2) ... EXAMPLE 2 a +sprite-background("icons-32.png") a.twitter +sprite-column(1) a.facebook +sprite-row(2) ... Wednesday, February 3, 2010
    113. Who makes this syntactic sugar? Wednesday, February 3, 2010
    114. Sass and Compass Wednesday, February 3, 2010
    115. Sass and Compass $ sudo gem install haml $ sudo gem install compass --pre CALL IT FROM THE COMMAND LINE $ sass screen.sass screen.css OR COMPASS-IZE YOUR PROJECT $ compass --rails -f blueprint OR WATCH A FOLDER $ compass --watch Wednesday, February 3, 2010
    116. Compass and WordPress shameless plug $ sudo gem install compass-wordpress CRANK OUT A NEW SASS-Y WORDPRESS THEME $ compass -r compass-wordpress -f wordpress  -p thematic  --sass-dir=sass --css-dir=css -s compressed my_awesome_theme AUTOCOMPILE YOUR CHANGES $ compass --watch Wednesday, February 3, 2010
    117. LESS Wednesday, February 3, 2010
    118. Get LESS $ sudo gem install less CALL IT FROM THE COMMAND LINE $ lessc screen.less GRAB THE RAILS PLUGIN $ script/plugin install git://github.com/cloudhead/more.git Wednesday, February 3, 2010
    119. Using LESS - variables @the-border: 1px; @base-color: #111; #header { color: @base-color * 3; border-left: @the-border; border-right: @the-border * 2; } #footer { color: (@base-color + #111) * 1.5; } Wednesday, February 3, 2010
    120. Using LESS - mixins .rounded_corners (@radius: 5px) { -moz-border-radius: @radius; -webkit-border-radius: @radius; border-radius: @radius; } #header { .rounded_corners; } #footer { .rounded_corners(10px); } Wednesday, February 3, 2010
    121. Using LESS - nested rules #header { color: red; a { font-weight: bold; text-decoration: none; } } Wednesday, February 3, 2010
    122. logo wins best in show! }{CSS Wednesday, February 3, 2010
    123. Works with PHP Wednesday, February 3, 2010
    124. So that's another meetup Wednesday, February 3, 2010
    125. What's the future? Wednesday, February 3, 2010
    126. First, grow the category Wednesday, February 3, 2010
    127. Wednesday, February 3, 2010
    128. Hang in there, only six more slides! http://www.flickr.com/photos/szacharias/4073373487/sizes/l/ Wednesday, February 3, 2010
    129. Next, recruit some talent Wednesday, February 3, 2010
    130. Seek designer converts Wednesday, February 3, 2010
    131. Watch the egos Wednesday, February 3, 2010
    132. Continue to push the envelope Wednesday, February 3, 2010
    133. Mind the gap Wednesday, February 3, 2010
    134. Resources an d thanks for having me! http://compass-style.org http://sass-lang.com http://lesscss.org http://xcss.antpaw.org Questions? I'm @pengwynn on Twitter http://wynnnetherland.com the newish blog Wednesday, February 3, 2010

    ×