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.

Transcript

1. foolab.ca | @foolabca Bootstrap:
   Mobile Sites in Minutes Fluent, San Francisco - April 21, 2015
2. Anna Filina • Developer • Problem solver • Coach • Advisor 2
3. Objectives • Choose responsive • Create mobile sites faster • Introduce Bootstrap • Transform your site 3
4. Mobile world 4 App Site Alternative Responsive Mobile
5. Native issues • Effort for current & future platforms. • Many variables: ◦ devices, ◦ browsers, ◦ capabilities. • Need to download & install. • Useful for task-oriented apps. 5
6. Mobile advantages • Quicker and less expensive. • No download, no installation. • Others link to your site. • Point of entry for first-time users. • Useful for content-oriented sites. 6
7. Responsive advantages • Fully adapts to the viewport size. • No redirects. • Single website. • Fastest & cheapest. 7
8. Example 8
9. What is Bootstrap?
10. Frontend framework • Helper CSS classes (class="navbar"). • Grid layout. • JS for more advanced features ◦ Dropdown menu ◦ Tabs ◦ Carousel • Works on any modern device. 10
11. Advantages • Widely used • Rich documentation • Many themes • Easy to learn and use 11
12. Let's build stuff!
13. index.html <link href="css/bootstrap.min.css" rel="stylesheet"> 13
14. index.html <div class="container"> <div class="row"> <div class="col-sm-6">...</div> <div class="col-sm-6">...</div> </div> </div> <!-- sm = 768px --> 14
15. Output comparison Small+: Extra
 small: 15
16. index.html <link href="css/layout.css" rel="stylesheet"> ... <div class="col-sm-6"> <div class="example"> ... </div> </div> 16
17. layout.css @media (max-width: 767px) { div.example { border-bottom: 1px solid #ccc; padding: 0 0 10px 0; } } @media (min-width: 768px) { div.example { border: 1px solid #ccc; padding: 10px; } } 17
18. 4 sizes • xs ◦ 767- ◦ Phones • sm ◦ 768+ ◦ Tablets
 • md ◦ 992+ ◦ Desktops • lg ◦ 1200+ ◦ Large desktops 18
19. Building a
    complete site
20. Header 20 Extra
 small: Small+:
21. Header - small 21 6 6 col-sm-6 col-sm-6
22. Header - extra small 22 8 4 col-xs-8 col-xs-4
23. header.html <div class="col-xs-8 col-sm-6"> ... </div> <div class="col-xs-4 col-sm-6"> <nav class="navbar"> ... </nav> </div> 23
24. header.html <!-- inside nav tag --> <div class="navbar-header"> <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">Menu</button> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav">...</ul> </div> 24
25. Spotlight 25 Extra
 small: Small+:
26. 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> 26
27. Content 27 Responsive video Left-aligned image Button with icon
28. content.html 28 <div class="embed-responsive embed-responsive-16by9"> <iframe class="embed-responsive-item" src="..."> </iframe> </div>
29. content.html 29 <div class="media"> <img class="media-object pull-left" src="..."> <div class="media-body">...</div> </div>
30. content.html 30 <span class="glyphicon glyphicon-user"></span>
31. Glyphicons 31 Color, background, size, shadow, etc.
32. Final result 32
33. Advanced example 33
34. Advanced example 34
35. Other features • Carousel. • Popups. • Progress bars. • Pagination. • Button dropdown. • ... 35
36. Tips • Don't make user scroll too much (shortcuts). • Make descriptive button labels. • Keep transitions to minimum. • Cordova / PhoneGap to convert to native. 36
37. Services • Development: PHP, JS, etc. • Fix problems: bugs, performance, etc. • Workshops: testing, Symfony, AngularJS, APIs, etc. • Advisor: testing strategy, legacy code, speed up development, etc. 37
38. Useful links • What is supported?
 http://getbootstrap.com/getting-started/#support • Responsive image replacement:
 https://github.com/scottjehl/picturefill 38
39. @afilina afilina.com