1. Size matters

Everything in Eleven is build on the base of 1rem (16px in a standard browser) It dosn't matter if its spacing between elements, size of an element or the line height, it should always be dividable with 8 as shown in the element size

element size

Name	pixel value	1/2	pixel value
0	0	0.5	8
1	16	1.5	24
2	32	2.5	40
3	48	3.5	56
4	64	4.5	72
5	80	5.5	88
6	96	6.5	104
7	112	7.5	120
8	128	8.5	136
9	144	9.5	152
10	160	10.5	168
11	176	11.5	184
12	192	12.5	200

"page" size

Instead of using device names iphone, desktop etc were gonna use small, medium, large xl

| name | em size| screensize px | | -------- |------:| ----- | ----- | small | 47.99 | > 767 | | medium | 48 - 61.99 |768 - 991 | | large | 62 - 79.99rem- | 992 - 1279,84 | | XL | 80rem + | 1280+

mediaqueries

/* small */
@media (max-width: 47.99rem){ ... }

/* medium */
@media (min-width: 48rem) and (max-width: 61.99rem){ ... }

/* large */
@media (min-width: 62rem) and (max-width: 79.99rem){ ... }

/* xl */
@media (min-width: 82rem){ ... }