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

  2. B

  3. Bootstrap [is] the Times New Roman of design. — Guy

    on the internet http://notes.unwieldy.net/post/43508972396/please-stop-using- twitter-bootstrap
  4. !

  5. 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
  6. // 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
  7. // 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
  8. .main-nav { … } .profile-nav { … } .hidden-nav {

    … } #productNav { … } #footerLinks { … } 1 2 3 4 5 .nav { … } .nav-tabs { … } .nav-list { … } 1 2 3
  9. // 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
  10. // href = target <a href=“#myModal” data-toggle=“modal”>
 Launch
 </a> !

    // data-target = target <button data-target=“.modal” data-toggle=“modal”> Launch </button> 1 2 3 4 5 6 7 8 9