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

Karri Saarinen

May 17, 2012
Tweet

More Decks by Karri Saarinen

Other Decks in Technology

Transcript

  1. Karri Saarinen / @karrisaarinen

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  4. How do we use our
    resources well?

    View full-size slide

  5. Twitter Bootstrap:
    Started about 1,5 years ago by
    @mdo & @fat from Twitter
    28,000 watchers & 2000 forks
    on Github

    View full-size slide

  6. Why Bootstrap?

    View full-size slide

  7. Design Engineering
    Frontend

    View full-size slide

  8. Pairing designers
    with developers

    View full-size slide

  9. Bootstrap is a set of
    common components.
    =
    A working
    styleguide

    View full-size slide

  10. It helps you to
    communicate

    View full-size slide

  11. It saves
    time

    View full-size slide

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

    View full-size slide

  13. “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

    View full-size slide

  14. Don’t use it as a design
    for user facing things

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  18. 1. Include it

    View full-size slide

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

    View full-size slide

  20. 1) With LESS
    + Several variables, mixins, snippets
    (colors, typography, grid, alignment)
    + Normal LESS goodness

    View full-size slide

  21. 2) Without LESS
    + Downloading the .css and
    including it takes 2 minutes
    Customize by overwriting the styles

    View full-size slide

  22. 1. Basics:
    12-grid & Base CSS
    + Responsive

    View full-size slide

  23. New Kippt landing page:
    1: rel="stylesheet">
    2: Grab/write the markup

    View full-size slide

  24. New Kippt landing page:
    1: rel="stylesheet">
    2: Grab/write the markup
    3: rel="stylesheet">

    View full-size slide

  25. With Bootstrap:
    Took half-day
    ~10 major changes
    lots of tweaking

    View full-size slide

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

    View full-size slide

  27. Time saved:
    +16 hours!

    View full-size slide

  28. 2. Base CSS:
    Icons & Buttons

    View full-size slide

  29. Comes with icons

    View full-size slide


  30. .icon-search {
    background:url(icons.png) 0 40px no-repeat;
    }
    If you can, use your own.
    You can still bene t from the convention:

    View full-size slide

  31. Time saved:
    +1 hour!

    View full-size slide

  32. 3. Components
    Navbar & Dropdowns

    View full-size slide

  33. Everyone needs
    their Navbars.

    View full-size slide

  34. “Simple” structure,
    xed or static



    ...



    View full-size slide

  35. Also
    Responsive

    View full-size slide

  36. Time saved:
    +3 hours!

    View full-size slide

  37. “We need a dropdown”
    Everyone and their mother has a
    dropdown implementation.
    Which one should I use?

    View full-size slide

  38. After 30 minutes. Done.

    View full-size slide

  39. Time saved:
    +4 hours!

    View full-size slide

  40. 4. JS Plugins
    Modals & Tooltips

    View full-size slide

  41. Not so good for:
    + Yet another framework
    + Use it as a design or as is

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  44. 2) Making development &
    prototyping faster

    View full-size slide

  45. Time saved total:
    +27 hours!

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide