Desktop-first to Mobile-first with Bootstrap

Hi, I’m @mdo. <3

Desktop-first Mobile-first to

With Bootstrap Or any other project, really.

B Created in 2011 v1: Desktop v2: Responsive v3: Mobile-ﬁrst

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

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

Mobile ﬁrst?

Media query up Designed from smallest viewport up Constrains design
to only the essentials

Let’s do this. Use this one weird trick to fix
all your code.

Global annoyances 1

<!DOCTYPE html> 1

// 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

Pixels or rems? 2

// 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

// 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

Responsive IE8? 3

1 2 3 4 5 6 7 8

Start small. 4

Start refactors with a single component Keep your browser window
narrow KISS (more on that later)

Uncomment, comment. 5

Don’t always start over Make it a painful refactor Will
help existing and future employees

Border-box er’ything. 6

// Consistent box-model * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing:
border-box; } 1 2 3 4 5 6

Avoid overrides. 7

Be eﬃcient, for your sake, and for ﬁle size Document
your overrides Don’t undo yourself

.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

// 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

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; } }

Design like it’s 2005. 8

Forget all the embellishments early on Strip everything, and add
it back later Treat it like a boss prototype

Media query strategy. 9

Single ﬁle, or embedded? Ideal world would be both honestly
We’re still ﬁguring this out

position: rough; 10

Android’s scroll is laggier than iOS iOS has problems updating
ﬁxed elements Responsive navs in limited viewports

Admin Admin Dashboard Reports Organizations Users Billing Settings Help Login
iPhone outline by @kirillz

Submenus are crap. 11

Tap targets are super small Horizontal space is also rather
limited But there are workarounds if you need ‘em

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

It depends. 12

No guideline ﬁts every situation This stuﬀ takes time and
work Follow your heart

Thanks, nerds! <3

Questions?

Desktop-first to Mobile-first with Bootstrap

Desktop-first to Mobile-first with Bootstrap

More Decks by Mark Otto

Other Decks in Technology

Featured

Transcript