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.

Transcript

1. Leveraging SASS + Compass to Create Style Guides
2. Manhattanhenge is happening right now
3. Wednesday, May 30 — 8:16 P.M. EDT Look West
4. What is it you do here? Steve Berry: UX / UI / Designer I research users, to make better designs, that solve real (testable) business problems.
5. 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.
6. We are having a boat party. That’s fuckin’ right. yacht
7. sass-compass-talk @extend .live-style-guides sass: enhance compass: leverage
8. What is a Style Guide?
9. A Live Style Guide is: A consolidated vocabulary of the application’s visual and interactive language.
12. Efficiency 2.0 Use Case
13. Efficiency 2.0 is now C3 Energy
14. Efficiency 2.0 1 UXer 8 Devs 1 PM Devs UX PM Pivots
15. Efficiency 2.0 1 Platform 3 Sites (and growing)
20. Structure of Current layout Platform Site Site Site Site Repo
21. 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
22. 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
23. Modules, Grids, and Buttons!
24. Modules
25. _modules.sass
26. Ze Grid (thesquaregrid.com)
28. Grid
29. Awesome Button (from Twitter Bootstrap) .btn .primary .btn
30. Awesome Button GROSS CODE
31. Awesome Button with SASS!
32. Awesome Button with SASS! Defaults White Label Overrides
33. Variables (themes)
34. Header Business
35. Demo Break to see all style guides.
36. How do you break up your site?
37. A site consists of patterns (System design anybody?)
38. Here is how I break down a site: Brand Grid Application Chrome Typography Navigation Lists Forms Buttons Custom
39. New Project! DaisyBill.
40. 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
41. Lets go take a look!
42. 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
43. Advantages: Breaths lean design Easy to change everything Delay design decision making Makes A/Bn testing easier Never again ask “What color is that.”
44. Quote of the Day: “Mock-ups are lies.” - Michael Schubert, Pivotal Labs
47. Trump Card: SASS and Compass enable the maker to work in their medium quicker, longer, and more efficiently.
48. Examples of Style Guides Leveraging SASS
49. Code Climate www.codeclimate.com
50. Ministry of Clarity www.ministryofclarity.com
51. Pro-tip Make a tool which helps you do your job better. = =
52. Thought Merchants www.thoughtmerchants.com
53. Objectives for a Sparkling Front-end Make your code readable Too much complexity breeds disobedience Rule of 3 Own it Increase User Comfort
54. Thank You! Steve Berry steve@thoughtmerchants.com @thoughtmerchant www.thoughtmerchants.com