accelerated stylesheets
DESCRIPTION
TRANSCRIPT
![Page 1: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/1.jpg)
ACCELERATED STYLESHEETS
WYNN NETHERLANDNATHAN SMITH
...or more style with less typing
![Page 2: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/2.jpg)
CSS3 is BIG
![Page 3: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/3.jpg)
New propertiesHot
![Page 4: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/4.jpg)
border-radius
![Page 5: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/5.jpg)
border-image
![Page 6: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/6.jpg)
www.zurb.com/playground/awesome-overlays
![Page 7: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/7.jpg)
background-size
![Page 8: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/8.jpg)
gradients
![Page 9: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/9.jpg)
RGBA, HSL, HSLA colors
rgba (0,0,0,1) is the new black!
![Page 10: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/10.jpg)
text-shadow
![Page 11: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/11.jpg)
box-shadow
![Page 12: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/12.jpg)
wordwrap
![Page 13: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/13.jpg)
outline
![Page 14: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/14.jpg)
columns
![Page 15: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/15.jpg)
@font-face
Typographic freedom!
means
![Page 16: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/16.jpg)
New selectorsCool
![Page 17: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/17.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
![Page 18: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/18.jpg)
WE CSS
![Page 19: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/19.jpg)
This is not a talk about CSS.
![Page 20: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/20.jpg)
We think you write too much CSS.
![Page 21: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/21.jpg)
You have an ADDICTION.
![Page 22: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/22.jpg)
⌘
![Page 23: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/23.jpg)
⌘
![Page 24: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/24.jpg)
⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘
⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘
⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘
![Page 25: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/25.jpg)
It’s time to ⎋.
![Page 26: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/26.jpg)
“Design web systems, not just web pages or web sites.”
— Todd Nienkerk aka @toddrossco-founder, FourKitchens.com
![Page 27: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/27.jpg)
REAL stylesheet innovationWe want to talk about
![Page 28: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/28.jpg)
HOW we write stylesheetsWe want to talk about
![Page 29: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/29.jpg)
how we MAINTAIN stylesheetsWe want to talk about
![Page 30: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/30.jpg)
how we SIMPLIFY stylesheetsWe want to talk about
![Page 31: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/31.jpg)
when OLD SCHOOL beats the NEW SHINYWe want to talk about
![Page 32: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/32.jpg)
CSS FrameworksTool #1
![Page 33: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/33.jpg)
Rapidly prototype your layouts
![Page 34: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/34.jpg)
Examples:
![Page 37: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/37.jpg)
Percentage-based grid, screenshot in Firefox 4.0http://host.sonspring.com/yui3_grid
![Page 38: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/38.jpg)
Understand the underlying CSSTools. Not crutches.
![Page 39: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/39.jpg)
JavaScriptTool #2
![Page 40: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/40.jpg)
JavaScript? You mean like jQuery?
![Page 41: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/41.jpg)
What’s JavaScript got to do with CSS?
![Page 42: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/42.jpg)
Mobile
![Page 43: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/43.jpg)
Responsive Design & Media Queries
![Page 44: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/44.jpg)
Adapt.js
![Page 45: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/45.jpg)
Adapt.js - Serve 960’s (or any) CSS dynamically
http://adapt.960.gs
![Page 46: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/46.jpg)
How to use Adapt.js = A human-readable config
<script>// Edit to suit your needs.var ADAPT_CONFIG = { // Where is your CSS? path: 'assets/css/',
// false = Only run once, when page first loads. // true = Change on window resize and page tilt. dynamic: true,
// Optional callback... myCallback(i, width) callback: myCallback,
// First range entry is the minimum. // Last range entry is the maximum. // Separate ranges by "to" keyword. range: [ '0px to 760px = mobile.css', '760px to 980px = 720.css', '980px to 1280px = 960.css', '1280px to 1600px = 1200.css', '1600px to 1920px = 1560.css', '1920px = fluid.css' ]};</script>
![Page 47: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/47.jpg)
How to use Adapt.js = A human-readable config
<script>// Edit to suit your needs.var ADAPT_CONFIG = { // Where is your CSS? path: 'assets/css/',
// false = Only run once, when page first loads. // true = Change on window resize and page tilt. dynamic: true,
// Optional callback... myCallback(i, width) callback: myCallback,
// First range entry is the minimum. // Last range entry is the maximum. // Separate ranges by "to" keyword. range: [ '0px to 760px = mobile.css', '760px to 980px = 720.css', '980px to 1280px = 960.css', '1280px to 1600px = 1200.css', '1600px to 1920px = 1560.css', '1920px = fluid.css' ]};</script>
![Page 48: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/48.jpg)
Forms
![Page 49: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/49.jpg)
Formalize
![Page 51: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/51.jpg)
Sass & CompassTool #3
![Page 52: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/52.jpg)
“GET OFF MY LAWN.”
Nathan SmithCreator, 960.gsBig Design Speaker(and Reformed Curmudgeon)
![Page 53: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/53.jpg)
History of web presentationA brief
![Page 54: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/54.jpg)
In the beginning...
![Page 55: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/55.jpg)
HTML
![Page 56: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/56.jpg)
HTML + <TABLE>for layout
![Page 57: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/57.jpg)
HTML was invented in 1989
![Page 58: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/58.jpg)
<TABLE> added in 1997
![Page 59: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/59.jpg)
Still rockin' after 20 years!
![Page 60: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/60.jpg)
Then came
![Page 61: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/61.jpg)
HTML + CSS
![Page 62: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/62.jpg)
HTML + CSS = Content + Presentation
![Page 63: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/63.jpg)
CSS 1 published in 1996.
![Page 64: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/64.jpg)
No more <FONT> tags.
![Page 65: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/65.jpg)
font styling, color, borders & more!
![Page 66: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/66.jpg)
CSS 2 published in 1998.
![Page 67: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/67.jpg)
Improved selectors
![Page 68: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/68.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
![Page 69: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/69.jpg)
... and even more stuff no browsers supported until years later.
![Page 70: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/70.jpg)
Which brings us back to...
![Page 71: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/71.jpg)
CSS 3 published in 20__?
![Page 72: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/72.jpg)
“Web 2.0” brought new demands
![Page 73: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/73.jpg)
Round corners
![Page 74: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/74.jpg)
Drop shadows
![Page 75: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/75.jpg)
Gradients
![Page 76: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/76.jpg)
But we already covered that.
![Page 77: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/77.jpg)
That's the 70+ slide introductionTitles are the new bullets.
![Page 78: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/78.jpg)
14 years of CSS has basically given us
![Page 79: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/79.jpg)
more selectors + more properties
![Page 80: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/80.jpg)
Until now...
![Page 81: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/81.jpg)
Metaframeworks =high fidelity stylesheets
![Page 82: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/82.jpg)
Metaframeworks output CSS.
![Page 83: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/83.jpg)
Nested rules
![Page 84: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/84.jpg)
table.users tr td {background: #111}
table.users tr td a {color: #333}
Nested rules - selectors
![Page 85: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/85.jpg)
table.users { tr { td { background: #d1d1d; a { color: #111; } } }}
Nested rules - selectors
![Page 86: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/86.jpg)
table.users { tr { td { color: #111; &.alt { color: #333; } &:hover { color: #666; } } }}
Nested rules - selectors
![Page 87: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/87.jpg)
.users { font: { size: 1.2em; style: italics; weight: bold; }}
Nested rules - properties
![Page 88: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/88.jpg)
Syntax options
![Page 89: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/89.jpg)
table.users { tr { td { background: #d1d1d; a { color: #111; } } }}
Syntax options - SCSS Sassy CSS!
![Page 90: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/90.jpg)
table.users tr td background: #d1d1d a color: #111
Syntax options - Indented I ♥ whitespace
![Page 91: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/91.jpg)
Variables
![Page 92: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/92.jpg)
.user { background: #333; border-size: 2px;}
.owner { background: #333; border-size: 2px;}
.admin { background: #666; border-size: 4px;}
Variables
![Page 93: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/93.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!
![Page 94: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/94.jpg)
Mixins
![Page 95: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/95.jpg)
.avatar { padding: 2px; border: solid 1px #ddd; position: absolute; top: 5px; left: 5px;}
p img { padding: 2px; border: solid 1px #ddd;}
Mixins
![Page 96: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/96.jpg)
@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
![Page 97: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/97.jpg)
Extend
![Page 98: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/98.jpg)
.flash { padding: 5px; border-width: 1px; font-weight: bold;}
.error { color: #8a1f11; background: #fbe3e4;}
.notice { color: #514721; background: #fff6bf;}
Mixins
![Page 99: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/99.jpg)
.flash { padding: 5px; border-width: 1px; font-weight: bold;}
.error { @extend .flash; color: #8a1f11; background: #fbe3e4;}
.notice { @extend .flash; color: #514721; background: #fff6bf;}
Mixins
![Page 100: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/100.jpg)
.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
![Page 101: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/101.jpg)
Imports
![Page 102: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/102.jpg)
@import url(/css/reset.css)@import url(/css/typography.css)@import url(/css/layout.css)
Imports
parent + 3 @imports = 4 HTTP requests
![Page 103: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/103.jpg)
@import "reset.scss" # _reset.scss@import "typography" # _typography.scss@import "layout.css" # url(layout.css)
Imports
Included at compile time - just one http request
![Page 104: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/104.jpg)
Imports + Mixins
Now it gets fun!
![Page 105: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/105.jpg)
A brief detour
![Page 106: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/106.jpg)
“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
![Page 107: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/107.jpg)
Ummm. Not so fast.
![Page 108: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/108.jpg)
@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
![Page 109: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/109.jpg)
“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
![Page 110: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/110.jpg)
Solutions?
![Page 111: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/111.jpg)
beta-new-css8-property-dillyisn't that just like not having it?
...and we're back.
![Page 112: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/112.jpg)
Vendor specific stylesheets
Maybe. But I'd like to retain Internet Explorer's special status unto itself
![Page 113: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/113.jpg)
CSS preprocesorsHey, funny you should ask!
![Page 114: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/114.jpg)
Bring your favorite CSS Framework
![Page 115: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/115.jpg)
<div id= "wrapper" class="container"> <div id="content" class="span-7 prepend-1"> <div id="main"> ... </div> <div id="featured" class="span-5 last"> ... </div> </div> <div id="sidebar" class="span-3 append-1 last"> ... </div> </div></div>
A Blueprint example
boo? / Yay?
![Page 116: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/116.jpg)
#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
![Page 117: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/117.jpg)
Look, Ma! No math!
![Page 118: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/118.jpg)
Functions
![Page 119: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/119.jpg)
Very. Powerful. Functions.
![Page 120: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/120.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-sass
![Page 121: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/121.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 color functions with alpha support!
http://nex-3.com/posts/89-powerful-color-manipulation-with-sass
![Page 122: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/122.jpg)
![Page 123: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/123.jpg)
Blueprint
![Page 124: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/124.jpg)
Blueprint★ Buttons
★ Colors
★ Debug
★ Fancy Type
★ Form
★ Grid
★ Interaction
★ Internet Explorer
★ Link Icons
★ Liquid
★ Reset
★ Rtl
★ Scaffolding
★ Typography
★ Utilities
![Page 125: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/125.jpg)
CSS3
![Page 126: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/126.jpg)
CSS3★ Appearance
★ Background Clip
★ Background Origin
★ Background Size
★ Border Radius
★ Box
★ Box Shadow
★ Box Sizing
★ CSS3 Pie
★ Columns
★ Font Face
★ Gradient
★ Images
★ Inline Block
★ Opacity
★ Shared Utilities
★ Text Shadow
★ Transform
★ Transform (legacy)
★ Transition
![Page 127: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/127.jpg)
Image sprites
![Page 128: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/128.jpg)
@import "icon/*.png"
.actions .new +icon-sprite(new) .edit +icon-sprite(edit) .save +icon-sprite(save) .delete +icon-sprite(delete)
Image sprites
.icon-sprite,
.actions .new,
.actions .edit,
.actions .save,
.actions .delete { background: url('/images/icon-34fe0604ab.png') no-repeat; }
.actions .new { background-position: 0 -64px; }
.actions .edit { background-position: 0 -32px; }
.actions .save { background-position: 0 -96px; }
.actions .delete { background-position: 0 0; }
@import "icon/*.png"
public/images/icon/new.pngpublic/images/icon/edit.pngpublic/images/icon/save.pngpublic/images/icon/delete.png
1.2.
3.
I like the Sprite in you®
![Page 129: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/129.jpg)
URL helpers
![Page 130: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/130.jpg)
#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
![Page 131: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/131.jpg)
stylesheet-url($path)
font-url($path)
image-url($path)
URL helpers
![Page 132: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/132.jpg)
Stats
![Page 133: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/133.jpg)
Stats| --------------------------------- | ----- | ---------- | -------------- | ----------- | --------- | -------------- || Filename | Rules | Properties | Mixins Defs | Mixins Used | CSS Rules | CSS Properties || --------------------------------- | ----- | ---------- | -------------- | ----------- | --------- | -------------- || app/stylesheets/_960.sass | 198 | 141 | 0 | 0 | -- | -- || app/stylesheets/_animation.sass | 2 | 2 | 0 | 0 | -- | -- || app/stylesheets/application.sass | 268 | 607 | 0 | 33 | 1131 | 3684 || app/stylesheets/_data_table.sass | 39 | 66 | 0 | 4 | -- | -- || app/stylesheets/_datepicker.sass | 125 | 242 | 0 | 0 | -- | -- || app/stylesheets/_formalize.sass | 82 | 78 | 0 | 4 | -- | -- || app/stylesheets/_forms.sass | 227 | 242 | 0 | 21 | -- | -- || app/stylesheets/ie.sass | 0 | 0 | 0 | 0 | 0 | 0 || app/stylesheets/_jscrollpane.sass | 20 | 43 | 0 | 0 | -- | -- || app/stylesheets/_prettify.sass | 16 | 16 | 0 | 0 | -- | -- || app/stylesheets/print.sass | 0 | 0 | 0 | 0 | 0 | 0 || app/stylesheets/_reset.sass | 111 | 18 | 0 | 0 | -- | -- || app/stylesheets/_text.sass | 27 | 18 | 0 | 0 | -- | -- || app/stylesheets/_tiptip.sass | 19 | 40 | 0 | 0 | -- | -- || app/stylesheets/_util.sass | 56 | 54 | 0 | 0 | -- | -- || app/stylesheets/_vars.sass | 0 | 6 | 2 | 0 | -- | -- || --------------------------------- | ----- | ---------- | -------------- | ----------- | --------- | -------------- || Total (16 files): | 1190 | 1573 | 2 | 62 | 1131 | 3684 || --------------------------------- | ----- | ---------- | -------------- | ----------- | --------- | -------------- |
![Page 134: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/134.jpg)
Share your patterns
![Page 135: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/135.jpg)
http://brandonmathis.com/projects/fancy-buttons/
![Page 136: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/136.jpg)
@import "fancy-buttons"button,a.button +fancy-button(#2966a8)
![Page 137: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/137.jpg)
compass-960
![Page 138: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/138.jpg)
$ninesixty-columns: 16
#wrap +grid-container #left-nav +alpha +grid(5) #main-content +grid-prefix(1) +grid(10) +omega
Compass 960
https://github.com/chriseppstein/compass-960-plugin
![Page 139: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/139.jpg)
$ gem install sass$ gem install compass
Call it from the command line$ sass watch screen.scss
Compass-ize your project$ compass init rails -f blueprint
Watch a folder$ compass watch
Sass & Compass
![Page 140: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/140.jpg)
compass-wordpress
![Page 141: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/141.jpg)
$ gem install compass-wordpress
Crank out a new 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
![Page 142: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/142.jpg)
compass-formalize
![Page 143: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/143.jpg)
$ gem install compass_formalize
$ compass create my-project -r compass_formalize
compass install formalize/dojo
compass install formalize/extjs
compass install formalize/jquery
compass install formalize/mootools
compass install formalize/prototype
compass install formalize/yui
Compass and Formalize shameless plug #2
And one of these
![Page 144: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/144.jpg)
Isn’t she Sassy, folks?
GETTHEBOOK.
![Page 145: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/145.jpg)
sass40Save 40% and get early access!
Sadly, sass100 is not a valid code.
![Page 146: Accelerated Stylesheets](https://reader033.vdocument.in/reader033/viewer/2022051515/54c7f76c4a7959fe278b45c0/html5/thumbnails/146.jpg)
DEMOand code spelunking