CSS Metaframeworks: King of all @media

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.ﬂickr.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

http://wynnnetherland.com	198
http://www.slideshare.net	52
http://wynn.dev	26
http://me.wynn.fm	13
http://decodering.com	7
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

CSS Metaframeworks: King of all @media

by Wynn Netherland on Feb 03, 2010

Accessibility

Categories

Upload Details

Usage Rights

22 Embeds 319

Statistics

CSS Metaframeworks: King of all @media Presentation Transcript