Save 37% off PRO during our Black Friday Sale! »

CSS Metaframeworks - King of all @media

7e19cd5486b5d6dc1ef90e671ba52ae0?s=47 Wynn Netherland
September 17, 2011

CSS Metaframeworks - King of all @media

7e19cd5486b5d6dc1ef90e671ba52ae0?s=128

Wynn Netherland

September 17, 2011
Tweet

Transcript

  1. WYNNNETHERLAND CSS FRAMEWORKS: KING OF ALL @media ^ meta updated

    for Sass 3.0
  2. Have you heard? CSS3 is big

  3. New properties Hot

  4. border-radius

  5. border-image

  6. www.zurb.com/playground/ awesome-overlays

  7. background-size

  8. gradients

  9. RGBA, HSL, HSLA colors rgba (0,0,0,1) is the new black!

  10. text-shadow

  11. box-shadow

  12. word wrap

  13. outline

  14. columns

  15. @font-face Typographic freedom! means

  16. New selectors Cool

  17. * E .class #id E F E > F E

    + F E[attribute] E[attribute=value] E[attribute~=value] E[attribute|=value] :first-child :link :visited :lang() :before ::before :after ::after :first-letter ::first-letter :first-line ::first-line E[attribute^=value] E[attribute$=value] E[attribute*=value] E ~ F :root :last-child :only-child :nth-child() :nth-last-child() :first-of-type :last-of-type :only-of-type :nth-of-type() :nth-last-of-type() :empty :not() :target :enabled :disabled :checked CSS3 selectors (and some golden oldies) :header Steal this from jQuery, please
  18. Some smash hits from the design blogs

  19. 30 tips for SemanticTM markup and classes

  20. 101 CSS resets

  21. 40 Grid layouts you must see

  22. 7 UP-lifting reasons to use CSS Sprites

  23. Have the <TABLE>'s turned?

  24. 30 sites for great typography

  25. RT @linkbait: Effortless drop shadows, gradients, and rounded corners

  26. This is not a talk about CSS Follow @smashingmag for

    your CSS tips & tricks
  27. REAL stylesheet innovation I want to talk about

  28. HOW we write stylesheets I want to talk about

  29. how we MAINTAIN stylesheets I want to talk about

  30. how we SIMPLIFY stylesheets I want to talk about

  31. History of radio A brief

  32. In the beginning...

  33. AM

  34. AM = Amplitude Modulation

  35. Invented in 1906

  36. Dominant format until 1978

  37. Still rockin' after 100 years!

  38. Then came

  39. FM

  40. FM = Frequency Modulation

  41. Does not suffer susceptibility to atmospheric and electrical interference.

  42. Patented in 1933. Approved in 1941. Standardized in 1961. World

    domination in 1978. Unchallenged for thirty years.
  43. Until...

  44. XM

  45. XM = Beyond FM Hey, it was the 90s, Xs

    were in!
  46. Founded in 1988. Launched in 2001. Merged with Sirius in

    2009.
  47. Superior sound.

  48. No commercials.

  49. Listen to Kasem's Top 40 from coast to coast.

  50. What the heck does this have to do with stylesheets,

    anyway?
  51. I see some parallels.

  52. History of web presentation A brief

  53. In the beginning...

  54. HTML

  55. HTML + <TABLE> for layout

  56. Invented in 1989

  57. <TABLE> added in 1997

  58. Still rockin' after 20 years!

  59. Then came

  60. HTML + CSS

  61. HTML + CSS = Content + Presentation

  62. CSS 1 published in 1996.

  63. No more <FONT> tags.

  64. font styling, color, borders & more!

  65. CSS 2 published in 1998.

  66. Improved selectors

  67. * 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 CSS2 selectors
  68. ... and even more stuff no browsers supported until years

    later.
  69. Which brings us back to...

  70. CSS 3 published in 20??

  71. Web 2.0 brought new demands

  72. Round corners

  73. Drop shadows

  74. Gradients

  75. But we already covered that.

  76. That's the 75 slide introduction Titles are the new bullets.

  77. 14 years of CSS has basically given us

  78. more selectors + more properties

  79. Until now...

  80. Metaframeworks = high fidelity stylesheets

  81. Metaframeworks output CSS.

  82. Nested rules

  83. table.users tr td {background: #111} table.users tr td a {color:

    #333} Nested rules - selectors
  84. table.users { tr { td { background: #d1d1d; a {

    color: #111; } } } } Nested rules - selectors
  85. table.users { tr { td { color: #111; &.alt {

    color: #333; } &:hover { color: #666; } } } } Nested rules - selectors
  86. .users { font: { size: 1.2em; style: italics; weight: bold;

    } } Nested rules - properties
  87. Syntax options

  88. table.users { tr { td { background: #d1d1d; a {

    color: #111; } } } } Syntax options - SCSS Sassy CSS!
  89. table.users tr td background: #d1d1d a color: #111 Syntax options

    - Indented I — whitespace
  90. Variables

  91. .user { background: #333; border-size: 2px; } .owner { background:

    #333; border-size: 2px; } .admin { background: #666; border-size: 4px; } Variables
  92. $gray: #333; $default_border: 2px; .user { background: $gray; border-size: $default_border;}

    .owner { background: $gray; border-size: $default_border;} .admin { background: $gray + #333; border-size: $default_border + 2px; } Variables Even math! and color mixing!
  93. Mixins

  94. .avatar { padding: 2px; border: solid 1px #ddd; position: absolute;

    top: 5px; left: 5px; } p img { padding: 2px; border: solid 1px #ddd; } Mixins
  95. @mixin frame($padding_width: 2px, $border_color: #ddd) { padding: $padding_width; border: {

    width: 1px; style: solid; color $border_color; } } .avatar { @include frame; position: absolute; top: 5px; left: 5px; } p img { @include frame(1px, #ccc);} Mixins defines the mixin mixes in the rules
  96. Extend

  97. .flash { padding: 5px; border-width: 1px; font-weight: bold; } .error

    { color: #8a1f11; background: #fbe3e4; } .notice { color: #514721; background: #fff6bf; } Mixins
  98. .flash { padding: 5px; border-width: 1px; font-weight: bold; } .error

    { @extend .flash; color: #8a1f11; background: #fbe3e4; } .notice { @extend .flash; color: #514721; background: #fff6bf; } Mixins
  99. .flash, .error, .notice { padding: 5px; border-width: 1px; font-weight: bold;

    } .error { color: #8a1f11; background: #fbe3e4; } .notice { color: #514721; background: #fff6bf; } Mixins now we can use a single class in our markup
  100. Imports

  101. @import url(/css/reset.css) @import url(/css/typography.css) @import url(/css/layout.css) Imports parent + 3

    @imports = 4 http requests
  102. @import "reset.scss" # _reset.scss @import "typography" # _typography.scss @import "layout.css"

    # url(layout.css) Imports Included at compile time - just one http request
  103. Imports + Mixins Now it gets fun!

  104. @import "compass/css3"; .callout { @include border-radius(5px); @include linear-gradient("left top", "left

    bottom", #fff, #ddd); } .callout { -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)); } Compass CSS3 mixins very different syntax
  105. A brief detour

  106. “It’s time to abolish all vendor prefixes. They’ve become solutions

    for which there is no problem, and they are actively harming web standards.” -Peter-Paul Koch aka @ppk http:/ /www.quirksmode.org/blog/ archives/2010/03/ css_vendor_pref.html
  107. Ummm. Not so fast.

  108. @import "compass/css3.scss"; .callout { @include border-radius(5px); @include linear-gradient("left top", "left

    bottom", #fff, #ddd); } .callout { -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)); } Compass CSS3 mixins very different syntax
  109. “Well, reactions to my proposal to abolish vendor prefixes are

    mixed, and I might have overshot my target here.” -Peter-Paul Koch aka @ppk http:/ /www.quirksmode.org/blog/ archives/2010/03/ css_vendor_pref_1.html
  110. Solutions?

  111. beta-new-css8-property-dilly isn't that just like not having it? ...and we're

    back.
  112. Vendor specific stylesheets Maybe. But I'd like to retain Internet

    Explorer's special status unto itself
  113. CSS preprocesors Hey, funny you should ask!

  114. 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 Compass CSS3 mixins
  115. Bring your favorite CSS Framework

  116. <div id='wrapper' class="container"> <div id='content' class="span-7 prepend-1"> <div id='main' class="container">

    ... </div> <div id='featured' class="span-5 last"> ... </div> </div> <div id='sidebar' class="span-3 append-1 last"> ... </div> </div> A Blueprint example boo
  117. #wrapper { @include container; #content { @include column(7); @include append(1);

    #featured { @include column(5, true); } } #sidebar { @include column(3, true); @include prepend(1); } } A Blueprint example
  118. Functions

  119. Very. Powerful. Functions.

  120. 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 Sass 2.4 color functions http://nex-3.com/posts/89-powerful-color-manipulation-with-sass
  121. 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) Sass 2.4 color functions with alpha support! http://nex-3.com/posts/89-powerful-color-manipulation-with-sass
  122. Share your patterns

  123. http://brandonmathis.com/projects/fancy-buttons/

  124. Image sprites

  125. 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) ... Image sprites
  126. URL helpers

  127. #nav { background: image-url("nav_bg.png") repeat-x top center; } DEVELOPMENT #nav

    { background: url("/images/nav_bg.png") repeat-x top center; } PRODUCTION #nav { background: url("http://assets.example.com/images/nav_bg.png") repeat-x top center; } URL helpers relative paths for development, absolute for production
  128. stylesheet-url($path) font-url($path) image-url($path) URL helpers

  129. Who makes this syntactic sugar?

  130. Sass and Compass oh yeah, and haml, too

  131. hamlsass

  132. hamlsass

  133. $ sudo gem install haml $ sudo gem install compass

    --pre CALL IT FROM THE COMMAND LINE $ sass --watch screen.scss OR COMPASS-IZE YOUR PROJECT $ compass --rails -f blueprint OR WATCH A FOLDER $ compass --watch Sass and Compass
  134. $ 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 Compass and WordPress shameless plug
  135. DEMO and code spelunking

  136. What's the future?

  137. First, grow the category

  138. None
  139. Next, recruit some talent

  140. You'll love it or hate it.

  141. Resources http://sass-lang.com http://compass-style.org http://compass-style.org/docs/ blog: wynnnetherland.com twitter: @pengwynn linkedin.com/in/netherland and

    thanks for having me!