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 Slide

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

    View Slide

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

    View Slide

  4. Building.

    View Slide

  5. How do we use our
    resources well?

    View Slide

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

    View Slide

  7. Why Bootstrap?

    View Slide

  8. Design Engineering
    Frontend

    View Slide

  9. Pairing designers
    with developers

    View Slide

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

    View Slide

  11. It helps you to
    communicate

    View Slide

  12. It saves
    time

    View Slide

  13. How?

    View Slide

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

    View Slide

  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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  20. 1. Include it

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  26. View Slide

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

    View Slide

  28. View Slide

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

    View Slide

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

    View Slide

  31. Time saved:
    +16 hours!

    View Slide

  32. 2. Base CSS:
    Icons & Buttons

    View Slide

  33. Comes with icons

    View Slide


  34. .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 Slide

  35. Time saved:
    +1 hour!

    View Slide

  36. 3. Components
    Navbar & Dropdowns

    View Slide

  37. Everyone needs
    their Navbars.

    View Slide

  38. View Slide

  39. “Simple” structure,
    xed or static



    ...



    View Slide

  40. Also
    Responsive

    View Slide

  41. Time saved:
    +3 hours!

    View Slide

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

    View Slide

  43. View Slide

  44. After 30 minutes. Done.

    View Slide

  45. Time saved:
    +4 hours!

    View Slide

  46. 4. JS Plugins
    Modals & Tooltips

    View Slide

  47. To wrap up

    View Slide

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

    View Slide

  49. Good for:

    View Slide

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

    View Slide

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

    View Slide

  52. 2) Making development &
    prototyping faster

    View Slide

  53. Time saved total:
    +27 hours!

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide