ACCELERATED STYLESHEETS

WYNN NETHERLANDNATHAN SMITH

...or more style with less typing

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

WE CSS

This is not a talk about CSS.

We think you write too much CSS.

You have an ADDICTION.

⌘

⌘

⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘

⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘

⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘

It’s time to ⎋.

“Design web systems, not just web pages or web sites.”

— Todd Nienkerk aka @toddrossco-founder, FourKitchens.com

REAL stylesheet innovationWe want to talk about

HOW we write stylesheetsWe want to talk about

how we MAINTAIN stylesheetsWe want to talk about

how we SIMPLIFY stylesheetsWe want to talk about

when OLD SCHOOL beats the NEW SHINYWe want to talk about

CSS FrameworksTool #1

Rapidly prototype your layouts

Examples:

Percentage-based grid, screenshot in Firefox 4.0http://host.sonspring.com/yui3_grid

Understand the underlying CSSTools. Not crutches.

JavaScriptTool #2

JavaScript? You mean like jQuery?

What’s JavaScript got to do with CSS?

Mobile

Responsive Design & Media Queries

Adapt.js

Adapt.js - Serve 960’s (or any) CSS dynamically

http://adapt.960.gs

How to use Adapt.js = A human-readable config

<script>// Edit to suit your needs.var ADAPT_CONFIG = { // Where is your CSS? path: 'assets/css/',

// false = Only run once, when page first loads. // true = Change on window resize and page tilt. dynamic: true,

// Optional callback... myCallback(i, width) callback: myCallback,

// First range entry is the minimum. // Last range entry is the maximum. // Separate ranges by "to" keyword. range: [ '0px to 760px = mobile.css', '760px to 980px = 720.css', '980px to 1280px = 960.css', '1280px to 1600px = 1200.css', '1600px to 1920px = 1560.css', '1920px = fluid.css' ]};</script>

How to use Adapt.js = A human-readable config

<script>// Edit to suit your needs.var ADAPT_CONFIG = { // Where is your CSS? path: 'assets/css/',

// false = Only run once, when page first loads. // true = Change on window resize and page tilt. dynamic: true,

// Optional callback... myCallback(i, width) callback: myCallback,

// First range entry is the minimum. // Last range entry is the maximum. // Separate ranges by "to" keyword. range: [ '0px to 760px = mobile.css', '760px to 980px = 720.css', '980px to 1280px = 960.css', '1280px to 1600px = 1200.css', '1600px to 1920px = 1560.css', '1920px = fluid.css' ]};</script>

Forms

Formalize

Sass & CompassTool #3

“GET OFF MY LAWN.”

Nathan SmithCreator, 960.gsBig Design Speaker(and Reformed Curmudgeon)

History of web presentationA brief

In the beginning...

HTML

HTML + <TABLE>for layout

HTML was 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 70+ 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!

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!

Bring your favorite CSS Framework

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

A Blueprint example

boo? / Yay?

#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

Look, Ma! No math!

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

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

Blueprint

Blueprint★ Buttons

★ Colors

★ Debug

★ Fancy Type

★ Form

★ Grid

★ Interaction

★ Internet Explorer

★ Link Icons

★ Liquid

★ Print

★ Reset

★ Rtl

★ Scaffolding

★ Typography

★ Utilities

CSS3

CSS3★ Appearance

★ Background Clip

★ Background Origin

★ Background Size

★ Border Radius

★ Box

★ Box Shadow

★ Box Sizing

★ CSS3 Pie

★ Columns

★ Font Face

★ Gradient

★ Images

★ Inline Block

★ Opacity

★ Shared Utilities

★ Text Shadow

★ Transform

★ Transform (legacy)

★ Transition

Image sprites

@import "icon/*.png"

.actions .new +icon-sprite(new) .edit +icon-sprite(edit) .save +icon-sprite(save) .delete +icon-sprite(delete)

Image sprites

.icon-sprite,

.actions .new,

.actions .edit,

.actions .save,

.actions .delete { background: url('/images/icon-34fe0604ab.png') no-repeat; }

.actions .new { background-position: 0 -64px; }

.actions .edit { background-position: 0 -32px; }

.actions .save { background-position: 0 -96px; }

.actions .delete { background-position: 0 0; }

@import "icon/*.png"

public/images/icon/new.pngpublic/images/icon/edit.pngpublic/images/icon/save.pngpublic/images/icon/delete.png

1.2.

3.

I like the Sprite in you®

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

Stats

Stats| --------------------------------- | ----- | ---------- | -------------- | ----------- | --------- | -------------- || Filename | Rules | Properties | Mixins Defs | Mixins Used | CSS Rules | CSS Properties || --------------------------------- | ----- | ---------- | -------------- | ----------- | --------- | -------------- || app/stylesheets/_960.sass | 198 | 141 | 0 | 0 | -- | -- || app/stylesheets/_animation.sass | 2 | 2 | 0 | 0 | -- | -- || app/stylesheets/application.sass | 268 | 607 | 0 | 33 | 1131 | 3684 || app/stylesheets/_data_table.sass | 39 | 66 | 0 | 4 | -- | -- || app/stylesheets/_datepicker.sass | 125 | 242 | 0 | 0 | -- | -- || app/stylesheets/_formalize.sass | 82 | 78 | 0 | 4 | -- | -- || app/stylesheets/_forms.sass | 227 | 242 | 0 | 21 | -- | -- || app/stylesheets/ie.sass | 0 | 0 | 0 | 0 | 0 | 0 || app/stylesheets/_jscrollpane.sass | 20 | 43 | 0 | 0 | -- | -- || app/stylesheets/_prettify.sass | 16 | 16 | 0 | 0 | -- | -- || app/stylesheets/print.sass | 0 | 0 | 0 | 0 | 0 | 0 || app/stylesheets/_reset.sass | 111 | 18 | 0 | 0 | -- | -- || app/stylesheets/_text.sass | 27 | 18 | 0 | 0 | -- | -- || app/stylesheets/_tiptip.sass | 19 | 40 | 0 | 0 | -- | -- || app/stylesheets/_util.sass | 56 | 54 | 0 | 0 | -- | -- || app/stylesheets/_vars.sass | 0 | 6 | 2 | 0 | -- | -- || --------------------------------- | ----- | ---------- | -------------- | ----------- | --------- | -------------- || Total (16 files): | 1190 | 1573 | 2 | 62 | 1131 | 3684 || --------------------------------- | ----- | ---------- | -------------- | ----------- | --------- | -------------- |

Share your patterns

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

@import "fancy-buttons"button,a.button +fancy-button(#2966a8)

compass-960

$ninesixty-columns: 16

#wrap +grid-container #left-nav +alpha +grid(5) #main-content +grid-prefix(1) +grid(10) +omega

Compass 960

https://github.com/chriseppstein/compass-960-plugin

$ gem install sass$ gem install compass

Call it from the command line$ sass watch screen.scss

Compass-ize your project$ compass init rails -f blueprint

Watch a folder$ compass watch

Sass & Compass

compass-wordpress

$ gem install compass-wordpress

Crank out a new 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

compass-formalize

$ gem install compass_formalize

$ compass create my-project -r compass_formalize

compass install formalize/dojo

compass install formalize/extjs

compass install formalize/jquery

compass install formalize/mootools

compass install formalize/prototype

compass install formalize/yui

Compass and Formalize shameless plug #2

And one of these

Isn’t she Sassy, folks?

GETTHEBOOK.

sass40Save 40% and get early access!

Sadly, sass100 is not a valid code.

DEMOand code spelunking