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




                              WYN...
Have you heard?

 CSS3 is big
Hot
      New properties
border-radius
border-image
www.zurb.com/playground/awesome-overlays
background-size
gradients
RGBA, HSL, HSLA colors

rgba (0,0,0,1) is the new black!
text-shadow
box-shadow
word
wrap
outline
columns
@font-face
       means

Typographic freedom!
Cool
       New selectors
CSS3 selectors (and some golden oldies)
          *                 ::first-letter                   :enabled
          E ...
Some smash hits from the design blogs
30 tips for SemanticTM markup and classes
101 CSS resets
40 Grid layouts you must see
7 UP-lifting reasons to use
        CSS Sprites
Have the <TABLE>'s turned?
30 sites for great typography
RT @linkbait: Effortless drop shadows,
   gradients, and rounded corners
This is not a talk about CSS
Follow @smashingmag for your CSS tips & tricks
I want to talk about

        REAL stylesheet innovation
I want to talk about

        HOW we write stylesheets
I want to talk about

     how we MAINTAIN stylesheets
I want to talk about

      how we SIMPLIFY stylesheets
A brief

   History of radio
In the beginning...
AM
AM = Amplitude Modulation
Invented in 1906
Dominant format until 1978
Still rockin' after 100 years!
Then came
FM
FM = Frequency Modulation
Does not suffer
susceptibility to atmospheric and
     electrical interference.
Patented in 1933.
Approved in 1941.
Standardized in 1961.
World domination in 1978.
Unchallenged for thirty years.
Until...
XM
Hey, it w
                  as t h e 9 0
                               s,
           X s w e re
                      in!...
Founded in 1988.
Launched in 2001.
Merged with Sirius in 2009.
Superior sound.
No commercials.
Listen to Kasem's Top 40
   from coast to coast.
What the heck does this have to do
    with stylesheets, anyway?
I see some parallels.
A brief

  History of web presentation
In the beginning...
HTML
for layout

HTML + <TABLE>
Invented in 1989
<TABLE> added in 1997
Still rockin' after 20 years!
Then came
HTML + CSS
HTML + CSS = Content + Presentation
CSS 1 published in 1996.
No more <FONT> tags.
font styling, color, borders & more!
CSS 2 published in 1998.
Improved selectors
CSS2 selectors
         *
         E
      .class
        #id
        E F
       E > F
       E + F
   E[attribute]
