CSS Metaframeworks: King of all @mediaPresentation Transcript
meta
^
CSS FRAMEWORKS: KING OF ALL @media
Dallas.rb February 2, 2010
WYNNNETHERLAND
Wednesday, February 3, 2010
before we start
Wednesday, February 3, 2010
We need to know about your cool projects!
http://thechangelog.com @changelogshow
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
Hot
New properties
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
word
wrap
Wednesday, February 3, 2010
outline
Wednesday, February 3, 2010
columns
Wednesday, February 3, 2010
@font-face
means
Typographic freedom!
Wednesday, February 3, 2010
Cool
New selectors
Wednesday, February 3, 2010
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
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
I want to talk about
REAL stylesheet innovation
Wednesday, February 3, 2010
I want to talk about
HOW we write stylesheets
Wednesday, February 3, 2010
I want to talk about
how we MAINTAIN stylesheets
Wednesday, February 3, 2010
I want to talk about
how we SIMPLIFY stylesheets
Wednesday, February 3, 2010
A brief
History of radio
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 suffer
susceptibility 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
Hey, it w
as t h e 9 0
s,
X s w e re
in!
XM = Beyond FM
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 40
from 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
A brief
History of web presentation
Wednesday, February 3, 2010
In the beginning...
Wednesday, February 3, 2010
HTML
Wednesday, February 3, 2010
for layout
HTML + <TABLE>
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
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
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
Nested rules - selectors
table.users tr td a {color: #111}
table.users tr.alt td a {color: #333}
Wednesday, February 3, 2010
Nested rules - selectors
table.users Lo o k , Ma,
tr n o braces
td
a
color: #111 or semicolons
td.alt
a
color: #333
But you can use
both if you wanna
Wednesday, February 3, 2010
Mixins
=frame(!padding_width = 2px, !border_color = #ddd)
padding = !padding_width
border:
width: 1px
defines t he mixin
style: solid
color = !border_color
.avatar
+frame
position: absolute
top: 5px
mixes in t h e rule s
left: 5px
p img
+frame(1px, #ccc)
Wednesday, February 3, 2010
Imports
@import reset.sass # _reset.sass
@import typography.sass # _typography.sass
@import layout.sass # _layout.sass
Included at compile time -
just one http request
Wednesday, February 3, 2010
Imports + Mixins
Now it gets fun!
Wednesday, February 3, 2010
Compass CSS3 mixins
@import compass/css3.sass
.callout
+border-radius(5px)
+linear-gradient("left top", "left bottom", #fff, #ddd)
.callout { very different syntax
-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));
}
Wednesday, February 3, 2010
http://brandonmathis.com/projects/fancy-buttons/
Wednesday, February 3, 2010
Image sprites
Wednesday, February 3, 2010
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)
...
Wednesday, February 3, 2010
Who makes this syntactic sugar?
Wednesday, February 3, 2010
Sass and Compass
Wednesday, February 3, 2010
Sass and Compass
$ 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
Wednesday, February 3, 2010
Compass and WordPress shameless plug
$ 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
Wednesday, February 3, 2010
LESS
Wednesday, February 3, 2010
Get LESS
$ 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
Wednesday, February 3, 2010
Using LESS - mixins
.rounded_corners (@radius: 5px) {
-moz-border-radius: @radius;
-webkit-border-radius: @radius;
border-radius: @radius;
}
#header {
.rounded_corners;
}
#footer {
.rounded_corners(10px);
}
Wednesday, February 3, 2010
Using LESS - nested rules
#header {
color: red;
a {
font-weight: bold;
text-decoration: none;
}
}
Wednesday, February 3, 2010
logo wins
best in show!
}{CSS
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 an d thanks for having me!
http://compass-style.org
http://sass-lang.com
http://lesscss.org
http://xcss.antpaw.org
Questions? I'm @pengwynn on Twitter
http://wynnnetherland.com
the newish blog
Wednesday, February 3, 2010
3 years ago
CSS Metaframeworks - King of all @media from Wynn Netherland on Vimeo.
3 years ago