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

Building with Twitter Bootstrap

Building with Twitter Bootstrap

Slides from Webshaped.fi 2012 conference talk: "Building with Twitter Bootstrap"

Less than a year, Twitter Bootstrap has taken over the frontend world and currently is the most popular open source project on Github. In the talk we dive in to the principles of using Bootstrap effectively in your design and development process - and how not use it.

Additional resources:

Karri Saarinen

May 17, 2012

More Decks by Karri Saarinen

Other Decks in Technology


  1. Karri Saarinen / @karrisaarinen

  2. Karri Saarinen Co-founded ArcticStartup Rails Girls Kippt Product Designer Flowdock

    Shadow Cities
  3. Helping professionals and companies to collect and collaborate on information.

  4. Building.

  5. How do we use our resources well?

  6. Twitter Bootstrap: Started about 1,5 years ago by @mdo &

    @fat from Twitter 28,000 watchers & 2000 forks on Github
  7. Why Bootstrap?

  8. Design Engineering Frontend

  9. Pairing designers with developers

  10. Bootstrap is a set of common components. = A working

  11. It helps you to communicate

  12. It saves time

  13. How?

  14. Start with Bootstrap. Don’t nish with it.

  15. “Seeing a default Bootstrap “theme” site makes me leave it

    right away because I feel the person doesn’t care about what they are doing” - Paul Scrivens
  16. Don’t use it as a design for user facing things

  17. It’s your foundation. Not your aesthetics.

  18. Don’t destroy your effort, brand and user loyalty

  19. So how? 1) Design your app 2) Customize it

  20. 1. Include it

  21. 1) With LESS 2) Or without (just download the .css)

  22. 1) With LESS + Several variables, mixins, snippets (colors, typography,

    grid, alignment) + Normal LESS goodness
  23. 2) Without LESS + Downloading the .css and including it

    takes 2 minutes Customize by overwriting the styles
  24. 1. Basics: 12-grid & Base CSS + Responsive

  25. New Kippt landing page: 1: <link href="bootstrap.css" rel="stylesheet"> 2: Grab/write

    the markup
  26. None
  27. New Kippt landing page: 1: <link href="bootstrap.css" rel="stylesheet"> 2: Grab/write

    the markup 3: <link href="landing.scss" rel="stylesheet">
  28. None
  29. With Bootstrap: Took half-day ~10 major changes lots of tweaking

  30. Without Bootstrap: ~1-3 days lots major changes even more of

  31. Time saved: +16 hours!

  32. 2. Base CSS: Icons & Buttons

  33. Comes with icons

  34. <i class=”icon-search”></i> .icon-search { background:url(icons.png) 0 40px no-repeat; } If

    you can, use your own. You can still bene t from the convention:
  35. Time saved: +1 hour!

  36. 3. Components Navbar & Dropdowns

  37. Everyone needs their Navbars.

  38. None
  39. “Simple” structure, xed or static <div class="navbar"> <div class="navbar-inner"> <div

    class="container"> ... </div> </div> </div>
  40. Also Responsive

  41. Time saved: +3 hours!

  42. “We need a dropdown” Everyone and their mother has a

    dropdown implementation. Which one should I use?
  43. None
  44. After 30 minutes. Done.

  45. Time saved: +4 hours!

  46. 4. JS Plugins Modals & Tooltips

  47. To wrap up

  48. Not so good for: + Yet another framework + Use

    it as a design or as is
  49. Good for:

  50. 1) Styleguide for your team components, naming convetions

  51. 2) Decent styles to begin with, and to modify

  52. 2) Making development & prototyping faster

  53. Time saved total: +27 hours!

  54. When building something new, you always have risks and waste

  55. Pick you battles. Innovate on things that actually matter.

  56. Thanks & QA @karrisaarinen @kippt / kippt.com