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.

Transcript

1. <3
2. Oh hai. I’m @mdo.
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.
27. Why?
28. Because fuck Bootstrap.
29. Because building systems to solve problems just works.
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
49. How?
50. Build and document your design system within the product.
52. Or, build the components and document them in a library.
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
63. Stop writing new CSS.
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.
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?