css metaframeworks: king of all @media
DESCRIPTION
Dallas.rb talk discussing trends in creating CSS stylesheets and the growing lineup of CSS Metaframeworks.TRANSCRIPT
![Page 1: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/1.jpg)
CSS FRAMEWORKS: KING OF ALL @media^Dallas.rb ★ February 2, 2010
WYNNNETHERLAND
meta
Wednesday, February 3, 2010
![Page 2: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/2.jpg)
before we start
Wednesday, February 3, 2010
![Page 3: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/3.jpg)
http://thechangelog.com @changelogshow
We need to know about your cool projects!
Wednesday, February 3, 2010
![Page 4: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/4.jpg)
Your project could end up here!
Wednesday, February 3, 2010
![Page 5: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/5.jpg)
thanks!
Wednesday, February 3, 2010
![Page 6: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/6.jpg)
Have you heard?
CSS3 is big
Wednesday, February 3, 2010
![Page 7: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/7.jpg)
New propertiesHot
Wednesday, February 3, 2010
![Page 8: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/8.jpg)
border-radius
Wednesday, February 3, 2010
![Page 9: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/9.jpg)
border-image
Wednesday, February 3, 2010
![Page 10: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/10.jpg)
background-size
Wednesday, February 3, 2010
![Page 11: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/11.jpg)
gradients
Wednesday, February 3, 2010
![Page 12: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/12.jpg)
RGBA, HSL, HSLA colors
rgba (0,0,0,1) is the new black!
Wednesday, February 3, 2010
![Page 13: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/13.jpg)
text-shadow
Wednesday, February 3, 2010
![Page 14: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/14.jpg)
box-shadow
Wednesday, February 3, 2010
![Page 15: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/15.jpg)
wordwrap
Wednesday, February 3, 2010
![Page 16: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/16.jpg)
outline
Wednesday, February 3, 2010
![Page 17: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/17.jpg)
columns
Wednesday, February 3, 2010
![Page 18: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/18.jpg)
@font-face
Typographic freedom!
means
Wednesday, February 3, 2010
![Page 19: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/19.jpg)
New selectorsCool
Wednesday, February 3, 2010
![Page 20: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/20.jpg)
* 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
![Page 21: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/21.jpg)
Some smash hits from the design blogs
Wednesday, February 3, 2010
![Page 22: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/22.jpg)
30 tips for SemanticTM markup and classes
Wednesday, February 3, 2010
![Page 23: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/23.jpg)
101 CSS resets
Wednesday, February 3, 2010
![Page 24: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/24.jpg)
40 Grid layouts you must see
Wednesday, February 3, 2010
![Page 25: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/25.jpg)
7 UP-lifting reasons to use CSS Sprites
Wednesday, February 3, 2010
![Page 26: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/26.jpg)
Have the <TABLE>'s turned?
Wednesday, February 3, 2010
![Page 27: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/27.jpg)
30 sites for great typography
Wednesday, February 3, 2010
![Page 28: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/28.jpg)
RT @linkbait: Effortless drop shadows, gradients, and rounded corners
Wednesday, February 3, 2010
![Page 29: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/29.jpg)
But this is not a talk about CSS
Follow @smashingmag for your CSS tips & tricks
Wednesday, February 3, 2010
![Page 30: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/30.jpg)
REAL stylesheet innovationI want to talk about
Wednesday, February 3, 2010
![Page 31: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/31.jpg)
HOW we write stylesheetsI want to talk about
Wednesday, February 3, 2010
![Page 32: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/32.jpg)
how we MAINTAIN stylesheetsI want to talk about
Wednesday, February 3, 2010
![Page 33: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/33.jpg)
how we SIMPLIFY stylesheetsI want to talk about
Wednesday, February 3, 2010
![Page 34: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/34.jpg)
History of radioA brief
Wednesday, February 3, 2010
![Page 35: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/35.jpg)
In the beginning...
Wednesday, February 3, 2010
![Page 36: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/36.jpg)
AM
Wednesday, February 3, 2010
![Page 37: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/37.jpg)
AM = Amplitude Modulation
Wednesday, February 3, 2010
![Page 38: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/38.jpg)
Invented in 1906
Wednesday, February 3, 2010
![Page 39: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/39.jpg)
Dominant format until 1978
Wednesday, February 3, 2010
![Page 40: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/40.jpg)
Still rockin' after 100 years!
Wednesday, February 3, 2010
![Page 41: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/41.jpg)
Then came
Wednesday, February 3, 2010
![Page 42: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/42.jpg)
FM
Wednesday, February 3, 2010
![Page 43: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/43.jpg)
FM = Frequency Modulation
Wednesday, February 3, 2010
![Page 44: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/44.jpg)
Does not suffersusceptibility to atmospheric and
electrical interference.
Wednesday, February 3, 2010
![Page 45: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/45.jpg)
Patented in 1933.Approved in 1941.Standardized in 1961.World domination in 1978.Unchallenged for thirty years.
Wednesday, February 3, 2010
![Page 46: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/46.jpg)
Until...
Wednesday, February 3, 2010
![Page 47: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/47.jpg)
XM
Wednesday, February 3, 2010
![Page 48: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/48.jpg)
XM = Beyond FM
Hey, it was the 90s,Xs were in!
Wednesday, February 3, 2010
![Page 49: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/49.jpg)
Founded in 1988.Launched in 2001.Merged with Sirius in 2009.
Wednesday, February 3, 2010
![Page 50: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/50.jpg)
Superior sound.
Wednesday, February 3, 2010
![Page 51: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/51.jpg)
No commercials.
Wednesday, February 3, 2010
![Page 52: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/52.jpg)
Listen to Kasem's Top 40from coast to coast.
Wednesday, February 3, 2010
![Page 53: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/53.jpg)
What the heck does this have to do with stylesheets, anyway?
Wednesday, February 3, 2010
![Page 54: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/54.jpg)
I see some parallels.
Wednesday, February 3, 2010
![Page 55: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/55.jpg)
History of web presentationA brief
Wednesday, February 3, 2010
![Page 56: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/56.jpg)
In the beginning...
Wednesday, February 3, 2010
![Page 57: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/57.jpg)
HTML
Wednesday, February 3, 2010
![Page 58: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/58.jpg)
HTML + <TABLE>for layout
Wednesday, February 3, 2010
![Page 59: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/59.jpg)
Invented in 1989
Wednesday, February 3, 2010
![Page 60: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/60.jpg)
<TABLE> added in 1997
Wednesday, February 3, 2010
![Page 61: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/61.jpg)
Still rockin' after 20 years!
Wednesday, February 3, 2010
![Page 62: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/62.jpg)
Then came
Wednesday, February 3, 2010
![Page 63: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/63.jpg)
HTML + CSS
Wednesday, February 3, 2010
![Page 64: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/64.jpg)
HTML + CSS = Content + Presentation
Wednesday, February 3, 2010
![Page 65: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/65.jpg)
CSS 1 published in 1996.
Wednesday, February 3, 2010
![Page 66: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/66.jpg)
No more <FONT> tags.
Wednesday, February 3, 2010
![Page 67: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/67.jpg)
font styling, color, borders & more!
Wednesday, February 3, 2010
![Page 68: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/68.jpg)
CSS 2 published in 1998.
Wednesday, February 3, 2010
![Page 69: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/69.jpg)
Improved selectors
Wednesday, February 3, 2010
![Page 70: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/70.jpg)
* 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
![Page 71: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/71.jpg)
... and even more stuff no browsers supported until years later.
Wednesday, February 3, 2010
![Page 72: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/72.jpg)
Which brings us back to...
Wednesday, February 3, 2010
![Page 73: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/73.jpg)
CSS 3 published in 20??
Wednesday, February 3, 2010
![Page 74: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/74.jpg)
Web 2.0 brought new demands
Wednesday, February 3, 2010
![Page 75: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/75.jpg)
Round corners
Wednesday, February 3, 2010
![Page 76: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/76.jpg)
Drop shadows
Wednesday, February 3, 2010
![Page 77: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/77.jpg)
Gradients
Wednesday, February 3, 2010
![Page 78: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/78.jpg)
But we already covered that.
Wednesday, February 3, 2010
![Page 79: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/79.jpg)
That's the 75 slide introduction
Wednesday, February 3, 2010
![Page 80: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/80.jpg)
14 years of CSS has basically given us
Wednesday, February 3, 2010
![Page 81: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/81.jpg)
more selectors + more properties
Wednesday, February 3, 2010
![Page 82: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/82.jpg)
Until now...
Wednesday, February 3, 2010
![Page 83: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/83.jpg)
Metaframeworks =high fidelity stylesheets
Wednesday, February 3, 2010
![Page 84: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/84.jpg)
Metaframeworks output CSS.
Wednesday, February 3, 2010
![Page 85: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/85.jpg)
Nested rules
Wednesday, February 3, 2010
![Page 86: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/86.jpg)
table.users tr td a {color: #111}
table.users tr.alt td a {color: #333}
Nested rules - selectors
Wednesday, February 3, 2010
![Page 87: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/87.jpg)
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
![Page 88: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/88.jpg)
table.users tr td color: #111 &.alt color: #333 &:hover color: #666
Nested rules - selectors
Wednesday, February 3, 2010
![Page 89: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/89.jpg)
.users font: size: 1.2em style: italics weight: bold
Nested rules - properties
Wednesday, February 3, 2010
![Page 90: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/90.jpg)
Variables
Wednesday, February 3, 2010
![Page 91: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/91.jpg)
.user { background: #333; border-size: 2px;}
.owner { background: #333; border-size: 2px;}
.admin { background: #666; border-size: 4px;}
Variables
Wednesday, February 3, 2010
![Page 92: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/92.jpg)
!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
![Page 93: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/93.jpg)
Mixins
Wednesday, February 3, 2010
![Page 94: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/94.jpg)
.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
![Page 95: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/95.jpg)
=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
![Page 96: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/96.jpg)
Imports
Wednesday, February 3, 2010
![Page 97: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/97.jpg)
@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
![Page 98: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/98.jpg)
@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
![Page 99: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/99.jpg)
Imports + Mixins
Now it gets fun!
Wednesday, February 3, 2010
![Page 100: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/100.jpg)
@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
![Page 101: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/101.jpg)
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
![Page 102: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/102.jpg)
Bring your favorite CSS Framework
Wednesday, February 3, 2010
![Page 103: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/103.jpg)
<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
![Page 104: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/104.jpg)
@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
![Page 105: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/105.jpg)
Functions
Wednesday, February 3, 2010
![Page 106: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/106.jpg)
Very. Powerful. Functions.
Wednesday, February 3, 2010
![Page 107: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/107.jpg)
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
![Page 108: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/108.jpg)
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
![Page 109: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/109.jpg)
Share your patterns
Wednesday, February 3, 2010
![Page 110: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/110.jpg)
http://brandonmathis.com/projects/fancy-buttons/
Wednesday, February 3, 2010
![Page 111: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/111.jpg)
Image sprites
Wednesday, February 3, 2010
![Page 112: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/112.jpg)
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
![Page 113: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/113.jpg)
Who makes this syntactic sugar?
Wednesday, February 3, 2010
![Page 114: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/114.jpg)
Sass and Compass
Wednesday, February 3, 2010
![Page 115: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/115.jpg)
$ 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
![Page 116: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/116.jpg)
$ 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
![Page 117: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/117.jpg)
LESS
Wednesday, February 3, 2010
![Page 118: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/118.jpg)
$ 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
![Page 119: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/119.jpg)
@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
![Page 120: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/120.jpg)
.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
![Page 121: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/121.jpg)
#header { color: red; a { font-weight: bold; text-decoration: none; }}
Using LESS - nested rules
Wednesday, February 3, 2010
![Page 122: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/122.jpg)
CSS
logo wins
best in show!
}{
Wednesday, February 3, 2010
![Page 123: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/123.jpg)
Works with PHP
Wednesday, February 3, 2010
![Page 124: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/124.jpg)
So that's another meetup
Wednesday, February 3, 2010
![Page 125: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/125.jpg)
What's the future?
Wednesday, February 3, 2010
![Page 126: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/126.jpg)
First, grow the category
Wednesday, February 3, 2010
![Page 127: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/127.jpg)
Wednesday, February 3, 2010
![Page 128: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/128.jpg)
Hang in there,only six more slides!
http://www.flickr.com/photos/szacharias/4073373487/sizes/l/
Wednesday, February 3, 2010
![Page 129: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/129.jpg)
Next, recruit some talent
Wednesday, February 3, 2010
![Page 130: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/130.jpg)
Seek designer converts
Wednesday, February 3, 2010
![Page 131: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/131.jpg)
Watch the egos
Wednesday, February 3, 2010
![Page 132: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/132.jpg)
Continue to push the envelope
Wednesday, February 3, 2010
![Page 133: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/133.jpg)
Mind the gap
Wednesday, February 3, 2010
![Page 134: CSS Metaframeworks: King of all @media](https://reader033.vdocuments.mx/reader033/viewer/2022051608/53f13d498d7f72104c8b4757/html5/thumbnails/134.jpg)
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