CSS FRAMEWORKS: KING OF ALL @media^Dallas.rb ★ February 2, 2010
WYNNNETHERLAND
meta
Wednesday, February 3, 2010
before we start
Wednesday, February 3, 2010
http://thechangelog.com @changelogshow
We need to know about your cool projects!
Wednesday, February 3, 2010
Your project could end up here!
Wednesday, February 3, 2010
thanks!
Wednesday, February 3, 2010
Have you heard?
CSS3 is big
Wednesday, February 3, 2010
New propertiesHot
Wednesday, February 3, 2010
border-radius
Wednesday, February 3, 2010
border-image
Wednesday, February 3, 2010
background-size
Wednesday, February 3, 2010
gradients
Wednesday, February 3, 2010
RGBA, HSL, HSLA colors
rgba (0,0,0,1) is the new black!
Wednesday, February 3, 2010
text-shadow
Wednesday, February 3, 2010
box-shadow
Wednesday, February 3, 2010
wordwrap
Wednesday, February 3, 2010
outline
Wednesday, February 3, 2010
columns
Wednesday, February 3, 2010
@font-face
Typographic freedom!
means
Wednesday, February 3, 2010
New selectorsCool
Wednesday, February 3, 2010
* 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
Wednesday, February 3, 2010
Some smash hits from the design blogs
Wednesday, February 3, 2010
30 tips for SemanticTM markup and classes
Wednesday, February 3, 2010
101 CSS resets
Wednesday, February 3, 2010
40 Grid layouts you must see
Wednesday, February 3, 2010
7 UP-lifting reasons to use CSS Sprites
Wednesday, February 3, 2010
Have the <TABLE>'s turned?
Wednesday, February 3, 2010
30 sites for great typography
Wednesday, February 3, 2010
RT @linkbait: Effortless drop shadows, gradients, and rounded corners
Wednesday, February 3, 2010
But this is not a talk about CSS
Follow @smashingmag for your CSS tips & tricks
Wednesday, February 3, 2010
REAL stylesheet innovationI want to talk about
Wednesday, February 3, 2010
HOW we write stylesheetsI want to talk about
Wednesday, February 3, 2010
how we MAINTAIN stylesheetsI want to talk about
Wednesday, February 3, 2010
how we SIMPLIFY stylesheetsI want to talk about
Wednesday, February 3, 2010
History of radioA brief
Wednesday, February 3, 2010
In the beginning...
Wednesday, February 3, 2010
AM
Wednesday, February 3, 2010
AM = Amplitude Modulation
Wednesday, February 3, 2010
Invented in 1906
Wednesday, February 3, 2010
Dominant format until 1978
Wednesday, February 3, 2010
Still rockin' after 100 years!
Wednesday, February 3, 2010
Then came
Wednesday, February 3, 2010
FM
Wednesday, February 3, 2010
FM = Frequency Modulation
Wednesday, February 3, 2010
Does not suffersusceptibility to atmospheric and
electrical interference.
Wednesday, February 3, 2010
Patented in 1933.Approved in 1941.Standardized in 1961.World domination in 1978.Unchallenged for thirty years.
Wednesday, February 3, 2010
Until...
Wednesday, February 3, 2010
XM
Wednesday, February 3, 2010
XM = Beyond FM
Hey, it was the 90s,Xs were in!
Wednesday, February 3, 2010
Founded in 1988.Launched in 2001.Merged with Sirius in 2009.
Wednesday, February 3, 2010
Superior sound.
Wednesday, February 3, 2010
No commercials.
Wednesday, February 3, 2010
Listen to Kasem's Top 40from coast to coast.
Wednesday, February 3, 2010
What the heck does this have to do with stylesheets, anyway?
Wednesday, February 3, 2010
I see some parallels.
Wednesday, February 3, 2010
History of web presentationA brief
Wednesday, February 3, 2010
In the beginning...
Wednesday, February 3, 2010
HTML
Wednesday, February 3, 2010
HTML + <TABLE>for layout
Wednesday, February 3, 2010
Invented in 1989
Wednesday, February 3, 2010
<TABLE> added in 1997
Wednesday, February 3, 2010
Still rockin' after 20 years!
Wednesday, February 3, 2010
Then came
Wednesday, February 3, 2010
HTML + CSS
Wednesday, February 3, 2010
HTML + CSS = Content + Presentation
Wednesday, February 3, 2010
CSS 1 published in 1996.
Wednesday, February 3, 2010
No more <FONT> tags.
Wednesday, February 3, 2010
font styling, color, borders & more!
Wednesday, February 3, 2010
CSS 2 published in 1998.
Wednesday, February 3, 2010
Improved selectors
Wednesday, February 3, 2010
* 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
Wednesday, February 3, 2010
... and even more stuff no browsers supported until years later.
Wednesday, February 3, 2010
Which brings us back to...
Wednesday, February 3, 2010
CSS 3 published in 20??
Wednesday, February 3, 2010
Web 2.0 brought new demands
Wednesday, February 3, 2010
Round corners
Wednesday, February 3, 2010
Drop shadows
Wednesday, February 3, 2010
Gradients
Wednesday, February 3, 2010
But we already covered that.
Wednesday, February 3, 2010
That's the 75 slide introduction
Wednesday, February 3, 2010
14 years of CSS has basically given us
Wednesday, February 3, 2010
more selectors + more properties
Wednesday, February 3, 2010
Until now...
Wednesday, February 3, 2010
Metaframeworks =high fidelity stylesheets
Wednesday, February 3, 2010
Metaframeworks output CSS.
Wednesday, February 3, 2010
Nested rules
Wednesday, February 3, 2010
table.users tr td a {color: #111}
table.users tr.alt td a {color: #333}
Nested rules - selectors
Wednesday, February 3, 2010
table.users tr td a color: #111 td.alt a color: #333
Nested rules - selectors
Look, Ma,no braces
or semicolons
But you can useboth if you wanna
Wednesday, February 3, 2010
table.users tr td color: #111 &.alt color: #333 &:hover color: #666
Nested rules - selectors
Wednesday, February 3, 2010
.users font: size: 1.2em style: italics weight: bold
Nested rules - properties
Wednesday, February 3, 2010
Variables
Wednesday, February 3, 2010
.user { background: #333; border-size: 2px;}
.owner { background: #333; border-size: 2px;}
.admin { background: #666; border-size: 4px;}
Variables
Wednesday, February 3, 2010
!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!
Wednesday, February 3, 2010
Mixins
Wednesday, February 3, 2010
.avatar { padding: 2px; border: solid 1px #ddd; position: absolute; top: 5px; left: 5px;}
p img { padding: 2px; border: solid 1px #ddd;}
Mixins
Wednesday, February 3, 2010
=frame(!padding_width = 2px, !border_color = #ddd) padding = !padding_width border: width: 1px style: solid color = !border_color
.avatar +frame position: absolute top: 5px left: 5px
p img +frame(1px, #ccc)
Mixins
defines the mixin
mixes in the rules
Wednesday, February 3, 2010
Imports
Wednesday, February 3, 2010
@import url(/css/reset.css)@import url(/css/typography.css)@import url(/css/layout.css)
Imports
parent + 3 @imports = 4 http requests
Wednesday, February 3, 2010
@import reset.sass # _reset.sass@import typography.sass # _typography.sass@import layout.sass # _layout.sass
Imports
Included at compile time - just one http request
Wednesday, February 3, 2010
Imports + Mixins
Now it gets fun!
Wednesday, February 3, 2010
@import compass/css3.sass
.callout +border-radius(5px) +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
Wednesday, February 3, 2010
css3/border_radius.sasscss3/inline_block.sasscss3/opacity.sasscss3/text_shadow.sasscss3/box_shadow.sasscss3/columns.sasscss3/box_sizing.sasscss3/gradient.sasscss3/background_clip.sasscss3/background_origin.sasscss3/background_size.sasscss3/font_face.sasscss3/transform.sasscss3/transition.sass
Compass CSS3 mixins
Wednesday, February 3, 2010
Bring your favorite CSS Framework
Wednesday, February 3, 2010
<div id='wrapper' class="container"> <div id='content' class="span-7 prepend-1"> <div id='main' class="container"> ... </div> <div id='featured' class="span-5 last"> ... </div> </div> <div id='sidebar' class="span-3 append-1 last"> ... </div></div>
A Blueprint example
boo
Wednesday, February 3, 2010
@import blueprint/reset.sass@import partials/base.sass@import blueprint@import blueprint/modules/scaffolding.sass
#wrapper +container #content +column(7) +append(1) #featured +column(5, true) #sidebar +column(3, true) +prepend(1)
A Blueprint example
Wednesday, February 3, 2010
Functions
Wednesday, February 3, 2010
Very. Powerful. Functions.
Wednesday, February 3, 2010
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-sassWednesday, February 3, 2010
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 2.4 color functions with alpha support!
http://nex-3.com/posts/89-powerful-color-manipulation-with-sassWednesday, February 3, 2010
Share your patterns
Wednesday, February 3, 2010
http://brandonmathis.com/projects/fancy-buttons/
Wednesday, February 3, 2010
Image sprites
Wednesday, February 3, 2010
EXAMPLE 1
a.twitter +sprite-img("icons-32.png", 1)a.facebook +sprite-img("icons-32png", 2)...
EXAMPLE 2a +sprite-background("icons-32.png") a.twitter +sprite-column(1) a.facebook +sprite-row(2) ...
Image sprites
Wednesday, February 3, 2010
Who makes this syntactic sugar?
Wednesday, February 3, 2010
Sass and Compass
Wednesday, February 3, 2010
$ sudo gem install haml$ sudo gem install compass --pre
CALL IT FROM THE COMMAND LINE
$ sass screen.sass screen.css
OR COMPASS-IZE YOUR PROJECT
$ compass --rails -f blueprint
OR WATCH A FOLDER
$ compass --watch
Sass and Compass
Wednesday, February 3, 2010
$ 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
Wednesday, February 3, 2010
LESS
Wednesday, February 3, 2010
$ sudo gem install less
CALL IT FROM THE COMMAND LINE
$ lessc screen.less
GRAB THE RAILS PLUGIN
$ script/plugin install git://github.com/cloudhead/more.git
Get LESS
Wednesday, February 3, 2010
@the-border: 1px;@base-color: #111;
#header { color: @base-color * 3; border-left: @the-border; border-right: @the-border * 2;}
#footer { color: (@base-color + #111) * 1.5;}
Using LESS - variables
Wednesday, February 3, 2010
.rounded_corners (@radius: 5px) { -moz-border-radius: @radius; -webkit-border-radius: @radius; border-radius: @radius;}
#header { .rounded_corners;}
#footer { .rounded_corners(10px);}
Using LESS - mixins
Wednesday, February 3, 2010
#header { color: red; a { font-weight: bold; text-decoration: none; }}
Using LESS - nested rules
Wednesday, February 3, 2010
CSS
logo wins
best in show!
}{
Wednesday, February 3, 2010
Works with PHP
Wednesday, February 3, 2010
So that's another meetup
Wednesday, February 3, 2010
What's the future?
Wednesday, February 3, 2010
First, grow the category
Wednesday, February 3, 2010
Wednesday, February 3, 2010
Hang in there,only six more slides!
http://www.flickr.com/photos/szacharias/4073373487/sizes/l/
Wednesday, February 3, 2010
Next, recruit some talent
Wednesday, February 3, 2010
Seek designer converts
Wednesday, February 3, 2010
Watch the egos
Wednesday, February 3, 2010
Continue to push the envelope
Wednesday, February 3, 2010
Mind the gap
Wednesday, February 3, 2010
Resources
http://compass-style.orghttp://sass-lang.comhttp://lesscss.orghttp://xcss.antpaw.org
http://wynnnetherland.com
and thanks for having me!
Questions? I'm @pengwynn on Twitter
the newish blog
Wednesday, February 3, 2010