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

Leveraging SASS + Compass to Create Style Guides

Leveraging SASS + Compass to Create Style Guides

Steve Berry will be sharing his experiences from his time as Director of User Experience at Efficiency 2.0 where he white-labeled many sites using Sass and Compass. Steve will present on how to leverage the magic of SASS to create a quick style guide to design a site or app.

Steve Berry is the founder of Thought Merchants (www.thoughtmerchants.com) user experience and design consultancy. Steve works with start-ups, and emerging companies creating usable online and offline experiences. He is an active member of Agile User Experience Group in NYC. Steve previously was the User Experience Director at Efficiency 2.0 translating energy and behavioral science research into simple and engaging experiences. He received a BFA from the Savannah College of Art and Design.

thoughtmerchant

May 30, 2012
Tweet

More Decks by thoughtmerchant

Other Decks in Design

Transcript

  1. What is it you do here? Steve Berry: UX /

    UI / Designer I research users, to make better designs, that solve real (testable) business problems.
  2. Consultant in Philly for 12 different start-ups 2.5 years. User

    Experience Director at Efficiency 2.0 for over a year. Back to consulting in NYC, and organizer for GORUCO.
  3. A Live Style Guide is: A consolidated vocabulary of the

    application’s visual and interactive language.
  4. Stylesheets _alerts.sass _application.sass _buttons.sass _custom.sass _defaults.sass _fonts.sass _forms.sass _layouts.sass _lists.sass

    _modules.sass _rebates.sass _shell.sass _tips.sass _wayfinder.sass Efficiency 2.0 Platform Themes _cub.sass _wmeco.sass
  5. Efficiency 2.0 Engines Platform Stylesheets Stylesheets _alerts.sass _application.sass _buttons.sass _custom.sass

    _defaults.sass _fonts.sass _forms.sass _layouts.sass _lists.sass _modules.sass _rebates.sass _shell.sass _tips.sass _wayfinder.sass Engines Engine Name App Assets screen.sass
  6. Here is how I break down a site: Brand Grid

    Application Chrome Typography Navigation Lists Forms Buttons Custom
  7. Guess how we set it up? Stylesheets _application.sass _brand.sass _buttons.sass

    _forms.sass _grid.sass _lists.sass _mixins.sass _modules.sass _nav.sass _text.sass
  8. Notes: Use Pseudo Classes “Anyone should be able to create

    mark-up for this app and it would be instantly branded.*” Semantic & Accessible (except for the grid) *Working Theory
  9. Advantages: Breaths lean design Easy to change everything Delay design

    decision making Makes A/Bn testing easier Never again ask “What color is that.”
  10. Trump Card: SASS and Compass enable the maker to work

    in their medium quicker, longer, and more efficiently.
  11. Objectives for a Sparkling Front-end Make your code readable Too

    much complexity breeds disobedience Rule of 3 Own it Increase User Comfort