130
2080
140
2240
150
2400
160
2560
170
2720
180
2880
190
3040
200
3200
210
3360
220
3520
230
3680
240
3840
250
4000
260
4160
270
4320
280
4480
290
4640
300
4800
310
4960
320
5120
330
5280
340
5440
350
5600
360
5760
370
5920
380
6080
390
6240
400
6400
410
6560
420
6720
430
6880
440
7040
450
7200
460
7360
470
7520
480
7680
490
7840
500
8000
85
1360
90
1440
95
1520
100
1600
105
1680
110
1760
115
1840
120
1920
80
1280
49
784
53
848
57
912
61
976
65
1040
69
1104
73
1168
77
1232
33
528
36
576
39
624
42
672
45
720
22
352
24
384
26
416
28
448
30
480
1
16
2
32
3
48
4
64
5
80
6
96
7
112
8
128
9
144
10
160
11
176
12
192
13
208
14
224
15
240
16
256
17
272
18
288
19
304
20
320

css-em-grid

EM grid is a pure HTML5/CSS3 tool to help with mobile-first, device-agnostic, responsive development workflows. Stylus/Jade includes and HTML partial versions are available. It's all on GitHub and NPM.

npm install css-em-grid --save-dev

For now you can just grab or link to stuff in

node_modules/css-em-grid/styles

Why?

First of all, you hate grid frameworks like Foundation and Bootstrap. They add unnecesary weight and syntax to remember. If you ever do need a grid, you build one for your needs in a few lines.

You are a true modern, mobile-first, device-agnostic web developer who always starts with something that looks great on anything 20em and smaller (320px if you haven't messed with your base font, which you haven't 'cuz you're smart) and work your way up through media queries while resizing without a care to any device-specific pixel width. You give yourself about 1em to play with and notice you need granularity in different widths as you get larger. You love EMs and percentages and size everything in them so your responsive site is bullet-proof against even users zooming in or out in their browsers. In fact, you actually like the relative nature of the em font-sizing because you've organized your content and styles so you expect all your fonts to resize based on one base-font em change, after all, that's why it was created that way.

Your eyes aren't so good even though you're not very old and you hate squinting at width using whatever tool you use during your resizing sessions. You prefer not to make a half-dozen extra clicks to even see the viewport size when you do. You probably have livereload working like a champ and prefer to use the mouse as little as possible.

But most of all, you hate that webkit browsers such as Chrome do not count the 17 or so pixels in your viewport's right edge which means you never see those 17 pixels because you are buildng SPAs that always trigger the scrollbar and since 17 pixels is about 1em, your responsive adjustment buffer, this pisses you off enough find or make something to get around it.

Welcome.

You just might like this visual guide through the perils and power of em sizing that you don't even have to think about much.

Nothing fancy, no JavaScript, no extensions to load in your browser, etc. Just add the position fixed em grid to your page during workflow, adjust to taste with the #em-grid selector and you'll be seeing rainbows of ems in no time.

Then again, you could just use a Wordpress template.