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

Big Design Conference: CSS3

on

  • 5,433 views

 

Statistics

Views

Total Views
5,433
Views on SlideShare
5,381
Embed Views
52

Actions

Likes
11
Downloads
101
Comments
0

3 Embeds 52

http://www.slideshare.net 49
http://a0.twimg.com 2
http://www.lmodules.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Big Design Conference: CSS3 Big Design Conference: CSS3 Presentation Transcript

  • meta ^ CSS FRAMEWORKS: KING OF ALL @media updated for Sass 3.0 WYNNNETHERLAND
  • 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 :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
  • 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! XM = Beyond FM
  • 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[attribute=value] E[attribute|=value] :first-child :link :visited :lang() :before ::before :after ::after :first-letter :first-line
  • ... 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; } &:hover { color: #666; } } } }
  • 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: #111; } } } }
  • Syntax options - Indented I whitespace table.users tr td background: #d1d1d a color: #111
  • Variables
  • Variables .user { background: #333; border-size: 2px; } .owner { background: #333; border-size: 2px; } .admin { background: #666; border-size: 4px; }
  • 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; }
  • Mixins
  • Mixins .avatar { padding: 2px; border: solid 1px #ddd; position: absolute; top: 5px; left: 5px; } p img { padding: 2px; border: solid 1px #ddd; }
  • 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);}
  • Extend
  • Mixins .flash { padding: 5px; border-width: 1px; font-weight: bold; } .error { color: #8a1f11; background: #fbe3e4; } .notice { color: #514721; background: #fff6bf; }
  • Mixins .flash { padding: 5px; border-width: 1px; font-weight: bold; } .error { @extend .flash; color: #8a1f11; background: #fbe3e4; } .notice { @extend .flash; color: #514721; background: #fff6bf; }
  • 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
  • Imports
  • Imports @import url(/css/reset.css) @import url(/css/typography.css) @import url(/css/layout.css) parent + 3 @imports = 4 http requests
  • Imports @import "reset.scss" # _reset.scss @import "typography" # _typography.scss @import "layout.css" # url(layout.css) Included at compile time - just one http request
  • Imports + Mixins Now it gets fun!
  • 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)); }
  • 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 harming web standards.” -Peter-Paul Koch aka @ppk http:/ /www.quirksmode.org/blog/archives/2010/03/css_vendor_pref.html
  • Ummm. Not so fast.
  • 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)); }
  • “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
  • 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.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
  • Bring your favorite CSS Framework
  • 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>
  • 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); } }
  • Functions
  • Very. Powerful. Functions.
  • 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
  • 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
  • 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) ... EXAMPLE 2 a +sprite-background("icons-32.png") a.twitter +sprite-column(1) a.facebook +sprite-row(2) ...
  • URL helpers
  • 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; }
  • 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 screen.scss OR COMPASS-IZE YOUR PROJECT $ compass --rails -f blueprint OR WATCH A FOLDER $ compass --watch
  • 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
  • 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/ blog: wynnnetherland.com twitter: @pengwynn linkedin.com/in/netherland