Accelerated Stylesheets
Upcoming SlideShare
Loading in...5
×
 

Accelerated Stylesheets

on

  • 3,175 views

 

Statistics

Views

Total Views
3,175
Views on SlideShare
3,171
Embed Views
4

Actions

Likes
8
Downloads
52
Comments
1

1 Embed 4

https://twitter.com 4

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Accelerated Stylesheets Accelerated Stylesheets Presentation Transcript

  • ACCELERATED STYLESHEETS ...or more style with less typing NATHAN SMITH WYNN NETHERLAND
  • CSS3 is BIG
  • Hot New properties
  • border-radius
  • border-image
  • www.zurb.com/playground/awesome-overlays
  • background-size
  • gradients
  • RGBA, HSL, HSLA colorsrgba (0,0,0,1) is the new black!
  • text-shadow
  • box-shadow
  • wordwrap
  • outline
  • columns
  • @font-face meansTypographic freedom!
  • Cool New selectors
  • 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, pleaseE[attribute=value] :last-childE[attribute~=value] :only-childE[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
  • 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 justweb pages or web sites.” — Todd Nienkerk aka @toddross co-founder, FourKitchens.com
  • We want to talk about REAL stylesheet innovation
  • We want to talk about HOW we write stylesheets
  • We want to talk about how we MAINTAIN stylesheets
  • We want to talk about how we SIMPLIFY stylesheets
  • We want to talk about when OLD SCHOOL beats the NEW SHINY
  • Tool #1 CSS Frameworks
  • Rapidly prototype your layouts
  • Examples:
  • Percentage-based grid, screenshot in Firefox 4.0http://host.sonspring.com/yui3_grid
  • Understand the underlying CSS Tools. Not crutches.
  • Tool #2 JavaScript
  • 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
  • Tool #3 Sass & Compass
  • “GET OFF MY LAWN.” Nathan Smith Creator, 960.gs Big Design Speaker (and Reformed Curmudgeon)
  • A brief History of web presentation
  • In the beginning...
  • HTML
  • for layoutHTML + <TABLE>
  • 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
  • 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
  • ... 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.
  • Thats the 70+ slide introduction Titles 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
  • Nested rules - selectorstable.users tr td {background: #111}table.users tr td a {color: #333}
  • Nested rules - selectorstable.users { tr { td { background: #d1d1d; a { color: #111; } } }}
  • Nested rules - selectorstable.users { tr { td { color: #111; &.alt { color: #333; } &:hover { color: #666; } } }}
  • Nested rules - properties.users { font: { size: 1.2em; style: italics; weight: bold; }}
  • Syntax options
  • Syntax options - SCSS Sassy CSS!table.users { tr { td { background: #d1d1d; a { color: #111; } } }}
  • Syntax options - Indented I whitespacetable.users tr td background: #d1d1d a color: #111
  • Variables
  • 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;} and colo r mixing!.admin { Ev e n ma t h ! background: $gray + #333; border-size: $default_border + 2px;}
  • Mixins
  • 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: { fines the mixin de width: 1px; style: solid; color $border_color; }}.avatar { ru le s he in t @include frame; es mix position: absolute; top: 5px; left: 5px;}p img { @include frame(1px, #ccc);}
  • Extend
  • Mixins.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; } now we can use a single class in our markup
  • Imports
  • Imports@import url(/css/reset.css)@import url(/css/typography.css)@import url(/css/layout.css) parent + 3 @imports = 4 HTTP requests
  • Imports@import "reset.scss" # _reset.scss@import "typography" # _typography.scss@import "layout.css" # url(layout.css) 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 noproblem, and they are actively harming webstandards.” — Peter-Paul Koch aka @ppkhttp://www.quirksmode.org/blog/archives/2010/03/css_vendor_pref.html
  • Ummm. Not so fast.
  • Compass CSS3 mixins@import "compass/css3.scss";.callout { @include border-radius(5px); @include linear-gradient("left top", "left bottom", #fff, #ddd);}.callout { -moz-border-radius: 5px; very different syntax -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));}
  • “Well, reactions to my proposal to abolishvendor prefixes are mixed, and I might haveovershot my target here.” -Peter-Paul Koch aka @ppkhttp://www.quirksmode.org/blog/archives/2010/03/css_vendor_pref_1.html
  • Solutions?
  • isnt that just like not having it?beta-new-css8-property-dilly ...and were back.
  • Vendor specific stylesheets Maybe. But Id like to retainInternet Explorers special status unto itself
  • Hey, funny you should ask! CSS preprocesors
  • Bring your favorite CSS Framework
  • A Blueprint example<div id= "wrapper" class="container"> <div id="content" class="span-7 prepend-1"> <div id="main"> / Yay? ... </div> boo? <div id="featured" class="span-5 last"> ... </div> </div> <div id="sidebar" class="span-3 append-1 last"> ... </div> </div></div>
  • A Blueprint example#wrapper { @include container; #content { @include column(7); @include append(1); #featured { @include column(5, true); } } #sidebar { @include column(3, true); @include prepend(1); }}
  • Look, Ma! No math!
  • Functions
  • Very. Powerful. Functions.
  • Sass 2.4 color functionshue(#cc3) => 60degsaturation(#cc3) => 60%lightness(#cc3) => 50%adjust-hue(#cc3, 20deg) => #9c3saturate(#cc3, 10%) => #d9d926desaturate(#cc3, 10%) => #bfbf40lighten(#cc3, 10%) => #d6d65cdarken(#cc3, 10%) => #a3a329grayscale(#cc3) => desaturate(#cc3, 100%) = #808080complement(#cc3) => adjust-hue(#cc3, 180deg) = #33cmix(#cc3, #00f) => #e56619mix(#cc3, #00f, 10%) => #f91405mix(#cc3, #00f, 90%) => #d1b72dhttp://nex-3.com/posts/89-powerful-color-manipulation-with-sass
  • with alpha support!Sass color functionsmix(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.75opacify(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)http://nex-3.com/posts/89-powerful-color-manipulation-with-sass
  • Blueprint
  • Blueprint ★ Buttons ★ Link Icons ★ Colors ★ Liquid ★ Debug ★ Print ★ Fancy Type ★ Reset ★ Form ★ Rtl ★ Grid ★ Scaffolding ★ Interaction ★ Typography ★ Internet Explorer ★ Utilities
  • CSS3
  • CSS3 ★ Appearance ★ Gradient ★ Background Clip ★ Images ★ Background Origin ★ Inline Block ★ Background Size ★ Opacity ★ Border Radius ★ Shared Utilities ★ Box ★ Text Shadow ★ Box Shadow ★ Transform ★ Box Sizing ★ Transform (legacy) ★ CSS3 Pie ★ Transition ★ Columns ★ Font Face
  • Image sprites
  • I like the Sprite in you Image sprites ® 1. @import "icon/*.png"@import "icon/*.png".actions 2. public/images/icon/new.png public/images/icon/edit.png .new public/images/icon/save.png +icon-sprite(new) public/images/icon/delete.png .edit +icon-sprite(edit) .save .icon-sprite, +icon-sprite(save) .actions .new, .delete .actions .edit, +icon-sprite(delete) .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; } 3. .actions .delete { background-position: 0 0; }
  • URL helpers
  • URL helpers#nav background: image-url("nav_bg.png") repeat-x top centerDEVELOPMENT#nav { background: url("/images/nav_bg.png") repeat-x top center; v elopment, ths for de} relative pa productionPRODUCTION a bsolute for#nav { background: url("http://assets.example.com/images/nav_bg.png")repeat-x top center;}
  • URL helpersstylesheet-url($path)font-url($path)image-url($path)
  • 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
  • Compass 960 $ninesixty-columns: 16 #wrap +grid-container #left-nav +alpha +grid(5) #main-content +grid-prefix(1) +grid(10) +omegahttps://github.com/chriseppstein/compass-960-plugin
  • Sass & Compass$ gem install sass$ gem install compassCall it from the command line$ sass watch screen.scssCompass-ize your project$ compass init rails -f blueprintWatch a folder$ compass watch
  • compass-wordpress
  • shameless plugCompass and WordPress$ gem install compass-wordpressCrank out a new Wordpress theme$ compass -r compass-wordpress -f wordpress  -p thematic  --sass-dir=sass --css-dir=css -s compressed my_awesome_themeAutocompile your changes$ compass watch
  • compass-formalize
  • shameless plug #2Compass and Formalize$ gem install compass_formalize$ compass create my-project -r compass_formalizecompass install formalize/dojocompass install formalize/extjscompass install formalize/jquery And one of thesecompass install formalize/mootoolscompass install formalize/prototypecompass install formalize/yui
  • Isn’t she Sassy, folks?GETTHEBOOK.
  • Save 40% and get early access! sass40Sadly, sass100 is not a valid code.
  • DEMOand code spelunking