The hamburger
Under 768px the nav links fold behind three bars. Here it opens with a hidden checkbox and a :checked selector, so it works without JavaScript.
Device lab · 2013
One site, every screen
Below is Hatchly, an invented startup whose homepage is built the way thousands were between 2010 and 2015: a 12-column fluid grid, a few media queries and a navbar that folds into a hamburger. Pick a device width or drag the frame’s edge and watch the layout reflow.
Resize the Hatchly homepage
Drag the grip on the right edge, or focus it and use the arrow keys. Wide frames are shrunk to fit your screen; the page inside still thinks it is that wide.
What to look for
Fluid grid & images
Columns are percentages (33.333%), not pixels, and images get max-width: 100% so they shrink with their column.
The hero carousel
Every startup had one: three slides, arrows and little dots. Usability studies later showed almost nobody clicked past slide one.
Mobile first
Styles start with the phone layout and use min-width queries to add columns as space appears, the approach Bootstrap 3 adopted in 2013.
View source: the grid in 14 lines
<meta name="viewport" content="width=device-width, initial-scale=1">
.container { margin: 0 auto; padding: 0 15px; }
.row { margin: 0 -15px; }
.row:after { content: ""; display: table; clear: both; }
[class*="col-"] { min-height: 1px; padding: 0 15px; }
@media (min-width: 768px) {
.container { width: 750px; }
.col-sm-4 { float: left; width: 33.33333333%; }
}
@media (min-width: 992px) {
.container { width: 970px; }
.col-md-7 { float: left; width: 58.33333333%; }
}“Rather than tailoring disconnected designs to each of an ever-increasing number of web devices, we can treat them as facets of the same experience.”