Big Design Conference: CSS3

meta
^
CSS FRAMEWORKS: KING OF ALL @media
updated for Sass 3.0

WYNNNETHERLAND

www.zurb.com/playground/awesome-overlays

RGBA, HSL, HSLA colors

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

@font-face
means

Typographic freedom!

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

Some smash hits from the design blogs

30 tips for SemanticTM markup and classes

7 UP-lifting reasons to use
CSS Sprites

RT @linkbait: Effortless drop shadows,
gradients, and rounded corners

This is not a talk about CSS
Follow @smashingmag for your CSS tips & tricks

I want to talk about

REAL stylesheet innovation


HOW we write stylesheets


how we MAINTAIN stylesheets


how we SIMPLIFY stylesheets

Still rockin' after 100 years!

Does not suffer
susceptibility to atmospheric and
electrical interference.

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

Hey, it w
as t h e 9 0
s,
X s w e re
in!

XM = Beyond FM

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

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

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

A brief

History of web presentation

HTML + CSS = Content + Presentation

font styling, color, borders & more!

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

... and even more stuff no browsers
supported until years later.

That's the 75 slide introduction
Titles are the new bullets.

14 years of CSS has basically given us

more selectors + more properties

Metaframeworks =
high fidelity stylesheets

Nested rules - selectors
table.users tr td {background: #111}

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

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

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

Nested rules - properties
.users {
font: {
size: 1.2em;
style: italics;
weight: bold;
}
}

Syntax options - SCSS Sassy CSS!

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

Syntax options - Indented I whitespace

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

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

and colo r mixing!
.admin { Ev e n ma t h !
background: $gray + #333;
border-size: $default_border + 2px;
}

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: {
fines the mixin
de
width: 1px;
style: solid;
color $border_color;
}
}
.avatar {
ru le s
he
in t
@include frame;
es
mix
position: absolute;
top: 5px;
left: 5px;
}
p img { @include frame(1px, #ccc);}

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

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)

parent + 3 @imports = 4 http requests

Imports
@import "reset.scss" # _reset.scss
@import "typography" # _typography.scss
@import "layout.css" # url(layout.css)

Included at compile time -
just one http request

Imports + Mixins

Now it gets fun!

Compass CSS3 mixins
@import "compass/css3";

.callout {
@include border-radius(5px);
@include linear-gradient("left top", "left bottom", #fff, #ddd);
}

.callout {
-moz-border-radius: 5px;
very different syntax
-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));
}

“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

Compass CSS3 mixins
@import "compass/css3.scss";

.callout {
@include border-radius(5px);
@include linear-gradient("left top", "left bottom", #fff, #ddd);
}

.callout {
-moz-border-radius: 5px;
very different syntax
-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));
}

“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

isn't that just like not having it?

beta-new-css8-property-dilly

...and we're back.

Vendor specific stylesheets

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

Hey, funny you should ask!

CSS preprocesors

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

Bring your favorite CSS Framework

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>

A Blueprint example
#wrapper {
@include container;
#content {
@include column(7);
@include append(1);
#featured {
@include column(5, true);
}
}
#sidebar {
@include column(3, true);
@include prepend(1);
}
}

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

with alpha support!
Sass 2.4 color functions
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

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 2
a
+sprite-background("icons-32.png")
a.twitter
+sprite-column(1)
a.facebook
+sprite-row(2)
...

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;

elopment,
}
v
ths for de
relative pa
production
PRODUCTION a bsolute for
#nav {
background: url("http://assets.example.com/images/nav_bg.png")
repeat-x top center;
}

URL helpers
stylesheet-url($path)

font-url($path)

image-url($path)

Who makes this syntactic sugar?

Sass and Compass
oh yeah, and haml, too

Sass and Compass
$ 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

shameless plug
Compass and WordPress
$ 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

Resources an d thanks for having me!

http://sass-lang.com
http://compass-style.org
http://compass-style.org/docs/

blog: wynnnetherland.com
twitter: @pengwynn

linkedin.com/in/netherland

Big Design Conference: CSS3

More Related Content

What's hot

Similar to Big Design Conference: CSS3

More from Wynn Netherland

Big Design Conference: CSS3