Desktop-first to Mobile-first with Bootstrap

Desktop-first to Mobile-first with Bootstrap

Historically Bootstrap has been desktop-first—since the initial release and every subsequent update. With the upcoming release of v3, we've switched to a mobile-first approach. We're still finalizing much of the CSS, but the last few months of development have been intense and an awesome learning experience. This talk highlights some of the things I've learned along the way—some design, some code, and some still unanswered questions.

This talk was given at the Responsive Web Design meetup in SF, sponsored by Rocket Lawyer.

Bc4ab438f7a4ce1c406aadc688427f2c?s=128

Mark Otto

April 26, 2013
Tweet

Transcript

  1. 1.

    B

  2. 5.

    B

  3. 7.

    1ST

  4. 16.

    // Disable iOS/WinMobile font size changes @media screen and (max-device-width:

    480px) { html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } } 1 2 3 4 5 6 7
  5. 18.

    // Using rems means double the code // if you

    want any IE8 support. .element { font-size: 32px; font-size: 3.2rem; } 1 2 3 4 5 6
  6. 19.

    // And what about margin, padding, etc? // Do we

    double all those, too? .element { font-size: 32px; font-size: 3.2rem; margin: 10px 0; margin: .5rem 0; padding: 10px 15px; padding: 1rem 1.5rem; } 1 2 3 4 5 6 7 8 9 10
  7. 21.

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements

    and media queries --> <!--[if lt IE 9]> <script src="/js/html5shiv.js"></script> <script src="/js/respond.min.js"></script> <![endif]--> 1 2 3 4 5 6 7 8
  8. 25.
  9. 29.

    Be efficient, for your sake, and for file size Document

    your overrides Don’t undo yourself
  10. 30.

    .example { margin: 40px; } // Bad overrides .example-modifier {

    margin: 40px 0; } // Better overrides .example-modifier { margin-left: 0; margin-right: 0; } 1 2 3 4 5 6 7 8 9 10 11 12 13 14
  11. 31.

    // Bootstrap 2 .navbar-fixed-top { position: fixed; top: 0; left:

    0; right: 0; } @media screen and (max-width: 480px) { .navbar-fixed-top { position: static; } } 1 2 3 4 5 6 7 8 9 10 11 12 13 14
  12. 32.

    1 2 3 4 5 6 7 8 9 10

    // Bootstrap 3 @media screen and (min-width: 768px) { .navbar-fixed-top { position: fixed; top: 0; left: 0; right: 0; } }
  13. 34.

    Forget all the embellishments early on Strip everything, and add

    it back later Treat it like a boss prototype
  14. 38.

    Android’s scroll is laggier than iOS iOS has problems updating

    fixed elements Responsive navs in limited viewports
  15. 41.

    Tap targets are super small Horizontal space is also rather

    limited But there are workarounds if you need ‘em
  16. 42.

    Dropdown link Dropdown link Dropdown link Dropdown link ▶ Dropdown

    link Dropdown link Dropdown link Dropdown link ▶ Dropdown link ▶ Submenu link Submenu link Submenu link Submenu link Submenu link Dropdown link Dropdown link Dropdown link Dropdown link ▶ Back Submenu link Submenu link Submenu link Submenu link ⾢ Dropdown link Dropdown link Dropdown link Dropdown link ▼ Dropdown link Dropdown link Dropdown link Dropdown link ▼ Submenu link Submenu link Submenu link Submenu lin Dropdown link ▼ Submenu link Submenu link Submenu link Submenu link