CSS Metaframeworks: King of all @media
Upcoming SlideShare
Loading in...5
×
 

CSS Metaframeworks: King of all @media

on

  • 12,265 views

Dallas.rb talk discussing trends in creating CSS stylesheets and the growing lineup of CSS Metaframeworks.

Dallas.rb talk discussing trends in creating CSS stylesheets and the growing lineup of CSS Metaframeworks.

Statistics

Views

Total Views
12,265
Slideshare-icon Views on SlideShare
11,945
Embed Views
320

Actions

Likes
45
Downloads
260
Comments
2

22 Embeds 320

http://wynnnetherland.com 198
http://www.slideshare.net 52
http://wynn.dev 26
http://me.wynn.fm 13
http://decodering.com 8
http://chubut.gov.ar 3
http://feeds.feedburner.com 2
http://twittertim.es 2
http://flavors.me 2
http://omfgitsasalmon.posterous.com 2
http://slideclip.b-prep.com 1
http://de.flavors.me 1
http://www.soup.io 1
http://pengwynn.local 1
http://blog.omgilovesalmon.com 1
http://paper.li 1
http://decodering.tumblr.com 1
http://mknayab.blogspot.com 1
http://drizzlin.com 1
https://chubut.gov.ar 1
http://www.chubut.gov.ar 1
http://omfgitsasalmon.com 1
More...

Accessibility

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

12 of 2

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…

  • Are you sure you want to
    Your message goes here
    Processing…
  • Video from Vimeo:

    CSS Metaframeworks - King of all @media from Wynn Netherland on Vimeo.<br /><object type="application/x-shockwave-flash" data="http://vimeo.com/moogaloop.swf?clip_id=9348454&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" width="350" height="288"><param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=9348454&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1"></param><embed src="http://vimeo.com/moogaloop.swf?clip_id=9348454&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;color=&amp;fullscreen=1" width="350" height="288" type="application/x-shockwave-flash"></embed></object>
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • multikey - automatically index arrays of object values <br /> ensure index on tags or _keywords

