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
   

   View Slide

2. Oh hai.
   I’m @mdo.
   

   View Slide

3. View Slide

4. View Slide

5. B
   

   View Slide

6. #BYOB
   

   View Slide

7. Build your own Bootstrap.
   

   View Slide

8. Bootstrap?
   

   View Slide

9. Bootstrap [is] the Times New
   Roman of design.
   — Guy on the internet
   http://notes.unwieldy.net/post/43508972396/please-stop-using-
   twitter-bootstrap
   

   View Slide

10. Sleek, intuitive, and powerful
    mobile first front-end framework
    for faster and easier web
    development.
    

    View Slide

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

    View Slide

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

    View Slide

13. So #BYOB?
    

    View Slide

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

    View Slide

15. This is about building
    design systems.
    

    View Slide

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

    View Slide

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

    View Slide

18. Treat design systems as open
    source projects.
    

    View Slide

19. #byob: build your own Bootstrap.
    

    View Slide

20. Story time.
    

    View Slide

21. View Slide

22. View Slide

23. View Slide

24. View Slide

25. View Slide

26. View Slide

27. Why?
    

    View Slide

28. Because fuck Bootstrap.
    

    View Slide

29. Because building systems to solve
    problems just works.
    

    View Slide

30. View Slide

31. View Slide

32. View Slide

33. View Slide

34. Because investing in your team is
    never a bad idea.
    

    View Slide

35. !
    

    View Slide

36. " "
    !
    

    View Slide

37. # "
    !
    

    View Slide

38. Because the open source
    mentality yields amazing results.
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

42. Your team is full of
    designers.
    

    View Slide

43. Your team is full of
    developers.
    

    View Slide

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

    View Slide

45. Help awesome people do
    awesome shit.
    

    View Slide

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
    

    View Slide

47. View Slide

48. View Slide

49. How?
    

    View Slide

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

    View Slide

51. View Slide

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

    View Slide

53. View Slide

54. View Slide

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
    

    View Slide

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
    

    View Slide

57. Design takes iteration, and design
    systems make it easier.
    

    View Slide

58. .main-nav { … }
    .profile-nav { … }
    .hidden-nav { … }
    #productNav { … }
    #footerLinks { … }
    1
    2
    3
    4
    5
    .nav { … }
    .nav-tabs { … }
    .nav-list { … }
    1
    2
    3
    

    View Slide

59. Enforce coding standards for
    everyone on your team.
    

    View Slide

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
    

    View Slide

61. View Slide

62. View Slide

63. Stop writing new CSS.
    

    View Slide

64. View Slide

65. Stop writing new JavaScript.
    

    View Slide

66. // href = target
    

    Launch

    
    !
    // data-target = target
    
    Launch
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    

    View Slide

67. Component-level design works
    outside the browser, too.
    

    View Slide

68. View Slide

69. In short…
    

    View Slide

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

    View Slide

71. #dream: docs rule everything
    around me.
    

    View Slide

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

    View Slide

73. Thanks, nerds!
    Questions?
    

    View Slide