Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Thursday, March 19, 2009
Building Unobtrusive Stylesheets
          with Sass & Compass
          For faster development and easier maintenance



...
Chris Eppstein
               Web UI Architect for 7 years
               Software Architect for Caring.com for the last 2...
Assumptions

               You know HTML
               You know CSS
               You don’t look forward to the design ...
What is an Unobtrusive Stylesheet?



               Makes no requirements on content
               Only affects targeted...
Why build Unobtrusive Stylesheets?

               Initial implementation is faster
               Changing design is fast...
Being Unobtrusive with CSS is Hard
         You need better tools




Thursday, March 19, 2009
Unobtrusive
         Footer
         without
         Sass &
         Compass

Thursday, March 19, 2009
Unobtrusive
         Footer
         with
         Sass &
         Compass

Thursday, March 19, 2009
Unobtrusive
         Homepage
         without
         Sass &
         Compass

Thursday, March 19, 2009
Unobtrusive
         Homepage
         with
         Sass &
         Compass

Thursday, March 19, 2009
Case Study: Caring.com
         Entire UI Redesign took the team two weeks
         Front-end development times down by ~4...
What Makes Unobtrusive Hard?

                           Repetitive Selectors
                                  – AND –

 ...
What Makes Unobtrusive Hard?

                           Repetitive Selectors
                                  – AND –

 ...
What Makes Unobtrusive Hard?

                           Repetitive Selectors
                                  – AND –

 ...
Sass Makes Unobtrusive Easy
                           Simple Descendant
                               Selectors
        ...
Sass Makes Unobtrusive Easy
                           Simple Descendant
                               Selectors
        ...
Sass Makes Unobtrusive Easy
                           Simple Descendant
                               Selectors
        ...
Sass Is Whitespace Aware
         Indented selectors are descendant selectors




                                       N...
Sass is Good at Permutation




                           DRY

                                 Not DRY



Thursday, Marc...
More Sass Syntax




Thursday, March 19, 2009
More Sass Syntax
                           Variables




Thursday, March 19, 2009
More Sass Syntax
                           Variables




Thursday, March 19, 2009
More Sass Syntax
                           Attribute Namespaces




Thursday, March 19, 2009
More Sass Syntax
                           Attribute Namespaces




Thursday, March 19, 2009
More Sass Syntax

                           Mixins




Thursday, March 19, 2009
More Sass Syntax

                           Mixins




Thursday, March 19, 2009
More Sass Syntax

                           Parent References




Thursday, March 19, 2009
More Sass Syntax

                           Parent References




Thursday, March 19, 2009
More Sass Syntax


                           Expressions




Thursday, March 19, 2009
More Sass Syntax


                           Expressions




Thursday, March 19, 2009
More Sass Syntax




        Other Benefits of Compilation:
             Environment-dependent output   SassScript
        ...
There’s No
         Excuse Now
           Go forth and scope to
           your heart’s content




Thursday, March 19, 20...
A Cute Little Trick
    Ever notice how Haml looks like CSS?




                                           Selectors
    ...
CSS Lacks Abstraction
         Classes are not for Style Reuse




Thursday, March 19, 2009
You’ve been picking the
         lesser of two evils, right?
               Copy & Paste
               Presentational Cla...
Sass Mixins are Abstract Classes




                           +




Thursday, March 19, 2009
Sass Mixins are Abstract Classes




                           +




Thursday, March 19, 2009
Sass Mixins are Abstract Classes




                           +




Thursday, March 19, 2009
Sass Mixins are Abstract Classes




                           +




Thursday, March 19, 2009
Sass Mixins are Abstract Classes




                           +




Thursday, March 19, 2009
Sass Mixins are CSS Macros




                           When you need to apply the
                            same styl...
Sass Script is Turing Complete




                               Credit: Nathan Weizenbaum


Thursday, March 19, 2009
Sass Script is Turing Complete




                               Credit: Nathan Weizenbaum


Thursday, March 19, 2009
The Only Limitation is Your
                      Imagination




                                     and CSS...
Thursday...
Sass is a Language
       Compass is an Ecosystem




Thursday, March 19, 2009
Compass Makes Frameworks Work




Thursday, March 19, 2009
Building Web UIs Can Be Fun Again!




Thursday, March 19, 2009
Compass Provides
               Built-in framework ports: Blueprint, YUI
               Installable plugins: 960.gs
      ...
Add Compass to your Rails
         Application



         Sass has Merb/Rails integration that
         automatically rec...
Where’s the Sass?

               Compass stores its sass files in its gem
               Easy upgrades
               rake...