CSS Metaframeworks: King of all @media CSS Metaframeworks: King of all @media Presentation Transcript

  • meta ^ CSS FRAMEWORKS: KING OF ALL @media Dallas.rb February 2, 2010 WYNNNETHERLAND Wednesday, February 3, 2010
  • before we start Wednesday, February 3, 2010
  • We need to know about your cool projects! http://thechangelog.com @changelogshow Wednesday, February 3, 2010
  • Your project could end up here! Wednesday, February 3, 2010
  • thanks! Wednesday, February 3, 2010
  • Have you heard? CSS3 is big Wednesday, February 3, 2010
  • Hot New properties Wednesday, February 3, 2010
  • border-radius Wednesday, February 3, 2010
  • border-image Wednesday, February 3, 2010
  • background-size Wednesday, February 3, 2010
  • gradients Wednesday, February 3, 2010
  • RGBA, HSL, HSLA colors rgba (0,0,0,1) is the new black! Wednesday, February 3, 2010
  • text-shadow Wednesday, February 3, 2010
  • box-shadow Wednesday, February 3, 2010
  • word wrap Wednesday, February 3, 2010
  • outline Wednesday, February 3, 2010
  • columns Wednesday, February 3, 2010
  • @font-face means Typographic freedom! Wednesday, February 3, 2010
  • Cool New selectors Wednesday, February 3, 2010
  • 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 Wednesday, February 3, 2010
  • Some smash hits from the design blogs Wednesday, February 3, 2010
  • 30 tips for SemanticTM markup and classes Wednesday, February 3, 2010
  • 101 CSS resets Wednesday, February 3, 2010
  • 40 Grid layouts you must see Wednesday, February 3, 2010
  • 7 UP-lifting reasons to use CSS Sprites Wednesday, February 3, 2010
  • Have the <TABLE>'s turned? Wednesday, February 3, 2010
  • 30 sites for great typography Wednesday, February 3, 2010
  • RT @linkbait: Effortless drop shadows, gradients, and rounded corners Wednesday, February 3, 2010
  • But this is not a talk about CSS Follow @smashingmag for your CSS tips & tricks Wednesday, February 3, 2010
  • I want to talk about REAL stylesheet innovation Wednesday, February 3, 2010
  • I want to talk about HOW we write stylesheets Wednesday, February 3, 2010
  • I want to talk about how we MAINTAIN stylesheets Wednesday, February 3, 2010
  • I want to talk about how we SIMPLIFY stylesheets Wednesday, February 3, 2010
  • A brief History of radio Wednesday, February 3, 2010
  • In the beginning... Wednesday, February 3, 2010
  • AM Wednesday, February 3, 2010
  • AM = Amplitude Modulation Wednesday, February 3, 2010
  • Invented in 1906 Wednesday, February 3, 2010
  • Dominant format until 1978 Wednesday, February 3, 2010
  • Still rockin' after 100 years! Wednesday, February 3, 2010
  • Then came Wednesday, February 3, 2010
  • FM Wednesday, February 3, 2010
  • FM = Frequency Modulation Wednesday, February 3, 2010
  • Does not suffer susceptibility to atmospheric and electrical interference. Wednesday, February 3, 2010
  • Patented in 1933. Approved in 1941. Standardized in 1961. World domination in 1978. Unchallenged for thirty years. Wednesday, February 3, 2010
  • Until... Wednesday, February 3, 2010
  • XM Wednesday, February 3, 2010
  • Hey, it w as t h e 9 0 s, X s w e re in! XM = Beyond FM Wednesday, February 3, 2010
  • Founded in 1988. Launched in 2001. Merged with Sirius in 2009. Wednesday, February 3, 2010
  • Superior sound. Wednesday, February 3, 2010
  • No commercials. Wednesday, February 3, 2010
  • Listen to Kasem's Top 40 from coast to coast. Wednesday, February 3, 2010
  • What the heck does this have to do with stylesheets, anyway? Wednesday, February 3, 2010
  • I see some parallels. Wednesday, February 3, 2010
  • A brief History of web presentation Wednesday, February 3, 2010
  • In the beginning... Wednesday, February 3, 2010
  • HTML Wednesday, February 3, 2010
  • for layout HTML + <TABLE> Wednesday, February 3, 2010
  • Invented in 1989 Wednesday, February 3, 2010
  • <TABLE> added in 1997 Wednesday, February 3, 2010
  • Still rockin' after 20 years! Wednesday, February 3, 2010
  • Then came Wednesday, February 3, 2010
  • HTML + CSS Wednesday, February 3, 2010
  • HTML + CSS = Content + Presentation Wednesday, February 3, 2010
  • CSS 1 published in 1996. Wednesday, February 3, 2010
  • No more <FONT> tags. Wednesday, February 3, 2010
  • font styling, color, borders & more! Wednesday, February 3, 2010
  • CSS 2 published in 1998. Wednesday, February 3, 2010
  • Improved selectors Wednesday, February 3, 2010
  • 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 Wednesday, February 3, 2010
  • ... and even more stuff no browsers supported until years later. Wednesday, February 3, 2010
  • Which brings us back to... Wednesday, February 3, 2010
  • CSS 3 published in 20?? Wednesday, February 3, 2010
  • Web 2.0 brought new demands Wednesday, February 3, 2010
  • Round corners Wednesday, February 3, 2010
  • Drop shadows Wednesday, February 3, 2010
  • Gradients Wednesday, February 3, 2010
  • But we already covered that. Wednesday, February 3, 2010
  • That's the 75 slide introduction Wednesday, February 3, 2010
  • 14 years of CSS has basically given us Wednesday, February 3, 2010
  • more selectors + more properties Wednesday, February 3, 2010
  • Until now... Wednesday, February 3, 2010
  • Metaframeworks = high fidelity stylesheets Wednesday, February 3, 2010
  • Metaframeworks output CSS. Wednesday, February 3, 2010
  • Nested rules Wednesday, February 3, 2010
  • Nested rules - selectors table.users tr td a {color: #111} table.users tr.alt td a {color: #333} Wednesday, February 3, 2010
  • Nested rules - selectors table.users Lo o k , Ma, tr n o braces td a color: #111 or semicolons td.alt a color: #333 But you can use both if you wanna Wednesday, February 3, 2010
  • Nested rules - selectors table.users tr td color: #111 &.alt color: #333 &:hover color: #666 Wednesday, February 3, 2010
  • Nested rules - properties .users font: size: 1.2em style: italics weight: bold Wednesday, February 3, 2010
  • Variables Wednesday, February 3, 2010
  • Variables .user { background: #333; border-size: 2px; } .owner { background: #333; border-size: 2px; } .admin { background: #666; border-size: 4px; } Wednesday, February 3, 2010
  • Variables !gray = #333 !default_border = 2px .user background: = !gray border-size: = !default_border .owner r mixing! background: = !gray border-size: = !default_border and colo .admin Ev e n ma t h ! background: = !gray + #333 border-size: = !default_border + 2px Wednesday, February 3, 2010
  • Mixins Wednesday, February 3, 2010
  • Mixins .avatar { padding: 2px; border: solid 1px #ddd; position: absolute; top: 5px; left: 5px; } p img { padding: 2px; border: solid 1px #ddd; } Wednesday, February 3, 2010
  • Mixins =frame(!padding_width = 2px, !border_color = #ddd) padding = !padding_width border: width: 1px defines t he mixin style: solid color = !border_color .avatar +frame position: absolute top: 5px mixes in t h e rule s left: 5px p img +frame(1px, #ccc) Wednesday, February 3, 2010
  • Imports Wednesday, February 3, 2010
  • Imports @import url(/css/reset.css) @import url(/css/typography.css) @import url(/css/layout.css) parent + 3 @imports = 4 http requests Wednesday, February 3, 2010
  • Imports @import reset.sass # _reset.sass @import typography.sass # _typography.sass @import layout.sass # _layout.sass Included at compile time - just one http request Wednesday, February 3, 2010
  • Imports + Mixins Now it gets fun! Wednesday, February 3, 2010
  • Compass CSS3 mixins @import compass/css3.sass .callout +border-radius(5px) +linear-gradient("left top", "left bottom", #fff, #ddd) .callout { very different syntax -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)); } Wednesday, February 3, 2010
  • 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 Wednesday, February 3, 2010
  • Bring your favorite CSS Framework Wednesday, February 3, 2010
  • 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> Wednesday, February 3, 2010
  • A Blueprint example @import blueprint/reset.sass @import partials/base.sass @import blueprint @import blueprint/modules/scaffolding.sass #wrapper +container #content +column(7) +append(1) #featured +column(5, true) #sidebar +column(3, true) +prepend(1) Wednesday, February 3, 2010
  • Functions Wednesday, February 3, 2010
  • Very. Powerful. Functions. Wednesday, February 3, 2010
  • 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 Wednesday, February 3, 2010
  • Sass 2.4 color functions with alpha support! 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 Wednesday, February 3, 2010
  • Share your patterns Wednesday, February 3, 2010
  • http://brandonmathis.com/projects/fancy-buttons/ Wednesday, February 3, 2010
  • Image sprites Wednesday, February 3, 2010
  • 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) ... Wednesday, February 3, 2010
  • Who makes this syntactic sugar? Wednesday, February 3, 2010
  • Sass and Compass Wednesday, February 3, 2010
  • Sass and Compass $ sudo gem install haml $ sudo gem install compass --pre CALL IT FROM THE COMMAND LINE $ sass screen.sass screen.css OR COMPASS-IZE YOUR PROJECT $ compass --rails -f blueprint OR WATCH A FOLDER $ compass --watch Wednesday, February 3, 2010
  • Compass and WordPress shameless plug $ 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 Wednesday, February 3, 2010
  • LESS Wednesday, February 3, 2010
  • Get LESS $ sudo gem install less CALL IT FROM THE COMMAND LINE $ lessc screen.less GRAB THE RAILS PLUGIN $ script/plugin install git://github.com/cloudhead/more.git Wednesday, February 3, 2010
  • Using LESS - variables @the-border: 1px; @base-color: #111; #header { color: @base-color * 3; border-left: @the-border; border-right: @the-border * 2; } #footer { color: (@base-color + #111) * 1.5; } Wednesday, February 3, 2010
  • Using LESS - mixins .rounded_corners (@radius: 5px) { -moz-border-radius: @radius; -webkit-border-radius: @radius; border-radius: @radius; } #header { .rounded_corners; } #footer { .rounded_corners(10px); } Wednesday, February 3, 2010
  • Using LESS - nested rules #header { color: red; a { font-weight: bold; text-decoration: none; } } Wednesday, February 3, 2010
  • logo wins best in show! }{CSS Wednesday, February 3, 2010
  • Works with PHP Wednesday, February 3, 2010
  • So that's another meetup Wednesday, February 3, 2010
  • What's the future? Wednesday, February 3, 2010
  • First, grow the category Wednesday, February 3, 2010
  • Wednesday, February 3, 2010
  • Hang in there, only six more slides! http://www.flickr.com/photos/szacharias/4073373487/sizes/l/ Wednesday, February 3, 2010
  • Next, recruit some talent Wednesday, February 3, 2010
  • Seek designer converts Wednesday, February 3, 2010
  • Watch the egos Wednesday, February 3, 2010
  • Continue to push the envelope Wednesday, February 3, 2010
  • Mind the gap Wednesday, February 3, 2010
  • Resources an d thanks for having me! http://compass-style.org http://sass-lang.com http://lesscss.org http://xcss.antpaw.org Questions? I'm @pengwynn on Twitter http://wynnnetherland.com the newish blog Wednesday, February 3, 2010