Save 37% off PRO during our Black Friday Sale! »

Because F*#% Bootstrap

A12d1a571d63957f150117f18d87a69f?s=47 Aaron K. White
September 26, 2017

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.

A12d1a571d63957f150117f18d87a69f?s=128

Aaron K. White

September 26, 2017
Tweet

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