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

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