Big Design Conference: CSS3

WYNNNETHERLAND

CSS FRAMEWORKS: KING OF ALL @media^meta

updated for Sass 3.0

Have you heard?

CSS3 is big

New propertiesHot

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

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

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

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

.users { font: { size: 1.2em; style: italics; weight: bold; }}

Nested rules - properties

Syntax options

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

Syntax options - SCSS Sassy CSS!

table.users tr td background: #d1d1d a color: #111

Syntax options - Indented I ♥ whitespace

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

@mixin frame($padding_width: 2px, $border_color: #ddd) { padding: $padding_width; border: { width: 1px; style: solid; color $border_color; }}.avatar { @include frame; position: absolute; top: 5px; left: 5px;}p img { @include frame(1px, #ccc);}

Mixins

defines the mixin

mixes in the rules

Extend

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

Mixins

now we can use a single class in our markup

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.scss" # _reset.scss@import "typography" # _typography.scss@import "layout.css" # url(layout.css)

Imports

Included at compile time - just one http request

Imports + Mixins

Now it gets fun!

@import "compass/css3";

.callout { @include border-radius(5px); @include 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

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.

@import "compass/css3.scss";

.callout { @include border-radius(5px); @include 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

“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?

beta-new-css8-property-dillyisn't that just like not having it?

...and we're back.

Vendor specific stylesheets

Maybe. But I'd like to retain Internet Explorer's special status unto itself

CSS preprocesorsHey, funny you should ask!

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

#wrapper { @include container; #content { @include column(7); @include append(1); #featured { @include column(5, true); } } #sidebar { @include column(3, true); @include 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-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-sass

Share your patterns

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

Image sprites

EXAMPLE 1a.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

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

PRODUCTION#nav { background: url("http://assets.example.com/images/nav_bg.png") repeat-x top center;}

URL helpers

relative paths for development,

absolute for production

stylesheet-url($path)

font-url($path)

image-url($path)

URL helpers

Who makes this syntactic sugar?

Sass and Compassoh yeah, and haml, too

hamlsass

hamlsass

$ 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

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

DEMOand code spelunking

What's the future?

First, grow the category

Next, recruit some talent

You'll love it or hate it.

Resources

http://sass-lang.comhttp://compass-style.orghttp://compass-style.org/docs/

blog: wynnnetherland.comtwitter: @pengwynn

linkedin.com/in/netherland

and thanks for having me!