Build your own Bootstrap

Bc4ab438f7a4ce1c406aadc688427f2c?s=47 Mark Otto
October 25, 2013

Build your own Bootstrap

Given at FOWA 2013 in London, I talk about how it's important to step back and think about your projects as design systems—series of components and more that come together to create your product.

Bc4ab438f7a4ce1c406aadc688427f2c?s=128

Mark Otto

October 25, 2013
Tweet

Transcript

  1. <3

  2. Oh hai. I’m @mdo.

  3. None
  4. None
  5. B

  6. #BYOB

  7. Build your own Bootstrap.

  8. Bootstrap?

  9. Bootstrap [is] the Times New Roman of design. — Guy

    on the internet http://notes.unwieldy.net/post/43508972396/please-stop-using- twitter-bootstrap
  10. Sleek, intuitive, and powerful mobile first front-end framework for faster

    and easier web development.
  11. HTML, CSS, and JavaScript components for building stuff on the

    web.
  12. Most popular front-end framework and OS project on GitHub.

  13. So #BYOB?

  14. This isn’t really a talk about building frameworks.

  15. This is about building design systems.

  16. A design system is everything that makes up your product.

  17. Like any other product, Bootstrap is a design system.

  18. Treat design systems as open source projects.

  19. #byob: build your own Bootstrap.

  20. Story time.

  21. None
  22. None
  23. None
  24. None
  25. None
  26. None
  27. Why?

  28. Because fuck Bootstrap.

  29. Because building systems to solve problems just works.

  30. None
  31. None
  32. None
  33. None
  34. Because investing in your team is never a bad idea.

  35. !

  36. " " !

  37. # " !

  38. Because the open source mentality yields amazing results.

  39. 432 Contributors 7k Commits 60k Stars 21k Forks @twbs/bootstrap

  40. 24 Contributors 300 Commits 3 Stars 0 Forks @github/primer $

  41. Because great design systems are usable by your entire team.

  42. Your team is full of designers.

  43. Your team is full of developers.

  44. Your team is full of people who want to learn.

  45. Help awesome people do awesome shit.

  46. Breaking interfaces down into patterns has been immensely helpful in

    learning and re- evaluating the best possible code to implement them. — Dan Cedarholm, on Pears https://github.com/simplebits/Pears
  47. None
  48. None
  49. How?

  50. Build and document your design system within the product.

  51. None
  52. Or, build the components and document them in a library.

  53. None
  54. None
  55. // Body scaffolding @body-bg: #fff; @body-color: @gray-dark; ! // Links

    @link-color: @brand-primary; @link-hover-color: darken(@link-color, 15%); 1 2 3 4 5 6 7
  56. // Make a generic class as a mixin .button {

    ... } ! // Use it everywhere you need .call-to-action { .button(); } 1 2 3 4 5 6 7 8 9
  57. Design takes iteration, and design systems make it easier.

  58. .main-nav { … } .profile-nav { … } .hidden-nav {

    … } #productNav { … } #footerLinks { … } 1 2 3 4 5 .nav { … } .nav-tabs { … } .nav-list { … } 1 2 3
  59. Enforce coding standards for everyone on your team.

  60. // Tables .table { ... } .table-striped { ... }

    .table-bordered { ... } .table-condensed { ... } ! // Forms .form-inline { ... } .form-search { ... } .form-horizontal { ... } ! // Nav .nav { ... } .nav-tabs { ... } .nav-pills { ... } 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
  61. None
  62. None
  63. Stop writing new CSS.

  64. None
  65. Stop writing new JavaScript.

  66. // href = target <a href=“#myModal” data-toggle=“modal”>
 Launch
 </a> !

    // data-target = target <button data-target=“.modal” data-toggle=“modal”> Launch </button> 1 2 3 4 5 6 7 8 9
  67. Component-level design works outside the browser, too.

  68. None
  69. In short…

  70. Remember to design systems of components, not just pages.

  71. #dream: docs rule everything around me.

  72. Build your design systems like an open source project.

  73. Thanks, nerds! Questions?