Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Anna Filina

February 20, 2015
Tweet

More Decks by Anna Filina

Other Decks in Programming

Transcript

  1. foolab.ca | @foolabca
    Bootstrap:
    Mobile Sites in Minutes
    ConFoo, Montreal - February 20, 2015

    View full-size slide

  2. Anna Filina
    • Developer
    • Problem solver
    • Coach
    • Advisor
    2

    View full-size slide

  3. Objectives
    • Create mobile sites faster
    • Introduce Bootsrap
    • Transform your site
    3

    View full-size slide

  4. Alternatives
    • Application
    ◦ Requires download
    ◦ Development effort & maintenance
    • Alternative site
    ◦ Redirects
    ◦ Development effort & maintenance
    4

    View full-size slide

  5. Responsive design
    • No redirects
    • Adjusts to size
    • Minimal development effort
    • Single website maintenance
    5

    View full-size slide

  6. What is Bootstrap?

    View full-size slide

  7. Frontend framework
    • Helper CSS classes (class="navbar")
    • JS for more advanced features
    ◦ Dropdown menu
    ◦ Tabs
    • Works on any modern device
    8

    View full-size slide

  8. Advantages
    • Widely used
    • Rich documentation
    • Many themes
    • Easy to learn and use
    9

    View full-size slide

  9. index.html
    href="css/bootstrap.min.css" rel="stylesheet">
    10

    View full-size slide

  10. index.html


    ...
    ...



    11

    View full-size slide

  11. Output comparison
    Small:
    Extra

    small:
    12

    View full-size slide

  12. index.html

    ...


    ...


    13

    View full-size slide

  13. 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

    View full-size slide

  14. 4 sizes
    • xs
    ◦ 767-
    ◦ Phones
    • sm
    ◦ 768+
    ◦ Tablets

    • md
    ◦ 992+
    ◦ Desktops
    • lg
    ◦ 1200+
    ◦ Large desktops
    15

    View full-size slide

  15. Building a
    complete site

    View full-size slide

  16. Header
    17
    Extra

    small:
    Small:

    View full-size slide

  17. Header - small
    18
    6 6
    col-sm-6 col-sm-6

    View full-size slide

  18. Header - extra small
    19
    8 4
    col-xs-8 col-xs-4

    View full-size slide

  19. header.html

    ...



    ...


    20

    View full-size slide

  20. header.html


    data-toggle="collapse"
    data-target=".navbar-collapse">...


    ...

    21

    View full-size slide

  21. Spotlight
    22
    Extra

    small:
    Small:

    View full-size slide

  22. spotlight.html
    ...



    ...
    23

    View full-size slide

  23. Content
    24
    Responsive video
    Left-aligned image
    Button with icon

    View full-size slide

  24. content.html
    25




    View full-size slide

  25. content.html
    26


    ...

    View full-size slide

  26. content.html
    27

    View full-size slide

  27. Glyphicons
    28
    Color, background, size, shadow, etc.

    View full-size slide

  28. Final result
    29

    View full-size slide

  29. Services
    • Development: PHP, JS, etc.
    • Fix problems: bugs, performance, etc.
    • Workshops: Symfony, AngularJS, testing, etc.
    • Advisor: testing strategy, legacy code, etc.
    30

    View full-size slide

  30. Useful links
    • What is supported?

    http://getbootstrap.com/getting-started/#support
    • Responsive image replacement:

    https://github.com/kvendrik/responsive-images.js
    • @afilina
    31

    View full-size slide