Compass’s Blueprint Port
         contains a Layout DSL
                         Configuration Parameters
         +contain...
Thursday, March 19, 2009
Compass’s YUI Port is
         Configurable & Semantic
               YUI uses class descendants to layout grid blocks -- t...
Thursday, March 19, 2009
Compass Makes
         Frameworks à la Carte


               At Caring.com we use Blueprint’s grids, Compass’s
          ...
Compass Core Library
               CSS Reset               Link styling
               Sticky Footer           List Styli...
Thursday, March 19, 2009
Real World Rails Example

                           http://compass-style.org/


                            Code at:
    ...
The Future of Compass & Sass
               Haml & Sass 2.2,                       Compass:
               Compass 1.0 sta...
Open Sourced
                On Github

                    • This slide deck and related code:
                          ...
?
                           Q&A



Thursday, March 19, 2009
Upcoming SlideShare
Loading in …5
×

Unobtrusive Stylesheets

2,703 views

Published on

How to use Sass and the Compass stylesheet framework to build unobtrusive stylesheets for your website.

Published in: Technology, News & Politics
  • Be the first to comment

Unobtrusive Stylesheets

  1. 1. Thursday, March 19, 2009
  2. 2. Building Unobtrusive Stylesheets with Sass & Compass For faster development and easier maintenance Thursday, March 19, 2009
  3. 3. Chris Eppstein Web UI Architect for 7 years Software Architect for Caring.com for the last 2 years Member of the Sass core team Creator of Compass, the first Sass framework Thursday, March 19, 2009
  4. 4. Assumptions You know HTML You know CSS You don’t look forward to the design phase You’re tired of reinventing the wheel when you design Thursday, March 19, 2009
  5. 5. What is an Unobtrusive Stylesheet? Makes no requirements on content Only affects targeted content Thursday, March 19, 2009
  6. 6. Why build Unobtrusive Stylesheets? Initial implementation is faster Changing design is faster More flexibility for theming and alternate stylesheets Redesigns made easier Better SEO Thursday, March 19, 2009
  7. 7. Being Unobtrusive with CSS is Hard You need better tools Thursday, March 19, 2009
  8. 8. Unobtrusive Footer without Sass & Compass Thursday, March 19, 2009
  9. 9. Unobtrusive Footer with Sass & Compass Thursday, March 19, 2009
  10. 10. Unobtrusive Homepage without Sass & Compass Thursday, March 19, 2009
  11. 11. Unobtrusive Homepage with Sass & Compass Thursday, March 19, 2009
  12. 12. Case Study: Caring.com Entire UI Redesign took the team two weeks Front-end development times down by ~40% Thursday, March 19, 2009
  13. 13. What Makes Unobtrusive Hard? Repetitive Selectors – AND – Copy & Paste Styling Thursday, March 19, 2009
  14. 14. What Makes Unobtrusive Hard? Repetitive Selectors – AND – Copy & Paste Styling Thursday, March 19, 2009
  15. 15. What Makes Unobtrusive Hard? Repetitive Selectors – AND – Copy & Paste Styling Thursday, March 19, 2009
  16. 16. Sass Makes Unobtrusive Easy Simple Descendant Selectors – AND – Abstraction Thursday, March 19, 2009
  17. 17. Sass Makes Unobtrusive Easy Simple Descendant Selectors – AND – Abstraction Thursday, March 19, 2009
  18. 18. Sass Makes Unobtrusive Easy Simple Descendant Selectors – AND – Abstraction Thursday, March 19, 2009
  19. 19. Sass Is Whitespace Aware Indented selectors are descendant selectors Not DRY DRY Thursday, March 19, 2009
  20. 20. Sass is Good at Permutation DRY Not DRY Thursday, March 19, 2009
  21. 21. More Sass Syntax Thursday, March 19, 2009
  22. 22. More Sass Syntax Variables Thursday, March 19, 2009
  23. 23. More Sass Syntax Variables Thursday, March 19, 2009
  24. 24. More Sass Syntax Attribute Namespaces Thursday, March 19, 2009
  25. 25. More Sass Syntax Attribute Namespaces Thursday, March 19, 2009
  26. 26. More Sass Syntax Mixins Thursday, March 19, 2009
  27. 27. More Sass Syntax Mixins Thursday, March 19, 2009
  28. 28. More Sass Syntax Parent References Thursday, March 19, 2009
  29. 29. More Sass Syntax Parent References Thursday, March 19, 2009
  30. 30. More Sass Syntax Expressions Thursday, March 19, 2009
  31. 31. More Sass Syntax Expressions Thursday, March 19, 2009
  32. 32. More Sass Syntax Other Benefits of Compilation: Environment-dependent output SassScript formats Partials & imports Silent comments Thursday, March 19, 2009
  33. 33. There’s No Excuse Now Go forth and scope to your heart’s content Thursday, March 19, 2009
  34. 34. A Cute Little Trick Ever notice how Haml looks like CSS? Selectors Delete Write Haml ready to some stuff style Via: Lachlan Hardy Thursday, March 19, 2009
  35. 35. CSS Lacks Abstraction Classes are not for Style Reuse Thursday, March 19, 2009
  36. 36. You’ve been picking the lesser of two evils, right? Copy & Paste Presentational Class Names Thursday, March 19, 2009
  37. 37. Sass Mixins are Abstract Classes + Thursday, March 19, 2009
  38. 38. Sass Mixins are Abstract Classes + Thursday, March 19, 2009
  39. 39. Sass Mixins are Abstract Classes + Thursday, March 19, 2009
  40. 40. Sass Mixins are Abstract Classes + Thursday, March 19, 2009
  41. 41. Sass Mixins are Abstract Classes + Thursday, March 19, 2009
  42. 42. Sass Mixins are CSS Macros When you need to apply the same styles to different selectors Thursday, March 19, 2009
  43. 43. Sass Script is Turing Complete Credit: Nathan Weizenbaum Thursday, March 19, 2009
  44. 44. Sass Script is Turing Complete Credit: Nathan Weizenbaum Thursday, March 19, 2009
  45. 45. The Only Limitation is Your Imagination and CSS... Thursday, March 19, 2009
  46. 46. Sass is a Language Compass is an Ecosystem Thursday, March 19, 2009
  47. 47. Compass Makes Frameworks Work Thursday, March 19, 2009
  48. 48. Building Web UIs Can Be Fun Again! Thursday, March 19, 2009
  49. 49. Compass Provides Built-in framework ports: Blueprint, YUI Installable plugins: 960.gs Core library Reset Sass compilation for stand-alone projects Application framework integration Thursday, March 19, 2009
  50. 50. Add Compass to your Rails Application Sass has Merb/Rails integration that automatically recompiles stylesheets. Thursday, March 19, 2009
  51. 51. Where’s the Sass? Compass stores its sass files in its gem Easy upgrades rake gems:unpack GEM=chriseppstein-compass Thursday, March 19, 2009
  52. 52. Compass’s Blueprint Port contains a Layout DSL Configuration Parameters +container +column(n,last) !blueprint_grid_columns +last !blueprint_grid_width +append(n) !blueprint_grid_margin +prepend(n) Oh and it does some basic +push(n) styling for you if you want that. +pull(n) +blueprint-typography +blueprint-form Thursday, March 19, 2009
  53. 53. Thursday, March 19, 2009
  54. 54. Compass’s YUI Port is Configurable & Semantic YUI uses class descendants to layout grid blocks -- this makes it more complex to abstract and use than Blueprint Compass lets you configure the sizes, class names, selectors, and IDs Sophisticated Font System (%-based specified in px) Source-order independent, Zoom friendly grids +font-size(size, base_size) +yui-base +yui-document(width) And much, much more... Thursday, March 19, 2009
  55. 55. Thursday, March 19, 2009
  56. 56. Compass Makes Frameworks à la Carte At Caring.com we use Blueprint’s grids, Compass’s reset, YUI’s Base and Font system Thursday, March 19, 2009
  57. 57. Compass Core Library CSS Reset Link styling Sticky Footer List Styling (bullets, orientation) Clearfix Table styling Tag Cloud (background colors, borders) Cross-browser inline- block Text Replacement Thursday, March 19, 2009
  58. 58. Thursday, March 19, 2009
  59. 59. Real World Rails Example http://compass-style.org/ Code at: http://github.com/chriseppstein/compass-style.org Thursday, March 19, 2009
  60. 60. The Future of Compass & Sass Haml & Sass 2.2, Compass: Compass 1.0 stable Page Scaffolds (script/generate releases are imminent scaffold should be pretty!) Design Sharing Sass: Cultivate Plugin Ecosystem Stylesheet Optimizer Registry Multiple styles rules per line Installer New output formats Other CSS Frameworks Localized Imports Thursday, March 19, 2009
  61. 61. Open Sourced On Github • This slide deck and related code: http://github.com/chriseppstein/presentations • Sass is part of Haml: http://github.com/nex3/haml • Compass: http://github.com/chriseppstein/compass Thursday, March 19, 2009
  62. 62. ? Q&A Thursday, March 19, 2009

×