$30 off During Our Annual Pro Sale. View Details »

CSS Metaframeworks - King of all @media

Wynn Netherland
September 17, 2011

CSS Metaframeworks - King of all @media

Wynn Netherland

September 17, 2011
Tweet

More Decks by Wynn Netherland

Other Decks in Design

Transcript

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

    View Slide

  2. Have you heard?
    CSS3 is big

    View Slide

  3. New properties
    Hot

    View Slide

  4. border-radius

    View Slide

  5. border-image

    View Slide

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

    View Slide

  7. background-size

    View Slide

  8. gradients

    View Slide

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

    View Slide

  10. text-shadow

    View Slide

  11. box-shadow

    View Slide

  12. word
    wrap

    View Slide

  13. outline

    View Slide

  14. columns

    View Slide

  15. @font-face
    Typographic freedom!
    means

    View Slide

  16. New selectors
    Cool

    View Slide

  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

    View Slide

  18. Some smash hits from the design blogs

    View Slide

  19. 30 tips for SemanticTM markup and classes

    View Slide

  20. 101 CSS resets

    View Slide

  21. 40 Grid layouts you must see

    View Slide

  22. 7 UP-lifting reasons to use
    CSS Sprites

    View Slide

  23. Have the 's turned?

    View Slide

  24. 30 sites for great typography

    View Slide

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

    View Slide

  26. This is not a talk about CSS
    Follow @smashingmag for your CSS tips & tricks

    View Slide

  27. REAL stylesheet innovation
    I want to talk about

    View Slide

  28. HOW we write stylesheets
    I want to talk about

    View Slide

  29. how we MAINTAIN stylesheets
    I want to talk about

    View Slide

  30. how we SIMPLIFY stylesheets
    I want to talk about

    View Slide

  31. History of radio
    A brief

    View Slide

  32. In the beginning...

    View Slide

  33. AM

    View Slide

  34. AM = Amplitude Modulation

    View Slide

  35. Invented in 1906

    View Slide

  36. Dominant format until 1978

    View Slide

  37. Still rockin' after 100 years!

    View Slide

  38. Then came

    View Slide

  39. FM

    View Slide

  40. FM = Frequency Modulation

    View Slide

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

    View Slide

  42. Patented in 1933.
    Approved in 1941.
    Standardized in 1961.
    World domination in 1978.
    Unchallenged for thirty years.

    View Slide

  43. Until...

    View Slide

  44. XM

    View Slide

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

    View Slide

  46. Founded in 1988.
    Launched in 2001.
    Merged with Sirius in 2009.

    View Slide

  47. Superior sound.

    View Slide

  48. No commercials.

    View Slide

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

    View Slide

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

    View Slide

  51. I see some parallels.

    View Slide

  52. History of web presentation
    A brief

    View Slide

  53. In the beginning...

    View Slide

  54. HTML

    View Slide

  55. HTML +
    for layout

    View Slide

  56. Invented in 1989

    View Slide

  57. added in 1997

    View Slide

  58. Still rockin' after 20 years!

    View Slide

  59. Then came

    View Slide

  60. HTML + CSS

    View Slide

  61. HTML + CSS = Content + Presentation

    View Slide

  62. CSS 1 published in 1996.

    View Slide

  63. No more tags.

    View Slide

  64. font styling, color, borders & more!

    View Slide

  65. CSS 2 published in 1998.

    View Slide

  66. Improved selectors

    View Slide

  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

    View Slide

  68. ... and even more stuff no browsers
    supported until years later.

    View Slide

  69. Which brings us back to...

    View Slide

  70. CSS 3 published in 20??

    View Slide

  71. Web 2.0 brought new demands

    View Slide

  72. Round corners

    View Slide

  73. Drop shadows

    View Slide

  74. Gradients

    View Slide

  75. But we already covered that.

    View Slide

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

    View Slide

  77. 14 years of CSS has basically given us

    View Slide

  78. more selectors + more properties

    View Slide

  79. Until now...

    View Slide

  80. Metaframeworks =
    high fidelity stylesheets

    View Slide

  81. Metaframeworks output CSS.

    View Slide

  82. Nested rules

    View Slide

  83. table.users tr td {background: #111}
    table.users tr td a {color: #333}
    Nested rules - selectors

    View Slide

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

    View Slide

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

    View Slide

  86. .users {
    font: {
    size: 1.2em;
    style: italics;
    weight: bold;
    }
    }
    Nested rules - properties

    View Slide

  87. Syntax options

    View Slide

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

    View Slide

  89. table.users
    tr
    td
    background: #d1d1d
    a
    color: #111
    Syntax options - Indented I — whitespace

    View Slide

  90. Variables

    View Slide

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

    View Slide

  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!

    View Slide

  93. Mixins

    View Slide

  94. .avatar {
    padding: 2px;
    border: solid 1px #ddd;
    position: absolute;
    top: 5px;
    left: 5px;
    }
    p img {
    padding: 2px;
    border: solid 1px #ddd;
    }
    Mixins

    View Slide

  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

    View Slide

  96. Extend

    View Slide

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

    View Slide

  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

    View Slide

  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

    View Slide

  100. Imports

    View Slide

  101. @import url(/css/reset.css)
    @import url(/css/typography.css)
    @import url(/css/layout.css)
    Imports
    parent + 3 @imports = 4 http requests

    View Slide

  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

    View Slide

  103. Imports + Mixins
    Now it gets fun!

    View Slide

  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

    View Slide

  105. A brief detour

    View Slide

  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

    View Slide

  107. Ummm. Not so fast.

    View Slide

  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

    View Slide

  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

    View Slide

  110. Solutions?

    View Slide

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

    View Slide

  112. Vendor specific stylesheets
    Maybe. But I'd like to retain
    Internet Explorer's special status unto itself

    View Slide

  113. CSS preprocesors
    Hey, funny you should ask!

    View Slide

  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

    View Slide

  115. Bring your favorite CSS Framework

    View Slide




  116. ...


    ...



    ...


    A Blueprint example
    boo

    View Slide

  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

    View Slide

  118. Functions

    View Slide

  119. Very. Powerful. Functions.

    View Slide

  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

    View Slide

  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

    View Slide

  122. Share your patterns

    View Slide

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

    View Slide

  124. Image sprites

    View Slide

  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

    View Slide

  126. URL helpers

    View Slide

  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

    View Slide

  128. stylesheet-url($path)
    font-url($path)
    image-url($path)
    URL helpers

    View Slide

  129. Who makes this syntactic sugar?

    View Slide

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

    View Slide

  131. hamlsass

    View Slide

  132. hamlsass

    View Slide

  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

    View Slide

  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

    View Slide

  135. DEMO
    and code spelunking

    View Slide

  136. What's the future?

    View Slide

  137. First, grow the category

    View Slide

  138. View Slide

  139. Next, recruit some talent

    View Slide

  140. You'll love it or hate it.

    View Slide

  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!

    View Slide