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