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
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 styleguide
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
27. New Kippt landing page: 1: <link href="bootstrap.css" rel="stylesheet"> 2: Grab/write the markup 3: <link href="landing.scss" rel="stylesheet">
29. With Bootstrap: Took half-day ~10 major changes lots of tweaking
30. Without Bootstrap: ~1-3 days lots major changes even more of tweaking
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.
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?
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