Because F*#% Bootstrap

Whether you are a startup or large organization you've more than likely had many different designers and front-end developers come and go, each contributing to a growing code base.

Eventually, over time, your application begins to turn into an unruly beast of CSS frameworks and Javascript libraries that make it almost impossible to scale or ship valuable features to your customers.

Style guides allow you to ensure consistency across your application, increase communication, and allow developers to focus on business logic instead of pushing pixels. In this talk, Aaron K. White, Director of User Experience at VictorOps, will explore the various types of style guides and identify some of the best practices for creating and maintaining a style guide.

Transcript

1. because FUCK bootstrap or, the importance of creating and maintaining a style guide
2. A-A-RON? Aaron K. White Director of User Experience @VictorOps @aaronkwhite aaron@aaronkwhite.com
3. bootstrap disclaimer: I actually love bootstrap
4. because FUCK bootstrap Bootstrap Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery. http://getbootstrap.com disclaimer: still love bootstrap
5. because FUCK bootstrap s’popular Over 12M websites are currently using Bootstrap https://trends.builtwith.com/docinfo/Twitter-Bootstrap The most Popular Framework EVER! disclaimer: I’ve been building sites with it since the first beta
6. because FUCK bootstrap also, the most hated… “…it also sometimes stymies creativity as the fundamental building blocks are already defined for you. Everything quickly starts looking the same because nobody can be bothered customizing Bootstrap enough to make it look unique.” - Own Williams | The Next Web disclaimer: these haters are just lazy
7. “because fuck bootstrap.” Mark Otto he built bootstrap with @fat
8. but this talk isn’t about bootstrap
9. It’s about style guides interaction guides design systems css frameworks pattern libraries components ui css html
10. because FUCK bootstrap What is a Style Guide? “Front-end style guides are a modular collection of all the elements in your product's user interface, together with code snippets for developers to copy and paste as needed to implement those elements. They include common UI components like buttons, form-input elements, navigation menus, modal overlay s and icons.” - Lean UX
11. what do style guides look like?
12. because FUCK bootstrap Hairstyle guide
13. because FUCK bootstrap Code Style Guides
14. because FUCK bootstrap Brand Guidelines
15. because FUCK bootstrap Content style guides
16. because FUCK bootstrap Static styleguides Re-usable UI components & UI Kits
17. living style guides
18. because FUCK bootstrap Living Style Guides Victory UI
19. because FUCK bootstrap Living Style Guides Github Primer
20. because FUCK bootstrap Living Style Guides Marvel
21. because FUCK bootstrap Living Style Guides Pantsuit
22. design systems
23. because FUCK bootstrap Design Systems MailChimp
24. because FUCK bootstrap Design Systems Atlassian
25. because FUCK bootstrap Design Systems Human Interface Guidelines
26. because FUCK bootstrap Design Systems Material Design
27. because FUCK bootstrap Design Systems Salesforce - Lightning
28. why you need a style guide
29. because FUCK bootstrap The world without style guides
30. because FUCK bootstrap The world with style guides https://dribbble.com/shots/2900479-17-Pink-Fluffy-Unicorns-Dancing-On-Rainbows
31. because FUCK bootstrap Why you need a style guide • It’s an Agile/agile world • build an iterative design & development process (e.g. eliminate design handoff’s) • build the style guide into your development processes • Speed of Development • engineering is your most expensive resource, use it wisely • component based systems are the future (Oh Hai React) • design repeatable patterns • increase code re-use • spend more time on business logic • ship reliable front-end code faster • UX is the key differentiator today • spend more time refining the experience • this is kinda hard!
32. because FUCK bootstrap Prepares you to fight the zombies “…build repeatable processes to implement Pattern Libraries in your product design and development workflow, so you can fight the slow rot of your interface design (and its underlying code) as your product grows and evolves.” - Marcelo Somers Fight the Zombie Pattern Library
33. how to style guide
34. Take an interface inventory • Document every component in your app • Put all the screens somewhere • a wall in your office • presentation • Illustrator / Sketch • inventory map • InVision • Categorize everything • Note every place that component appears • Ask if this component is repeatable • Define the business case for keeping it because FUCK bootstrap https://webdesign.tutsplus.com/tutorials/how-to-conduct-an-interface-inventory-with-invision--cms-25792
35. because FUCK bootstrap Design all the things • Brutal consolidation • Standardize as much as possible • Then do it again! • Start building your pattern library
36. Document all the things • Basic documentation • Shared Illustrator/Sketch libraries • Static documentation • InVision Boards • Living style guide • Start with a CSS Framework • Web Skin & Victory UI started on top of Bootstrap • Roll your own • Only build what you need, just build it! • Iterate as you go • Style guides are easier to maintain when the code you write is constantly published to production • Build out the entire experience (css, components, voice & tone, etc…) because FUCK bootstrap
37. It doesn’t stop with the docs • Hold rigorous design reviews • Always be asking “why did you use ‘x’ pattern?” • Involve everyone in the process • Engineers • Product Managers • Stakeholders • Dedicate a Team • Github’s Design Systems team • Workiva’s User Interface Platform team because FUCK bootstrap
38. because FUCK bootstrap Because who doesn’t love unicorns and rainbows? https://dribbble.com/shots/2900479-17-Pink-Fluffy-Unicorns-Dancing-On-Rainbows
39. thank you! Aaron K. White @aaronkwhite Slides https://speakerdeck.com/aaronkwhite/ because-f-star-number-percent-bootstrap