Bootstrap: Mobile Sites in Minutes

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

B3b2139e4f2c0eca4efe2379fcebc1c5?s=128

Anna Filina

August 23, 2014
Tweet

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