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

  2. Hi, I’m @mdo. <3

  3. Desktop-first Mobile-first to

  4. With Bootstrap Or any other project, really.

  5. B

  6. B Created in 2011 v1: Desktop v2: Responsive v3: Mobile-first

  7. 1ST

  8. It’s a shiny, hand-held world out there.

  9. What’s a nerd to do? We mobile-first that shit.

  10. Mobile first?

  11. Media query up Designed from smallest viewport up Constrains design

    to only the essentials
  12. Let’s do this. Use this one weird trick to fix

    all your code.
  13. Global annoyances 1

  14. <!DOCTYPE html> 1

  15. <meta name="viewport" content="width=device- width, initial-scale=1.0"> 1

  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
  17. Pixels or rems? 2

  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
  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
  20. Responsive IE8? 3

  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
  22. Start small. 4

  23. Start refactors with a single component Keep your browser window

    narrow KISS (more on that later)
  24. Uncomment, comment. 5

  25. Don’t always start over Make it a painful refactor Will

    help existing and future employees
  26. Border-box er’ything. 6

  27. // Consistent box-model * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing:

    border-box; } 1 2 3 4 5 6
  28. Avoid overrides. 7

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

    your overrides Don’t undo yourself
  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
  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
  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; } }
  33. Design like it’s 2005. 8

  34. Forget all the embellishments early on Strip everything, and add

    it back later Treat it like a boss prototype
  35. Media query strategy. 9

  36. Single file, or embedded? Ideal world would be both honestly

    We’re still figuring this out
  37. position: rough; 10

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

    fixed elements Responsive navs in limited viewports
  39. Admin Admin Dashboard Reports Organizations Users Billing Settings Help Login

    iPhone outline by @kirillz
  40. Submenus are crap. 11

  41. Tap targets are super small Horizontal space is also rather

    limited But there are workarounds if you need ‘em
  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
  43. It depends. 12

  44. No guideline fits every situation This stuff takes time and

    work Follow your heart
  45. Thanks, nerds! <3

  46. Questions?