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. Oh hai.
    I’m @mdo.

    View full-size slide

  2. Build your own Bootstrap.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  8. This is about building
    design systems.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. Treat design systems as open
    source projects.

    View full-size slide

  12. #byob: build your own Bootstrap.

    View full-size slide

  13. Because fuck Bootstrap.

    View full-size slide

  14. Because building systems to solve
    problems just works.

    View full-size slide

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

    View full-size slide

  16. Because the open source
    mentality yields amazing results.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  20. Your team is full of
    designers.

    View full-size slide

  21. Your team is full of
    developers.

    View full-size slide

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

    View full-size slide

  23. Help awesome people do
    awesome shit.

    View full-size slide

  24. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  27. // 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 full-size slide

  28. // 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 full-size slide

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

    View full-size slide

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

    View full-size slide

  31. Enforce coding standards for
    everyone on your team.

    View full-size slide

  32. // 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 full-size slide

  33. Stop writing new CSS.

    View full-size slide

  34. Stop writing new JavaScript.

    View full-size slide

  35. // href = target

    Launch


    !
    // data-target = target

    Launch

    1
    2
    3
    4
    5
    6
    7
    8
    9

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  38. #dream: docs rule everything
    around me.

    View full-size slide

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

    View full-size slide

  40. Thanks, nerds!
    Questions?

    View full-size slide