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

Designing Bootstrap

Mark Otto
October 12, 2012

Designing Bootstrap

Design is how stuff works, and no where is this more important than widely used front-end tools like Bootstrap. Get the skinny on how and why Bootstrap works the way it does straight from the horse's mouth, the designer of Bootstrap.

Mark Otto

October 12, 2012
Tweet

More Decks by Mark Otto

Other Decks in Design

Transcript

  1. B

    View Slide

  2. I’m @mdo.
    I designed Bootstrap with @fat.

    View Slide

  3. Bootstrap?

    View Slide

  4. View Slide

  5. 5,000,000+
    monthly page views
    38,500+
    stars
    9,100+
    forks

    View Slide

  6. Lots of great sites using it.

    View Slide

  7. View Slide

  8. View Slide

  9. View Slide

  10. Designing Bootstrap

    View Slide

  11. What’s design?

    View Slide

  12. making decisions.
    about constraints.
    solving problems.
    communication.
    Design is how stuff works.

    View Slide

  13. How’s that apply to Bootstrap?

    View Slide

  14. Five principles.

    View Slide

  15. Treat the docs like they’re
    the product.
    1

    View Slide

  16. Start with a small team and an idea.
    Then, grow from there.

    View Slide

  17. View Slide

  18. A live, coded style guide.

    View Slide

  19. View Slide

  20. View Slide

  21. Say no all the time.
    2

    View Slide

  22. Add all the things!
    Umm, no.

    View Slide

  23. Closed markdotto closed the issue 4 hours ago.

    View Slide

  24. Remember, this is a product.

    View Slide

  25. If I had asked people
    what they wanted,
    they would have said
    faster horses.
    Henry Ford

    View Slide

  26. Don’t solve everything.

    View Slide

  27. Educate by enforcing
    coding styles.
    3

    View Slide

  28. All code should look like a
    single person typed it.
    Paraphrasing @necolas, Idiomatic CSS

    View Slide

  29. Base classes
    Prefix modifiers
    // Tables
    .table { ... }
    .table-striped { ... }
    .table-bordered { ... }
    .table-condensed { ... }
    // Forms
    .form-inline { ... }
    .form-search { ... }
    .form-horizontal { ... }
    // Nav
    .nav { ... }
    .nav-tabs { ... }
    .nav-pills { ... }

    View Slide

  30. Formatting
    Property order
    Compiling

    View Slide

  31. View Slide

  32. View Slide

  33. Help folks avoid writing
    JavaScript.
    4

    View Slide

  34. // Dismissing in BS1.x

    ×

    View Slide

  35. Let’s just write HTML.

    View Slide

  36. // Dismissing in BS2.x

    ×

    View Slide

  37. // href = target

    Launch

    // data-target = target

    Launch

    View Slide

  38. Reach every person on
    the planet.
    5

    View Slide

  39. View Slide

  40. CSS
    &

    View Slide

  41. View Slide

  42. View Slide

  43. View Slide

  44. You, too.

    View Slide

  45. Everything is a design system.

    View Slide

  46. Help awesome people
    do awesome stuff.

    View Slide

  47. Thanks!
    @mdo · @twbootstrap · http://getbootstrap.com

    View Slide

  48. Questions?

    View Slide