Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Build your own Bootstrap

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.

Mark Otto

October 25, 2013
Tweet

More Decks by Mark Otto

Other Decks in Programming

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