Big Design Conference: CSS3

  • 4,219 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,219
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
101
Comments
0
Likes
11

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. meta ^ CSS FRAMEWORKS: KING OF ALL @media updated for Sass 3.0 WYNNNETHERLAND
  • 2. Have you heard? CSS3 is big
  • 3. Hot New properties
  • 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 means Typographic freedom!
  • 16. Cool New selectors
  • 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. 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. I want to talk about REAL stylesheet innovation
  • 28. I want to talk about HOW we write stylesheets
  • 29. I want to talk about how we MAINTAIN stylesheets
  • 30. I want to talk about how we SIMPLIFY stylesheets
  • 31. A brief History of radio
  • 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. Hey, it w as t h e 9 0 s, X s w e re in! XM = Beyond FM
  • 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. A brief History of web presentation
  • 53. In the beginning...
  • 54. HTML
  • 55. for layout HTML + <TABLE>
  • 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. 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. ... 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. Nested rules - selectors table.users tr td {background: #111} table.users tr td a {color: #333}
  • 84. Nested rules - selectors table.users { tr { td { background: #d1d1d; a { color: #111; } } } }
  • 85. Nested rules - selectors table.users { tr { td { color: #111; &.alt { color: #333; } &:hover { color: #666; } } } }
  • 86. Nested rules - properties .users { font: { size: 1.2em; style: italics; weight: bold; } }
  • 87. Syntax options
  • 88. Syntax options - SCSS Sassy CSS! table.users { tr { td { background: #d1d1d; a { color: #111; } } } }
  • 89. Syntax options - Indented I whitespace table.users tr td background: #d1d1d a color: #111
  • 90. Variables
  • 91. Variables .user { background: #333; border-size: 2px; } .owner { background: #333; border-size: 2px; } .admin { background: #666; border-size: 4px; }
  • 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. Mixins
  • 94. Mixins .avatar { padding: 2px; border: solid 1px #ddd; position: absolute; top: 5px; left: 5px; } p img { padding: 2px; border: solid 1px #ddd; }
  • 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. Extend
  • 97. Mixins .flash { padding: 5px; border-width: 1px; font-weight: bold; } .error { color: #8a1f11; background: #fbe3e4; } .notice { color: #514721; background: #fff6bf; }
  • 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. 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. Imports
  • 101. Imports @import url(/css/reset.css) @import url(/css/typography.css) @import url(/css/layout.css) parent + 3 @imports = 4 http requests
  • 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. Imports + Mixins Now it gets fun!
  • 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. 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. 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. “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. isn't that just like not having it? beta-new-css8-property-dilly ...and we're back.
  • 112. Vendor specific stylesheets Maybe. But I'd like to retain Internet Explorer's special status unto itself
  • 113. Hey, funny you should ask! CSS preprocesors
  • 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. Bring your favorite CSS Framework
  • 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. 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. Functions
  • 119. Very. Powerful. Functions.
  • 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. 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. Share your patterns
  • 123. http://brandonmathis.com/projects/fancy-buttons/
  • 124. Image sprites
  • 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. URL helpers
  • 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. URL helpers stylesheet-url($path) font-url($path) image-url($path)
  • 129. Who makes this syntactic sugar?
  • 130. Sass and Compass oh yeah, and haml, too
  • 131. hamlsass
  • 132. hamlsass
  • 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. 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. DEMO and code spelunking
  • 136. What's the future?
  • 137. First, grow the category
  • 138. Next, recruit some talent
  • 139. You'll love it or hate it.
  • 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