Grid

The grid consists of 40px columns and 40px gutters, and uses a baseline of 20px.

Breakpoint Widths	Container	# of Columns
`$bp-xxs: 320px;`	`100%`	`$col-xxs: 4;`
`$bp-xs: 500px;`	`440px`	`$col-xs: 6;`
`$bp-s: 760px;`	`600px`	`$col-s: 8;`
`$bp-m: 1020px;`	`920px`	`$col-m: 12;`
`$bp-l: 1320px;`	`1240px`	`$col-l: 16;`
`$bp-xl: 1600px;`	`1560px`	`$col-xl: 20;`

By default, the page width caps at 1320px/16cols. However, the system supports larger designs.

Ems

Pixels are now safe to use, but the previous em functions are still supported. Note: The basefont is now 15px, not 16px.

/* I want the font-size to be 14px. */
font-size: em(14); // Units not required. Pass up to 4 parameters.
/* The base for which ems are calculated is now 14px.
 * To calculate the correct margins, you must pass the new base value. */
margin: em(24 0, 14);
/* ^This outputs as margin: 1.71429em 0, which would be 24px 0 on a base of 14px */

Vertical Rhythm

p {
  line-height: em($baseline); // 15px font-size with 20px line-height
}
p.lead {
  font-size: em(24);
  line-height: em($baseline*1.5, 24); // 24px font-size with 30px line-height
}