CSS Metaframeworks - King of all @media

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