E[attr...
... and even more stuff no browsers
     supported until years later.
Which brings us back to...
CSS 3 published in 20??
Web 2.0 brought new demands
Round corners
Drop shadows
Gradients
But we already covered that.
That's the 75 slide introduction
   Titles are the new bullets.
14 years of CSS has basically given us
more selectors + more properties
Until now...
Metaframeworks =
high fidelity stylesheets
Metaframeworks output CSS.
Nested rules
Nested rules - selectors
table.users tr td {background: #111}

table.users tr td a {color: #333}
Nested rules - selectors
table.users {
  tr {
    td {
       background: #d1d1d;
       a {
         color: #111;
       ...
Nested rules - selectors
table.users {
  tr {
    td {
       color: #111;
       &.alt {
         color: #333;
       }
 ...
Nested rules - properties
.users {
  font: {
    size: 1.2em;
    style: italics;
    weight: bold;
  }
}
Syntax options
Syntax options - SCSS   Sassy CSS!


table.users {
  tr {
    td {
       background: #d1d1d;
       a {
         color: #...
Syntax options - Indented   I   whitespace


table.users
  tr
     td
        background: #d1d1d
        a
          color...
Variables
Variables
.user {
  background: #333;
  border-size: 2px;
}

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

.admin {
...
Variables
$gray: #333;
$default_border: 2px;

.user { background: $gray; border-size: $default_border;}
.owner { backgroun...
Mixins
Mixins
.avatar {
  padding: 2px;
  border: solid 1px #ddd;
  position: absolute;
  top: 5px;
  left: 5px;
}

p img {
  pad...
Mixins
@mixin frame($padding_width: 2px, $border_color: #ddd) {
  padding: $padding_width;
  border: {
                   ...
Extend
Mixins
.flash {
  padding: 5px;
  border-width: 1px;
  font-weight: bold;
}
.error {
  color: #8a1f11;
  background: #fbe3...
Mixins
.flash {
  padding: 5px;
  border-width: 1px;
  font-weight: bold;
}

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

.error { color: #8a1f11; backgroun...
Imports
Imports
@import url(/css/reset.css)
@import url(/css/typography.css)
@import url(/css/layout.css)


    parent + 3 @import...
Imports
@import "reset.scss"         #   _reset.scss
@import "typography"         #   _typography.scss
@import "layout.css...
Imports + Mixins

  Now it gets fun!
Compass CSS3 mixins
@import "compass/css3";

.callout {
  @include border-radius(5px);
  @include linear-gradient("left to...
A brief detour
“It’s time to abolish all vendor prefixes.
They’ve become solutions for which there is no
problem, and they are actively h...
Ummm. Not so fast.
Compass CSS3 mixins
@import "compass/css3.scss";

.callout {
  @include border-radius(5px);
  @include linear-gradient("le...
“Well, reactions to my proposal to abolish
vendor prefixes are mixed, and I might have
overshot my target here.”

        ...
Solutions?
isn't that just like not having it?

beta-new-css8-property-dilly

         ...and we're back.
Vendor specific stylesheets

        Maybe. But I'd like to retain
Internet Explorer's special status unto itself
Hey, funny you should ask!

CSS preprocesors
Compass CSS3 mixins
css3/border_radius.sass
css3/inline_block.sass
css3/opacity.sass
css3/text_shadow.sass
css3/box_shadow...
Bring your favorite CSS Framework
A Blueprint example
<div id='wrapper' class="container">
    <div id='content' class="span-7 prepend-1">
        <div id='...
A Blueprint example
#wrapper {
  @include container;
  #content {
    @include column(7);
    @include append(1);
    #fea...
Functions
Very. Powerful. Functions.
Sass 2.4 color functions
hue(#cc3) => 60deg
saturation(#cc3) => 60%
lightness(#cc3) => 50%

adjust-hue(#cc3, 20deg) => #9c...
with alpha support!
Sass 2.4 color functions
mix(rgba(51, 255, 51, 0.75), #f00) => rgba(178, 95, 19, 0.875)
mix(rgba(51, 2...
Share your patterns
http://brandonmathis.com/projects/fancy-buttons/
Image sprites
Image sprites
EXAMPLE 1
a.twitter
  +sprite-img("icons-32.png", 1)
a.facebook
  +sprite-img("icons-32png", 2)
...


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



DEVELOPMENT
#nav {
  background: url("/...
URL helpers
stylesheet-url($path)

font-url($path)

image-url($path)
Who makes this syntactic sugar?
Sass and Compass
         oh yeah, and haml, too
hamlsass
hamlsass
Sass and Compass
$ sudo gem install haml
$ sudo gem install compass --pre




CALL IT FROM THE COMMAND LINE
$ sass --watch...
shameless plug
Compass and WordPress
$ sudo gem install compass-wordpress


CRANK OUT A NEW SASS-Y WORDPRESS THEME
$ compa...
DEMO
and code spelunking
What's the future?
First, grow the category
Next, recruit some talent
You'll love it or hate it.
Resources    an d thanks for having me!


http://sass-lang.com
http://compass-style.org
http://compass-style.org/docs/



...
Big Design Conference: CSS3
Upcoming SlideShare
Loading in...5
×

Big Design Conference: CSS3

4,413

Published on

0 Comments
12 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
4,413
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
103
Comments
0
Likes
12
Embeds 0
No embeds

No notes for slide

Big Design Conference: CSS3

  1. 1. meta ^ CSS FRAMEWORKS: KING OF ALL @media updated for Sass 3.0 WYNNNETHERLAND
  2. 2. Have you heard? CSS3 is big
  3. 3. Hot New properties
  4. 4. border-radius
  5. 5. border-image
  6. 6. www.zurb.com/playground/awesome-overlays
  7. 7. background-size
  8. 8. gradients
  9. 9. RGBA, HSL, HSLA colors rgba (0,0,0,1) is the new black!
  10. 10. text-shadow
  11. 11. box-shadow
  12. 12. word wrap
  13. 13. outline
  14. 14. columns
  15. 15. @font-face means Typographic freedom!
  16. 16. Cool New selectors
  17. 17. 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
  18. 18. Some smash hits from the design blogs
  19. 19. 30 tips for SemanticTM markup and classes
  20. 20. 101 CSS resets
  21. 21. 40 Grid layouts you must see
  22. 22. 7 UP-lifting reasons to use CSS Sprites
  23. 23. Have the <TABLE>'s turned?
  24. 24. 30 sites for great typography
  25. 25. RT @linkbait: Effortless drop shadows, gradients, and rounded corners
  26. 26. This is not a talk about CSS Follow @smashingmag for your CSS tips & tricks
  27. 27. I want to talk about REAL stylesheet innovation
  28. 28. I want to talk about HOW we write stylesheets
  29. 29. I want to talk about how we MAINTAIN stylesheets
  30. 30. I want to talk about how we SIMPLIFY stylesheets
  31. 31. A brief History of radio
  32. 32. In the beginning...
  33. 33. AM
  34. 34. AM = Amplitude Modulation
  35. 35. Invented in 1906
  36. 36. Dominant format until 1978
  37. 37. Still rockin' after 100 years!
  38. 38. Then came
  39. 39. FM
  40. 40. FM = Frequency Modulation
  41. 41. Does not suffer susceptibility to atmospheric and electrical interference.
  42. 42. Patented in 1933. Approved in 1941. Standardized in 1961. World domination in 1978. Unchallenged for thirty years.
  43. 43. Until...
  44. 44. XM
  45. 45. Hey, it w as t h e 9 0 s, X s w e re in! XM = Beyond FM
  46. 46. Founded in 1988. Launched in 2001. Merged with Sirius in 2009.
  47. 47. Superior sound.
  48. 48. No commercials.
  49. 49. Listen to Kasem's Top 40 from coast to coast.
  50. 50. What the heck does this have to do with stylesheets, anyway?
  51. 51. I see some parallels.
  52. 52. A brief History of web presentation
  53. 53. In the beginning...
  54. 54. HTML
  55. 55. for layout HTML + <TABLE>
  56. 56. Invented in 1989
  57. 57. <TABLE> added in 1997
  58. 58. Still rockin' after 20 years!
  59. 59. Then came
  60. 60. HTML + CSS
  61. 61. HTML + CSS = Content + Presentation
  62. 62. CSS 1 published in 1996.
  63. 63. No more <FONT> tags.
  64. 64. font styling, color, borders & more!
  65. 65. CSS 2 published in 1998.
  66. 66. Improved selectors
  67. 67. 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
  68. 68. ... and even more stuff no browsers supported until years later.
  69. 69. Which brings us back to...
  70. 70. CSS 3 published in 20??
  71. 71. Web 2.0 brought new demands
  72. 72. Round corners
  73. 73. Drop shadows
  74. 74. Gradients
  75. 75. But we already covered that.
  76. 76. That's the 75 slide introduction Titles are the new bullets.
  77. 77. 14 years of CSS has basically given us
  78. 78. more selectors + more properties
  79. 79. Until now...
  80. 80. Metaframeworks = high fidelity stylesheets
  81. 81. Metaframeworks output CSS.
  82. 82. Nested rules
  83. 83. Nested rules - selectors table.users tr td {background: #111} table.users tr td a {color: #333}
  84. 84. Nested rules - selectors table.users { tr { td { background: #d1d1d; a { color: #111; } } } }
  85. 85. Nested rules - selectors table.users { tr { td { color: #111; &.alt { color: #333; } &:hover { color: #666; } } } }
  86. 86. Nested rules - properties .users { font: { size: 1.2em; style: italics; weight: bold; } }
  87. 87. Syntax options
  88. 88. Syntax options - SCSS Sassy CSS! table.users { tr { td { background: #d1d1d; a { color: #111; } } } }
  89. 89. Syntax options - Indented I whitespace table.users tr td background: #d1d1d a color: #111
  90. 90. Variables
  91. 91. Variables .user { background: #333; border-size: 2px; } .owner { background: #333; border-size: 2px; } .admin { background: #666; border-size: 4px; }
  92. 92. Variables $gray: #333; $default_border: 2px; .user { background: $gray; border-size: $default_border;} .owner { background: $gray; border-size: $default_border;} and colo r mixing! .admin { Ev e n ma t h ! background: $gray + #333; border-size: $default_border + 2px; }
  93. 93. Mixins
  94. 94. Mixins .avatar { padding: 2px; border: solid 1px #ddd; position: absolute; top: 5px; left: 5px; } p img { padding: 2px; border: solid 1px #ddd; }
  95. 95. Mixins @mixin frame($padding_width: 2px, $border_color: #ddd) { padding: $padding_width; border: { fines the mixin de width: 1px; style: solid; color $border_color; } } .avatar { ru le s he in t @include frame; es mix position: absolute; top: 5px; left: 5px; } p img { @include frame(1px, #ccc);}
  96. 96. Extend
  97. 97. Mixins .flash { padding: 5px; border-width: 1px; font-weight: bold; } .error { color: #8a1f11; background: #fbe3e4; } .notice { color: #514721; background: #fff6bf; }
  98. 98. Mixins .flash { padding: 5px; border-width: 1px; font-weight: bold; } .error { @extend .flash; color: #8a1f11; background: #fbe3e4; } .notice { @extend .flash; color: #514721; background: #fff6bf; }
  99. 99. Mixins .flash, .error, .notice { padding: 5px; border-width: 1px; font-weight: bold; } .error { color: #8a1f11; background: #fbe3e4; } .notice { color: #514721; background: #fff6bf; } now we can use a single class in our markup
  100. 100. Imports
  101. 101. Imports @import url(/css/reset.css) @import url(/css/typography.css) @import url(/css/layout.css) parent + 3 @imports = 4 http requests
  102. 102. Imports @import "reset.scss" # _reset.scss @import "typography" # _typography.scss @import "layout.css" # url(layout.css) Included at compile time - just one http request
  103. 103. Imports + Mixins Now it gets fun!
  104. 104. Compass CSS3 mixins @import "compass/css3"; .callout { @include border-radius(5px); @include linear-gradient("left top", "left bottom", #fff, #ddd); } .callout { -moz-border-radius: 5px; very different syntax -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)); }
  105. 105. A brief detour
  106. 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. 107. Ummm. Not so fast.
  108. 108. Compass CSS3 mixins @import "compass/css3.scss"; .callout { @include border-radius(5px); @include linear-gradient("left top", "left bottom", #fff, #ddd); } .callout { -moz-border-radius: 5px; very different syntax -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)); }
  109. 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. 110. Solutions?
  111. 111. isn't that just like not having it? beta-new-css8-property-dilly ...and we're back.
  112. 112. Vendor specific stylesheets Maybe. But I'd like to retain Internet Explorer's special status unto itself
  113. 113. Hey, funny you should ask! CSS preprocesors
  114. 114. 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
  115. 115. Bring your favorite CSS Framework
  116. 116. 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>
  117. 117. A Blueprint example #wrapper { @include container; #content { @include column(7); @include append(1); #featured { @include column(5, true); } } #sidebar { @include column(3, true); @include prepend(1); } }
  118. 118. Functions
  119. 119. Very. Powerful. Functions.
  120. 120. 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
  121. 121. with alpha support! Sass 2.4 color functions 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
  122. 122. Share your patterns
  123. 123. http://brandonmathis.com/projects/fancy-buttons/
  124. 124. Image sprites
  125. 125. 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) ...
  126. 126. URL helpers
  127. 127. URL helpers #nav { background: image-url("nav_bg.png") repeat-x top center; } DEVELOPMENT #nav { background: url("/images/nav_bg.png") repeat-x top center; elopment, } v ths for de relative pa production PRODUCTION a bsolute for #nav { background: url("http://assets.example.com/images/nav_bg.png") repeat-x top center; }
  128. 128. URL helpers stylesheet-url($path) font-url($path) image-url($path)
  129. 129. Who makes this syntactic sugar?
  130. 130. Sass and Compass oh yeah, and haml, too
  131. 131. hamlsass
  132. 132. hamlsass
  133. 133. Sass and Compass $ 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
  134. 134. shameless plug Compass and WordPress $ 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
  135. 135. DEMO and code spelunking
  136. 136. What's the future?
  137. 137. First, grow the category
  138. 138. Next, recruit some talent
  139. 139. You'll love it or hate it.
  140. 140. Resources an d thanks for having me! http://sass-lang.com http://compass-style.org http://compass-style.org/docs/ blog: wynnnetherland.com twitter: @pengwynn linkedin.com/in/netherland
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×