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

2.
Have you heard?
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.
Some smash hits from the design blogs

19.
30 tips for SemanticTM markup and classes

20.
101 CSS resets

21.
40 Grid layouts you must see

22.
7 UP-lifting reasons to use
CSS Sprites

23.
Have the <TABLE>'s turned?

24.
30 sites for great typography

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

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

27.
I want to talk about
REAL stylesheet innovation

28.
I want to talk about
HOW we write stylesheets

29.
I want to talk about
how we MAINTAIN stylesheets

30.
I want to talk about
how we SIMPLIFY stylesheets

31.
A brief
History of radio

32.
In the beginning...

33.
AM

34.
AM = Amplitude Modulation

35.
Invented in 1906

36.
Dominant format until 1978

37.
Still rockin' after 100 years!

38.
Then came

39.
FM

40.
FM = Frequency Modulation

41.
Does not suffer
susceptibility to atmospheric and
electrical interference.

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

43.
Until...

44.
XM

45.
Hey, it w
as t h e 9 0
s,
X s w e re
in!
XM = Beyond FM

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

47.
Superior sound.

48.
No commercials.

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

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

51.
I see some parallels.

52.
A brief
History of web presentation

53.
In the beginning...

54.
HTML

55.
for layout
HTML + <TABLE>

56.
Invented in 1989

57.
<TABLE> added in 1997

58.
Still rockin' after 20 years!

59.
Then came

60.
HTML + CSS

61.
HTML + CSS = Content + Presentation

62.
CSS 1 published in 1996.

63.
No more <FONT> tags.

64.
font styling, color, borders & more!

65.
CSS 2 published in 1998.

66.
Improved selectors

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

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

69.
Which brings us back to...

70.
CSS 3 published in 20??

71.
Web 2.0 brought new demands

72.
Round corners

73.
Drop shadows

74.
Gradients

75.
But we already covered that.

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

77.
14 years of CSS has basically given us

78.
more selectors + more properties

79.
Until now...

80.
Metaframeworks =
high fidelity stylesheets

81.
Metaframeworks output CSS.

82.
Nested rules

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

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

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

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

87.
Syntax options

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

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

90.
Variables

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

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

93.
Mixins

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

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

96.
Extend

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

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

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

100.
Imports

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

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

103.
Imports + Mixins
Now it gets fun!

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

105.
A brief detour

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

107.
Ummm. Not so fast.

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

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

110.
Solutions?

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

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

113.
Hey, funny you should ask!
CSS preprocesors

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

115.
Bring your favorite CSS Framework

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

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

118.
Functions

119.
Very. Powerful. Functions.

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

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

122.
Share your patterns

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

124.
Image sprites

125.
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)
...

126.
URL helpers

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

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

129.
Who makes this syntactic sugar?

130.
Sass and Compass
oh yeah, and haml, too

131.
hamlsass

132.
hamlsass

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

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

135.
DEMO
and code spelunking

136.
What's the future?

137.
First, grow the category

138.
Next, recruit some talent

139.
You'll love it or hate it.

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