Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

Have you heard? CSS3 is big

Slide 3

Slide 3 text

New properties Hot

Slide 4

Slide 4 text

border-radius

Slide 5

Slide 5 text

border-image

Slide 6

Slide 6 text

www.zurb.com/playground/ awesome-overlays

Slide 7

Slide 7 text

background-size

Slide 8

Slide 8 text

gradients

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

text-shadow

Slide 11

Slide 11 text

box-shadow

Slide 12

Slide 12 text

word wrap

Slide 13

Slide 13 text

outline

Slide 14

Slide 14 text

columns

Slide 15

Slide 15 text

@font-face Typographic freedom! means

Slide 16

Slide 16 text

New selectors Cool

Slide 17

Slide 17 text

* 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

Slide 18

Slide 18 text

Some smash hits from the design blogs

Slide 19

Slide 19 text

30 tips for SemanticTM markup and classes

Slide 20

Slide 20 text

101 CSS resets

Slide 21

Slide 21 text

40 Grid layouts you must see

Slide 22

Slide 22 text

7 UP-lifting reasons to use CSS Sprites

Slide 23

Slide 23 text

Have the 's turned?

Slide 24

Slide 24 text

30 sites for great typography

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

REAL stylesheet innovation I want to talk about

Slide 28

Slide 28 text

HOW we write stylesheets I want to talk about

Slide 29

Slide 29 text

how we MAINTAIN stylesheets I want to talk about

Slide 30

Slide 30 text

how we SIMPLIFY stylesheets I want to talk about

Slide 31

Slide 31 text

History of radio A brief

Slide 32

Slide 32 text

In the beginning...

Slide 33

Slide 33 text

AM

Slide 34

Slide 34 text

AM = Amplitude Modulation

Slide 35

Slide 35 text

Invented in 1906

Slide 36

Slide 36 text

Dominant format until 1978

Slide 37

Slide 37 text

Still rockin' after 100 years!

Slide 38

Slide 38 text

Then came

Slide 39

Slide 39 text

FM

Slide 40

Slide 40 text

FM = Frequency Modulation

Slide 41

Slide 41 text

Does not suffer susceptibility to atmospheric and electrical interference.

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

Until...

Slide 44

Slide 44 text

XM

Slide 45

Slide 45 text

XM = Beyond FM Hey, it was the 90s, Xs were in!

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

Superior sound.

Slide 48

Slide 48 text

No commercials.

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

I see some parallels.

Slide 52

Slide 52 text

History of web presentation A brief

Slide 53

Slide 53 text

In the beginning...

Slide 54

Slide 54 text

HTML

Slide 55

Slide 55 text

HTML + for layout

Slide 56

Slide 56 text

Invented in 1989

Slide 57

Slide 57 text

added in 1997

Slide 58

Slide 58 text

Still rockin' after 20 years!

Slide 59

Slide 59 text

Then came

Slide 60

Slide 60 text

HTML + CSS

Slide 61

Slide 61 text

HTML + CSS = Content + Presentation

Slide 62

Slide 62 text

CSS 1 published in 1996.

Slide 63

Slide 63 text

No more tags.

Slide 64

Slide 64 text

font styling, color, borders & more!

Slide 65

Slide 65 text

CSS 2 published in 1998.

Slide 66

Slide 66 text

Improved selectors

Slide 67

Slide 67 text

* 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

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

Which brings us back to...

Slide 70

Slide 70 text

CSS 3 published in 20??

Slide 71

Slide 71 text

Web 2.0 brought new demands

Slide 72

Slide 72 text

Round corners

Slide 73

Slide 73 text

Drop shadows

Slide 74

Slide 74 text

Gradients

Slide 75

Slide 75 text

But we already covered that.

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

14 years of CSS has basically given us

Slide 78

Slide 78 text

more selectors + more properties

Slide 79

Slide 79 text

Until now...

Slide 80

Slide 80 text

Metaframeworks = high fidelity stylesheets

Slide 81

Slide 81 text

Metaframeworks output CSS.

Slide 82

Slide 82 text

Nested rules

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

Syntax options

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

Variables

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

$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!

Slide 93

Slide 93 text

Mixins

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

@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

Slide 96

Slide 96 text

Extend

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

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

Slide 99

Slide 99 text

.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

Slide 100

Slide 100 text

Imports

Slide 101

Slide 101 text

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

Slide 102

Slide 102 text

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

Slide 103

Slide 103 text

Imports + Mixins Now it gets fun!

Slide 104

Slide 104 text

@import "compass/css3"; .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

Slide 105

Slide 105 text

A brief detour

Slide 106

Slide 106 text

“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

Slide 107

Slide 107 text

Ummm. Not so fast.

Slide 108

Slide 108 text

@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

Slide 109

Slide 109 text

“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

Slide 110

Slide 110 text

Solutions?

Slide 111

Slide 111 text

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

Slide 112

Slide 112 text

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

Slide 113

Slide 113 text

CSS preprocesors Hey, funny you should ask!

Slide 114

Slide 114 text

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 Compass CSS3 mixins

Slide 115

Slide 115 text

Bring your favorite CSS Framework

Slide 116

Slide 116 text

...
...
...
A Blueprint example boo

Slide 117

Slide 117 text

#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

Slide 118

Slide 118 text

Functions

Slide 119

Slide 119 text

Very. Powerful. Functions.

Slide 120

Slide 120 text

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 Sass 2.4 color functions http://nex-3.com/posts/89-powerful-color-manipulation-with-sass

Slide 121

Slide 121 text

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) Sass 2.4 color functions with alpha support! http://nex-3.com/posts/89-powerful-color-manipulation-with-sass

Slide 122

Slide 122 text

Share your patterns

Slide 123

Slide 123 text

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

Slide 124

Slide 124 text

Image sprites

Slide 125

Slide 125 text

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) ... Image sprites

Slide 126

Slide 126 text

URL helpers

Slide 127

Slide 127 text

#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

Slide 128

Slide 128 text

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

Slide 129

Slide 129 text

Who makes this syntactic sugar?

Slide 130

Slide 130 text

Sass and Compass oh yeah, and haml, too

Slide 131

Slide 131 text

hamlsass

Slide 132

Slide 132 text

hamlsass

Slide 133

Slide 133 text

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

Slide 134

Slide 134 text

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

Slide 135

Slide 135 text

DEMO and code spelunking

Slide 136

Slide 136 text

What's the future?

Slide 137

Slide 137 text

First, grow the category

Slide 138

Slide 138 text

No content

Slide 139

Slide 139 text

Next, recruit some talent

Slide 140

Slide 140 text

You'll love it or hate it.

Slide 141

Slide 141 text

Resources http://sass-lang.com http://compass-style.org http://compass-style.org/docs/ blog: wynnnetherland.com twitter: @pengwynn linkedin.com/in/netherland and thanks for having me!