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

Accelerated Stylesheets

7e19cd5486b5d6dc1ef90e671ba52ae0?s=47 Wynn Netherland
September 17, 2011

Accelerated Stylesheets

7e19cd5486b5d6dc1ef90e671ba52ae0?s=128

Wynn Netherland

September 17, 2011
Tweet

Transcript

  1. ACCELERATED STYLESHEETS WYNN NETHERLAND NATHAN SMITH ...or more style with

    less typing
  2. CSS3 is BIG

  3. New properties Hot

  4. border-radius

  5. border-image

  6. www.zurb.com/playground/awesome-overlays

  7. background-size

  8. gradients

  9. RGBA, HSL, HSLA colors rgba (0,0,0,1) is the new black!

  10. text-shadow

  11. box-shadow

  12. word wrap

  13. outline

  14. columns

  15. @font-face Typographic freedom! means

  16. New selectors Cool

  17. * 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
  18. WE  CSS

  19. This is not a talk about CSS.

  20. We think you write too much CSS.

  21. You have an ADDICTION.

  22. ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘

    ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘ ⌘
  23. It’s time to ⎋.

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

    — Todd Nienkerk aka @toddross co-founder, FourKitchens.com
  25. REAL stylesheet innovation We want to talk about

  26. HOW we write stylesheets We want to talk about

  27. how we MAINTAIN stylesheets We want to talk about

  28. how we SIMPLIFY stylesheets We want to talk about

  29. when OLD SCHOOL beats the NEW SHINY We want to

    talk about
  30. CSS Frameworks Tool #1

  31. Rapidly prototype your layouts

  32. Examples:

  33. None
  34. None
  35. Percentage-based grid, screenshot in Firefox 4.0 http://host.sonspring.com/yui3_grid

  36. Understand the underlying CSS Tools. Not crutches.

  37. JavaScript Tool #2

  38. JavaScript? You mean like jQuery?

  39. What’s JavaScript got to do with CSS?

  40. Mobile

  41. Responsive Design & Media Queries

  42. Adapt.js

  43. Adapt.js - Serve 960’s (or any) CSS dynamically http://adapt.960.gs

  44. 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>
  45. 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>
  46. Forms

  47. Formalize

  48. None
  49. Sass & Compass Tool #3

  50. “GET OFF MY LAWN.” Nathan Smith Creator, 960.gs Big Design

    Speaker (and Reformed Curmudgeon)
  51. History of web presentation A brief

  52. In the beginning...

  53. HTML

  54. HTML + <TABLE> for layout

  55. HTML was invented in 1989

  56. <TABLE> added in 1997

  57. Still rockin' after 20 years!

  58. Then came

  59. HTML + CSS

  60. HTML + CSS = Content + Presentation

  61. CSS 1 published in 1996.

  62. No more <FONT> tags.

  63. font styling, color, borders & more!

  64. CSS 2 published in 1998.

  65. Improved selectors

  66. * 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
  67. ... and even more stuff no browsers supported until years

    later.
  68. Which brings us back to...

  69. CSS 3 published in 20__?

  70. “Web 2.0” brought new demands

  71. Round corners

  72. Drop shadows

  73. Gradients

  74. But we already covered that.

  75. That's the 70+ slide introduction Titles are the new bullets.

  76. 14 years of CSS has basically given us

  77. more selectors + more properties

  78. Until now...

  79. Metaframeworks = high fidelity stylesheets

  80. Metaframeworks output CSS.

  81. Nested rules

  82. table.users tr td {background: #111} table.users tr td a {color:

    #333} Nested rules - selectors
  83. table.users { tr { td { background: #d1d1d; a {

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

    color: #333; } &:hover { color: #666; } } } } Nested rules - selectors
  85. .users { font: { size: 1.2em; style: italics; weight: bold;

    } } Nested rules - properties
  86. Syntax options

  87. table.users { tr { td { background: #d1d1d; a {

    color: #111; } } } } Syntax options - SCSS Sassy CSS!
  88. table.users tr td background: #d1d1d a color: #111 Syntax options

    - Indented I — whitespace
  89. Variables

  90. .user { background: #333; border-size: 2px; } .owner { background:

    #333; border-size: 2px; } .admin { background: #666; border-size: 4px; } Variables
  91. $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!
  92. Mixins

  93. .avatar { padding: 2px; border: solid 1px #ddd; position: absolute;

    top: 5px; left: 5px; } p img { padding: 2px; border: solid 1px #ddd; } Mixins
  94. @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
  95. Extend

  96. .flash { padding: 5px; border-width: 1px; font-weight: bold; } .error

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

    { @extend .flash; color: #8a1f11; background: #fbe3e4; } .notice { @extend .flash; color: #514721; background: #fff6bf; } Mixins
  98. .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
  99. Imports

  100. @import url(/css/reset.css) @import url(/css/typography.css) @import url(/css/layout.css) Imports parent + 3

    @imports = 4 HTTP requests
  101. @import "reset.scss" # _reset.scss @import "typography" # _typography.scss @import "layout.css"

    # url(layout.css) Imports Included at compile time - just one http request
  102. Imports + Mixins Now it gets fun!

  103. A brief detour

  104. “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
  105. Ummm. Not so fast.

  106. @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
  107. “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
  108. Solutions?

  109. beta-new-css8-property-dilly isn't that just like not having it? ...and we're

    back.
  110. Vendor specific stylesheets Maybe. But I'd like to retain Internet

    Explorer's special status unto itself
  111. CSS preprocesors Hey, funny you should ask!

  112. Bring your favorite CSS Framework

  113. <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?
  114. #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
  115. Look, Ma! No math!

  116. Functions

  117. Very. Powerful. Functions.

  118. 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
  119. 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
  120. None
  121. Blueprint

  122. Blueprint ★ Buttons ★ Colors ★ Debug ★ Fancy Type

    ★ Form ★ Grid ★ Interaction ★ Internet Explorer ★ Link Icons ★ Liquid ★ Print ★ Reset ★ Rtl ★ Scaffolding ★ Typography ★ Utilities
  123. CSS3

  124. 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
  125. Image sprites

  126. @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®
  127. URL helpers

  128. #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
  129. stylesheet-url($path) font-url($path) image-url($path) URL helpers

  130. Stats

  131. 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 | | --------------------------------- | ----- | ---------- | -------------- | ----------- | --------- | -------------- |
  132. Share your patterns

  133. http://brandonmathis.com/projects/fancy-buttons/

  134. @import "fancy-buttons" button, a.button +fancy-button(#2966a8)

  135. compass-960

  136. $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
  137. $ 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
  138. compass-wordpress

  139. $ 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
  140. compass-formalize

  141. $ 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
  142. Isn’t she Sassy, folks? GET THE BOOK.

  143. sass40 Save 40% and get early access! Sadly, sass100 is

    not a valid code.
  144. DEMO and code spelunking

  145. None