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

2.
CSS3 is BIG

3.
Hot
New properties

4.
border-radius

5.
border-image

6.
www.zurb.com/playground/awesome-overlays

7.
background-size

8.
gradients

9.
RGBA, HSL, HSLA colors
rgba (0,0,0,1) is the new black!

10.
text-shadow

11.
box-shadow

12.
word
wrap

13.
outline

14.
columns

15.
@font-face
means
Typographic freedom!

16.
Cool
New selectors

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

18.
WE  CSS

19.
This is not a talk about CSS.

20.
We think you write too much CSS.

21.
You have an ADDICTION.

22.
⌘

23.
⌘

24.
⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘
⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘
⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘
⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘
⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘
⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘
⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘
⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘

25.
It’s time to ⎋.

26.
“Design web systems, not just
web pages or web sites.”
— Todd Nienkerk aka @toddross
co-founder, FourKitchens.com

27.
We want to talk about
REAL stylesheet innovation

28.
We want to talk about
HOW we write stylesheets

29.
We want to talk about
how we MAINTAIN stylesheets

30.
We want to talk about
how we SIMPLIFY stylesheets

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

32.
Tool #1
CSS Frameworks

33.
Rapidly prototype your layouts

34.
Examples:

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

36.
Understand the underlying CSS
Tools. Not crutches.

37.
Tool #2
JavaScript

38.
JavaScript? You mean like jQuery?

39.
What’s JavaScript got to do with CSS?

40.
Mobile

41.
Responsive Design & Media Queries

42.
Adapt.js

43.
Adapt.js - Serve 960’s (or any) CSS dynamically
http://adapt.960.gs

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

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

46.
Forms

47.
Formalize

48.
Tool #3
Sass & Compass

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

50.
A brief
History of web presentation

51.
In the beginning...

52.
HTML

53.
for layout
HTML + <TABLE>

54.
HTML was invented in 1989

55.
<TABLE> added in 1997

56.
Still rockin' after 20 years!

57.
Then came

58.
HTML + CSS

59.
HTML + CSS = Content + Presentation

60.
CSS 1 published in 1996.

61.
No more <FONT> tags.

62.
font styling, color, borders & more!

63.
CSS 2 published in 1998.

64.
Improved selectors

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

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

67.
Which brings us back to...

68.
CSS 3 published in 20__?

69.
“Web 2.0” brought new demands

70.
Round corners

71.
Drop shadows

72.
Gradients

73.
But we already covered that.

74.
That's the 70+ slide introduction
Titles are the new bullets.

75.
14 years of CSS has basically given us

76.
more selectors + more properties

77.
Until now...

78.
Metaframeworks =
high fidelity stylesheets

79.
Metaframeworks output CSS.

80.
Nested rules

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

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

83.
Nested rules - selectors
table.users {
tr {
td {
color: #111;
&.alt {
color: #333;
}
&:hover {
color: #666;
}
}
}
}

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

85.
Syntax options

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

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

88.
Variables

89.
Variables
.user {
background: #333;
border-size: 2px;
}
.owner {
background: #333;
border-size: 2px;
}
.admin {
background: #666;
border-size: 4px;
}

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

91.
Mixins

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

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

94.
Extend

95.
Mixins
.flash {
padding: 5px;
border-width: 1px;
font-weight: bold;
}
.error {
color: #8a1f11;
background: #fbe3e4;
}
.notice {
color: #514721;
background: #fff6bf;
}

96.
Mixins
.flash {
padding: 5px;
border-width: 1px;
font-weight: bold;
}
.error {
@extend .flash;
color: #8a1f11;
background: #fbe3e4;
}
.notice {
@extend .flash;
color: #514721;
background: #fff6bf;
}

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

98.
Imports

99.
Imports
@import url(/css/reset.css)
@import url(/css/typography.css)
@import url(/css/layout.css)
parent + 3 @imports = 4 HTTP requests

100.
Imports
@import "reset.scss" # _reset.scss
@import "typography" # _typography.scss
@import "layout.css" # url(layout.css)
Included at compile time -
just one http request

101.
Imports + Mixins
Now it gets fun!

102.
A brief detour

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

104.
Ummm. Not so fast.

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

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

107.
Solutions?

108.
isn't that just like not having it?
beta-new-css8-property-dilly
...and we're back.

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

110.
Hey, funny you should ask!
CSS preprocesors

111.
Bring your favorite CSS Framework

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

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

114.
Look, Ma! No math!

115.
Functions

116.
Very. Powerful. Functions.

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

118.
with alpha support!
Sass 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

119.
Blueprint

120.
Blueprint
★ Buttons ★ Link Icons
★ Colors ★ Liquid
★ Debug ★ Print
★ Fancy Type ★ Reset
★ Form ★ Rtl
★ Grid ★ Scaffolding
★ Interaction ★ Typography
★ Internet Explorer ★ Utilities

121.
CSS3

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

123.
Image sprites

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

125.
URL helpers

126.
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;
v elopment,
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;
}

127.
URL helpers
stylesheet-url($path)
font-url($path)
image-url($path)

128.
Stats

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

130.
Share your patterns

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

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

133.
compass-960

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

135.
Sass & Compass
$ 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

136.
compass-wordpress

137.
shameless plug
Compass and 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

138.
compass-formalize

139.
shameless plug #2
Compass and Formalize
$ gem install compass_formalize
$ compass create my-project -r compass_formalize
compass install formalize/dojo
compass install formalize/extjs
compass install formalize/jquery
And one of these
compass install formalize/mootools
compass install formalize/prototype
compass install formalize/yui

140.
Isn’t she Sassy, folks?
GET
THE
BOOK.

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

142.
DEMO
and code spelunking