Bootstrap: Mobile Sites in Minutes

Bootstrap is a front-end framework that allows you to create responsive layouts, meaning that they automatically adjust to any screen size. It's easy to use, fast to integrate and looks amazing. This presentation will teach you how to quickly create an adaptive layout and with little effort. It will also feature a case study of transforming an existing web application.

Code: https://github.com/afilina/bootstrap-intro

Transcript

1. foolab.ca | @foolabca Bootstrap: Mobile Sites in Minutes CakeFest, Madrid - August 23, 2014
2. Anna Filina • Developer • Problem solver • Coach • Advisor 2
3. Objectives • Create mobile sites faster • Introduce Bootsrap • Transform your site 3
4. Alternatives • Application ◦ Requires download ◦ Development effort & maintenance • Alternative site ◦ Redirects ◦ Development effort & maintenance 4
5. Responsive design • No redirects • Adjusts to size • Minimal development effort • Single website maintenance 5
6. Example 6
7. What is Bootstrap?
8. Frontend framework • Helper CSS classes (class="navbar") • JS for more advanced features ◦ Dropdown menu ◦ Tabs • Works on any modern device 8
9. Advantages • Widely used • Rich documentation • Many themes • Easy to learn and use 9
10. index.html <link href="css/bootstrap.min.css" rel="stylesheet"> 10
11. index.html <div class="container"> <div class="row"> <div class="col-sm-6">...</div> <div class="col-sm-6">...</div> </div> </div> <!-- sm = 768px --> 11
12. Output comparison Small: Extra small: 12
13. index.html <link href="css/layout.css" rel="stylesheet"> ... <div class="col-sm-6"> <div class="example"> ... </div> </div> 13
14. layout.css @media (max-width: 767px) { div.example { border: none; border-bottom: 1px solid #ccc; padding: 0 0 10px 0; } } @media (min-width: 768px) { div.example { border: 1px solid #ccc; padding: 10px; } } 14
15. 4 sizes • xs ◦ 767- ◦ Phones • sm ◦ 768+ ◦ Tablets • md ◦ 992+ ◦ Desktops • lg ◦ 1200+ ◦ Large desktops 15
16. Building a complete site
17. Header 17 Extra small: Small:
18. Header - small 18 6 6 col-sm-6 col-sm-6
19. Header - extra small 19 8 4 col-xs-8 col-xs-4
20. header.html <div class="col-xs-8 col-sm-6"> ... </div> <div class="col-xs-4 col-sm-6"> <nav class="navbar"> ... </nav> </div> 20
21. header.html <!-- inside nav tag --> <div class="navbar-header"> <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">...</button> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav">...</ul> </div> 21
22. Spotlight 22 Extra small: Small:
23. spotlight.html <div class="col-sm-4 hidden-xs">...</div> <div class="col-sm-4"> <img src="..." class="img-responsive"> </div> <div class="col-sm-4 hidden-xs">...</div> 23
24. Content 24 Responsive video Left-aligned image Button with icon
25. content.html 25 <div class="embed-responsive embed- responsive-16by9"> <iframe class="embed-responsive-item" src="..."> </iframe> </div>
26. content.html 26 <div class="media"> <img class="media-object pull-left" src="..."> <div class="media-body">...</div> </div>
27. content.html 27 <span class="glyphicon glyphicon-user"></span>
28. Glyphicons 28 Color, background, size, shadow, etc.
29. Final result 29
30. Useful links • What is supported? http://getbootstrap.com/getting-started/#support • Responsive image replacement: https://github.com/kvendrik/responsive-images.js • @afilina 30
31. Services • Development: PHP, JS, etc. • Fix problems: bugs, performance, etc. • Coaching & workshops. • Advisor: testing strategy, architecture, etc. 31