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. I’m @mdo.
    I designed Bootstrap with @fat.

    View full-size slide

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

    View full-size slide

  3. Lots of great sites using it.

    View full-size slide

  4. Designing Bootstrap

    View full-size slide

  5. What’s design?

    View full-size slide

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

    View full-size slide

  7. How’s that apply to Bootstrap?

    View full-size slide

  8. Five principles.

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  11. A live, coded style guide.

    View full-size slide

  12. Say no all the time.
    2

    View full-size slide

  13. Add all the things!
    Umm, no.

    View full-size slide

  14. Closed markdotto closed the issue 4 hours ago.

    View full-size slide

  15. Remember, this is a product.

    View full-size slide

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

    View full-size slide

  17. Don’t solve everything.

    View full-size slide

  18. Educate by enforcing
    coding styles.
    3

    View full-size slide

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

    View full-size slide

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

  21. Formatting
    Property order
    Compiling

    View full-size slide

  22. Help folks avoid writing
    JavaScript.
    4

    View full-size slide

  23. // Dismissing in BS1.x

    ×

    View full-size slide

  24. Let’s just write HTML.

    View full-size slide

  25. // Dismissing in BS2.x

    ×

    View full-size slide

  26. // href = target

    Launch

    // data-target = target

    Launch

    View full-size slide

  27. Reach every person on
    the planet.
    5

    View full-size slide

  28. Everything is a design system.

    View full-size slide

  29. Help awesome people
    do awesome stuff.

    View full-size slide

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

    View full-size slide