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:
http://blog.kippt.com/2012/04/26/building-with-bootstrap/
http://webshaped.fi/speakers#karrisaarinen

54530398a851b4039c67e13a1d7b9467?s=128

Karri Saarinen

May 17, 2012
Tweet

Transcript

  1. 6.

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

    @fat from Twitter 28,000 watchers & 2000 forks on Github
  2. 13.
  3. 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
  4. 23.

    2) Without LESS + Downloading the .css and including it

    takes 2 minutes Customize by overwriting the styles
  5. 26.
  6. 27.

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

    the markup 3: <link href="landing.scss" rel="stylesheet">
  7. 28.
  8. 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:
  9. 38.
  10. 42.

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

    dropdown implementation. Which one should I use?
  11. 43.
  12. 49.