CSS Metaframeworks: King of all @media

CSS FRAMEWORKS: KING OF ALL @media^Dallas.rb ★ February 2, 2010

WYNNNETHERLAND

meta

Wednesday, February 3, 2010

http://wynnnetherland.com


before we start


http://thechangelog.com @changelogshow

We need to know about your cool projects!


http://thechangelog.com




Your project could end up here!


thanks!


Have you heard?

CSS3 is big


New propertiesHot


border-radius


border-image


background-size


gradients


RGBA, HSL, HSLA colors

rgba (0,0,0,1) is the new black!


text-shadow


box-shadow


wordwrap


outline


columns


@font-face

Typographic freedom!

means


New selectorsCool


* E

.class #id E F

E > F E + F

E[attribute] E[attribute=value] E[attribute~=value] E[attribute|=value]

:first-child :link

:visited :lang() :before ::before :after ::after

:first-letter

::first-letter :first-line ::first-line

E[attribute^=value] E[attribute$=value] E[attribute*=value]

E ~ F :root

:last-child :only-child :nth-child()

:nth-last-child() :first-of-type :last-of-type :only-of-type :nth-of-type()

:nth-last-of-type() :empty :not() :target

:enabled :disabled :checked

CSS3 selectors (and some golden oldies)

:header

Steal this from jQuery, please


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


But this is not a talk about CSS

Follow @smashingmag for your CSS tips & tricks


REAL stylesheet innovationI want to talk about


HOW we write stylesheetsI want to talk about


how we MAINTAIN stylesheetsI want to talk about


how we SIMPLIFY stylesheetsI want to talk about


History of radioA brief


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 suffersusceptibility to atmospheric and

electrical interference.


Patented in 1933.Approved in 1941.Standardized in 1961.World domination in 1978.Unchallenged for thirty years.


Until...


XM


XM = Beyond FM

Hey, it was the 90s,Xs were in!


Founded in 1988.Launched in 2001.Merged with Sirius in 2009.


Superior sound.


No commercials.


Listen to Kasem's Top 40from coast to coast.


What the heck does this have to do with stylesheets, anyway?


I see some parallels.


History of web presentationA brief


In the beginning...


HTML


HTML + <TABLE>for layout


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


* 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

CSS2 selectors


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


14 years of CSS has basically given us


more selectors + more properties


Until now...


Metaframeworks =high fidelity stylesheets


Metaframeworks output CSS.


Nested rules


table.users tr td a {color: #111}

table.users tr.alt td a {color: #333}

Nested rules - selectors


table.users tr td a color: #111 td.alt a color: #333


Look, Ma,no braces

or semicolons

But you can useboth if you wanna


table.users tr td color: #111 &.alt color: #333 &:hover color: #666



.users font: size: 1.2em style: italics weight: bold

Nested rules - properties


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

.admin background: = !gray + #333 border-size: = !default_border + 2px

Variables

Even math!and color mixing!


Mixins


.avatar { padding: 2px; border: solid 1px #ddd; position: absolute; top: 5px; left: 5px;}

p img { padding: 2px; border: solid 1px #ddd;}

Mixins


=frame(!padding_width = 2px, !border_color = #ddd) padding = !padding_width border: width: 1px style: solid color = !border_color

.avatar +frame position: absolute top: 5px left: 5px

p img +frame(1px, #ccc)

Mixins

defines the mixin

mixes in the rules


Imports


@import url(/css/reset.css)@import url(/css/typography.css)@import url(/css/layout.css)

Imports

parent + 3 @imports = 4 http requests


@import reset.sass # _reset.sass@import typography.sass # _typography.sass@import layout.sass # _layout.sass

Imports

Included at compile time - just one http request


Imports + Mixins

Now it gets fun!


@import compass/css3.sass

.callout +border-radius(5px) +linear-gradient("left top", "left bottom", #fff, #ddd)

.callout { -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));}

Compass CSS3 mixins

very different syntax


css3/border_radius.sasscss3/inline_block.sasscss3/opacity.sasscss3/text_shadow.sasscss3/box_shadow.sasscss3/columns.sasscss3/box_sizing.sasscss3/gradient.sasscss3/background_clip.sasscss3/background_origin.sasscss3/background_size.sasscss3/font_face.sasscss3/transform.sasscss3/transition.sass

Compass CSS3 mixins


Bring your favorite CSS Framework


<div id='wrapper' class="container"> <div id='content' class="span-7 prepend-1"> <div id='main' class="container"> ... </div> <div id='featured' class="span-5 last"> ... </div> </div> <div id='sidebar' class="span-3 append-1 last"> ... </div></div>

A Blueprint example

boo


@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)

A Blueprint example


Functions


Very. Powerful. Functions.


hue(#cc3) => 60degsaturation(#cc3) => 60%lightness(#cc3) => 50%

adjust-hue(#cc3, 20deg) => #9c3saturate(#cc3, 10%) => #d9d926desaturate(#cc3, 10%) => #bfbf40lighten(#cc3, 10%) => #d6d65cdarken(#cc3, 10%) => #a3a329

grayscale(#cc3) => desaturate(#cc3, 100%) = #808080complement(#cc3) => adjust-hue(#cc3, 180deg) = #33c

mix(#cc3, #00f) => #e56619mix(#cc3, #00f, 10%) => #f91405mix(#cc3, #00f, 90%) => #d1b72d

Sass 2.4 color functions

http://nex-3.com/posts/89-powerful-color-manipulation-with-sassWednesday, February 3, 2010

http://nex-3.com/posts/89-powerful-color-manipulation-with-sass


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.75opacity(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)

Sass 2.4 color functions with alpha support!

http://nex-3.com/posts/89-powerful-color-manipulation-with-sassWednesday, February 3, 2010



Share your patterns


http://brandonmathis.com/projects/fancy-buttons/




Image sprites


EXAMPLE 1

a.twitter +sprite-img("icons-32.png", 1)a.facebook +sprite-img("icons-32png", 2)...

EXAMPLE 2a +sprite-background("icons-32.png") a.twitter +sprite-column(1) a.facebook +sprite-row(2) ...

Image sprites


Who makes this syntactic sugar?


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

Sass and Compass


$ 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

Compass and WordPress shameless plug


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

Get LESS


@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;}

Using LESS - variables


.rounded_corners (@radius: 5px) { -moz-border-radius: @radius; -webkit-border-radius: @radius; border-radius: @radius;}

#header { .rounded_corners;}

#footer { .rounded_corners(10px);}

Using LESS - mixins


#header { color: red; a { font-weight: bold; text-decoration: none; }}

Using LESS - nested rules


CSS

logo wins

best in show!

}{


Works with PHP


So that's another meetup


What's the future?


First, grow the category



Hang in there,only six more slides!

http://www.flickr.com/photos/szacharias/4073373487/sizes/l/




Next, recruit some talent


Seek designer converts


Watch the egos


Continue to push the envelope


Mind the gap


Resources

http://compass-style.orghttp://sass-lang.comhttp://lesscss.orghttp://xcss.antpaw.org


and thanks for having me!

Questions? I'm @pengwynn on Twitter

the newish blog


http://compass-style.org

http://compass-style.org

http://sass-lang.com

http://sass-lang.com

http://lesscss.org

http://lesscss.org

http://xcss.antpaw.org

http://xcss.antpaw.org



Design

CSS Metaframeworks: King of all @media