Accelerated Stylesheets

ACCELERATED STYLESHEETS ...or more style with less typing NATHAN SMITH WYNN NETHERLAND

CSS3 is BIG

Hot New properties

border-radius

border-image

www.zurb.com/playground/awesome-overlays

background-size

gradients

RGBA, HSL, HSLA colorsrgba (0,0,0,1) is the new black!

text-shadow

box-shadow

wordwrap

outline

columns

@font-face meansTypographic freedom!

Cool New selectors

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, pleaseE[attribute=value] :last-childE[attribute~=value] :only-childE[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

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 justweb pages or web sites.” — Todd Nienkerk aka @toddross co-founder, FourKitchens.com

We want to talk about REAL stylesheet innovation

We want to talk about HOW we write stylesheets

We want to talk about how we MAINTAIN stylesheets

We want to talk about how we SIMPLIFY stylesheets

We want to talk about when OLD SCHOOL beats the NEW SHINY

Tool #1 CSS Frameworks

Rapidly prototype your layouts

Examples:

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

Understand the underlying CSS Tools. Not crutches.

Tool #2 JavaScript

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 conﬁg <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>

Formalize

Tool #3 Sass & Compass

“GET OFF MY LAWN.” Nathan Smith Creator, 960.gs Big Design Speaker (and Reformed Curmudgeon)

A brief History of web presentation

In the beginning...

for layoutHTML + <TABLE>

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

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.

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.

Thats the 70+ slide introduction Titles 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

Nested rules - selectorstable.users tr td {background: #111}table.users tr td a {color: #333}

Nested rules - selectorstable.users { tr { td { background: #d1d1d; a { color: #111; } } }}

Nested rules - selectorstable.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

Syntax options - SCSS Sassy CSS!table.users { tr { td { background: #d1d1d; a { color: #111; } } }}

Syntax options - Indented I whitespacetable.users tr td background: #d1d1d a color: #111

Variables

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

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

Extend

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

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!

A brief detour

“It’s time to abolish all vendor prefixes.They’ve become solutions for which there is noproblem, and they are actively harming webstandards.” — Peter-Paul Koch aka @ppkhttp://www.quirksmode.org/blog/archives/2010/03/css_vendor_pref.html

Ummm. Not so fast.

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 abolishvendor prefixes are mixed, and I might haveovershot my target here.” -Peter-Paul Koch aka @ppkhttp://www.quirksmode.org/blog/archives/2010/03/css_vendor_pref_1.html

Solutions?

isnt that just like not having it?beta-new-css8-property-dilly ...and were back.

Vendor specific stylesheets Maybe. But Id like to retainInternet Explorers special status unto itself

Hey, funny you should ask! CSS preprocesors

Bring your favorite CSS Framework

A Blueprint example<div id= "wrapper" class="container"> <div id="content" class="span-7 prepend-1"> <div id="main"> / Yay? ... </div> boo? <div id="featured" class="span-5 last"> ... </div> </div> <div id="sidebar" class="span-3 append-1 last"> ... </div> </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); }}

Look, Ma! No math!

Functions

Very. Powerful. Functions.

Sass 2.4 color functionshue(#cc3) => 60degsaturation(#cc3) => 60%lightness(#cc3) => 50%adjust-hue(#cc3, 20deg) => #9c3saturate(#cc3, 10%) => #d9d926desaturate(#cc3, 10%) => #bfbf40lighten(#cc3, 10%) => #d6d65cdarken(#cc3, 10%) => #a3a329grayscale(#cc3) => desaturate(#cc3, 100%) = #808080complement(#cc3) => adjust-hue(#cc3, 180deg) = #33cmix(#cc3, #00f) => #e56619mix(#cc3, #00f, 10%) => #f91405mix(#cc3, #00f, 90%) => #d1b72dhttp://nex-3.com/posts/89-powerful-color-manipulation-with-sass

with alpha support!Sass color functionsmix(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.75opacify(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

Blueprint

Blueprint ★ Buttons ★ Link Icons ★ Colors ★ Liquid ★ Debug ★ Print ★ Fancy Type ★ Reset ★ Form ★ Rtl ★ Grid ★ Scaﬀolding ★ Interaction ★ Typography ★ Internet Explorer ★ Utilities

CSS3 ★ Appearance ★ Gradient ★ Background Clip ★ Images ★ Background Origin ★ Inline Block ★ Background Size ★ Opacity ★ Border Radius ★ Shared Utilities ★ Box ★ Text Shadow ★ Box Shadow ★ Transform ★ Box Sizing ★ Transform (legacy) ★ CSS3 Pie ★ Transition ★ Columns ★ Font Face

Image sprites

I like the Sprite in you Image sprites ® 1. @import "icon/*.png"@import "icon/*.png".actions 2. public/images/icon/new.png public/images/icon/edit.png .new public/images/icon/save.png +icon-sprite(new) public/images/icon/delete.png .edit +icon-sprite(edit) .save .icon-sprite, +icon-sprite(save) .actions .new, .delete .actions .edit, +icon-sprite(delete) .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; } 3. .actions .delete { background-position: 0 0; }

URL helpers

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

URL helpersstylesheet-url($path)font-url($path)image-url($path)

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

Compass 960 $ninesixty-columns: 16 #wrap +grid-container #left-nav +alpha +grid(5) #main-content +grid-prefix(1) +grid(10) +omegahttps://github.com/chriseppstein/compass-960-plugin

Sass & Compass$ gem install sass$ gem install compassCall it from the command line$ sass watch screen.scssCompass-ize your project$ compass init rails -f blueprintWatch a folder$ compass watch

compass-wordpress

shameless plugCompass and WordPress$ gem install compass-wordpressCrank out a new Wordpress theme$ compass -r compass-wordpress -f wordpress -p thematic --sass-dir=sass --css-dir=css -s compressed my_awesome_themeAutocompile your changes$ compass watch

compass-formalize

shameless plug #2Compass and Formalize$ gem install compass_formalize$ compass create my-project -r compass_formalizecompass install formalize/dojocompass install formalize/extjscompass install formalize/jquery And one of thesecompass install formalize/mootoolscompass install formalize/prototypecompass install formalize/yui

Isn’t she Sassy, folks?GETTHEBOOK.

Save 40% and get early access! sass40Sadly, sass100 is not a valid code.

DEMOand code spelunking

Accelerated Stylesheets

by Wynn Netherland on Jul 16, 2011

Accessibility

Categories

Upload Details

Usage Rights

1 Embed 4

Statistics

Accelerated Stylesheets Presentation Transcript