Post on 28-Jan-2015
description
ACCELERATED STYLESHEETS
WYNN NETHERLANDNATHAN SMITH
...or more style with less typing
CSS3 is BIG
New propertiesHot
border-radius
border-image
www.zurb.com/playground/awesome-overlays
background-size
gradients
RGBA, HSL, HSLA colors
rgba (0,0,0,1) is the new black!
text-shadow
box-shadow
wordwrap
outline
columns
@font-face
Typographic freedom!
means
New selectorsCool
* 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
WE CSS
This is not a talk about CSS.
We think you write too much CSS.
You have an ADDICTION.
⌘
⌘
⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘
⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘
⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘
It’s time to ⎋.
“Design web systems, not just web pages or web sites.”
— Todd Nienkerk aka @toddrossco-founder, FourKitchens.com
REAL stylesheet innovationWe want to talk about
HOW we write stylesheetsWe want to talk about
how we MAINTAIN stylesheetsWe want to talk about
how we SIMPLIFY stylesheetsWe want to talk about
when OLD SCHOOL beats the NEW SHINYWe want to talk about
CSS FrameworksTool #1
Rapidly prototype your layouts
Examples:
Percentage-based grid, screenshot in Firefox 4.0http://host.sonspring.com/yui3_grid
Understand the underlying CSSTools. Not crutches.
JavaScriptTool #2
JavaScript? You mean like jQuery?
What’s JavaScript got to do with CSS?
Mobile
Responsive Design & Media Queries
Adapt.js
Adapt.js - Serve 960’s (or any) CSS dynamically
http://adapt.960.gs
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>
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>
Forms
Formalize
Sass & CompassTool #3
“GET OFF MY LAWN.”
Nathan SmithCreator, 960.gsBig Design Speaker(and Reformed Curmudgeon)
History of web presentationA brief
In the beginning...
HTML
HTML + <TABLE>for layout
HTML was invented in 1989
<TABLE> added in 1997
Still rockin' after 20 years!
Then came
HTML + CSS
HTML + CSS = Content + Presentation
CSS 1 published in 1996.
No more <FONT> tags.
font styling, color, borders & more!
CSS 2 published in 1998.
Improved 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
CSS2 selectors
... and even more stuff no browsers supported until years later.
Which brings us back to...
CSS 3 published in 20__?
“Web 2.0” brought new demands
Round corners
Drop shadows
Gradients
But we already covered that.
That's the 70+ slide introductionTitles are the new bullets.
14 years of CSS has basically given us
more selectors + more properties
Until now...
Metaframeworks =high fidelity stylesheets
Metaframeworks output CSS.
Nested rules
table.users tr td {background: #111}
table.users tr td a {color: #333}
Nested rules - selectors
table.users { tr { td { background: #d1d1d; a { color: #111; } } }}
Nested rules - selectors
table.users { tr { td { color: #111; &.alt { color: #333; } &:hover { color: #666; } } }}
Nested rules - selectors
.users { font: { size: 1.2em; style: italics; weight: bold; }}
Nested rules - properties
Syntax options
table.users { tr { td { background: #d1d1d; a { color: #111; } } }}
Syntax options - SCSS Sassy CSS!
table.users tr td background: #d1d1d a color: #111
Syntax options - Indented I ♥ whitespace
Variables
.user { background: #333; border-size: 2px;}
.owner { background: #333; border-size: 2px;}
.admin { background: #666; border-size: 4px;}
Variables
$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!
Mixins
.avatar { padding: 2px; border: solid 1px #ddd; position: absolute; top: 5px; left: 5px;}
p img { padding: 2px; border: solid 1px #ddd;}
Mixins
@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
Extend
.flash { padding: 5px; border-width: 1px; font-weight: bold;}
.error { color: #8a1f11; background: #fbe3e4;}
.notice { color: #514721; background: #fff6bf;}
Mixins
.flash { padding: 5px; border-width: 1px; font-weight: bold;}
.error { @extend .flash; color: #8a1f11; background: #fbe3e4;}
.notice { @extend .flash; color: #514721; background: #fff6bf;}
Mixins
.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
Imports
@import url(/css/reset.css)@import url(/css/typography.css)@import url(/css/layout.css)
Imports
parent + 3 @imports = 4 HTTP requests
@import "reset.scss" # _reset.scss@import "typography" # _typography.scss@import "layout.css" # url(layout.css)
Imports
Included at compile time - just one http request
Imports + Mixins
Now it gets fun!
A brief detour
“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
Ummm. Not so fast.
@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
“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
Solutions?
beta-new-css8-property-dillyisn't that just like not having it?
...and we're back.
Vendor specific stylesheets
Maybe. But I'd like to retain Internet Explorer's special status unto itself
CSS preprocesorsHey, funny you should ask!
Bring your favorite CSS Framework
<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?
#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
Look, Ma! No math!
Functions
Very. Powerful. Functions.
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
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
Blueprint
Blueprint★ Buttons
★ Colors
★ Debug
★ Fancy Type
★ Form
★ Grid
★ Interaction
★ Internet Explorer
★ Link Icons
★ Liquid
★ Reset
★ Rtl
★ Scaffolding
★ Typography
★ Utilities
CSS3
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
Image sprites
@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®
URL helpers
#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
stylesheet-url($path)
font-url($path)
image-url($path)
URL helpers
Stats
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 || --------------------------------- | ----- | ---------- | -------------- | ----------- | --------- | -------------- |
Share your patterns
http://brandonmathis.com/projects/fancy-buttons/
@import "fancy-buttons"button,a.button +fancy-button(#2966a8)
compass-960
$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
$ 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
compass-wordpress
$ 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
compass-formalize
$ 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
Isn’t she Sassy, folks?
GETTHEBOOK.
sass40Save 40% and get early access!
Sadly, sass100 is not a valid code.
DEMOand code spelunking