Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Accelerated Stylesheets

Avatar for Wynn Netherland Wynn Netherland
September 17, 2011

Accelerated Stylesheets

Avatar for Wynn Netherland

Wynn Netherland

September 17, 2011
Tweet

More Decks by Wynn Netherland

Other Decks in Design

Transcript

  1. * 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
  2. ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘

    ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘
  3. “Design web systems, not just web pages or web sites.”

    — Todd Nienkerk aka @toddross co-founder, FourKitchens.com
  4. 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>
  5. 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>
  6. * 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
  7. table.users { tr { td { background: #d1d1d; a {

    color: #111; } } } } Nested rules - selectors
  8. table.users { tr { td { color: #111; &.alt {

    color: #333; } &:hover { color: #666; } } } } Nested rules - selectors
  9. table.users { tr { td { background: #d1d1d; a {

    color: #111; } } } } Syntax options - SCSS Sassy CSS!
  10. .user { background: #333; border-size: 2px; } .owner { background:

    #333; border-size: 2px; } .admin { background: #666; border-size: 4px; } Variables
  11. $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!
  12. .avatar { padding: 2px; border: solid 1px #ddd; position: absolute;

    top: 5px; left: 5px; } p img { padding: 2px; border: solid 1px #ddd; } Mixins
  13. @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
  14. .flash { padding: 5px; border-width: 1px; font-weight: bold; } .error

    { color: #8a1f11; background: #fbe3e4; } .notice { color: #514721; background: #fff6bf; } Mixins
  15. .flash { padding: 5px; border-width: 1px; font-weight: bold; } .error

    { @extend .flash; color: #8a1f11; background: #fbe3e4; } .notice { @extend .flash; color: #514721; background: #fff6bf; } Mixins
  16. .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
  17. @import "reset.scss" # _reset.scss @import "typography" # _typography.scss @import "layout.css"

    # url(layout.css) Imports Included at compile time - just one http request
  18. “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
  19. @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
  20. “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
  21. <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?
  22. #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
  23. hue(#cc3) => 60deg saturation(#cc3) => 60% lightness(#cc3) => 50% adjust-hue(#cc3,

    20deg) => #9c3 saturate(#cc3, 10%) => #d9d926 desaturate(#cc3, 10%) => #bfbf40 lighten(#cc3, 10%) => #d6d65c darken(#cc3, 10%) => #a3a329 grayscale(#cc3) => desaturate(#cc3, 100%) = #808080 complement(#cc3) => adjust-hue(#cc3, 180deg) = #33c mix(#cc3, #00f) => #e56619 mix(#cc3, #00f, 10%) => #f91405 mix(#cc3, #00f, 90%) => #d1b72d Sass 2.4 color functions http://nex-3.com/posts/89-powerful-color-manipulation-with-sass
  24. 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.75 opacity(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
  25. Blueprint ★ Buttons ★ Colors ★ Debug ★ Fancy Type

    ★ Form ★ Grid ★ Interaction ★ Internet Explorer ★ Link Icons ★ Liquid ★ Print ★ Reset ★ Rtl ★ Scaffolding ★ Typography ★ Utilities
  26. 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
  27. @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.png public/images/icon/edit.png public/images/icon/save.png public/images/icon/delete.png 1. 2. 3. I like the Sprite in you®
  28. #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
  29. 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 | | --------------------------------- | ----- | ---------- | -------------- | ----------- | --------- | -------------- |
  30. $ 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
  31. $ 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
  32. $ 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