The grid is a 12-column fluid grid with a max width of 960px, that shrinks with the browser/device at smaller sizes. The syntax is simple and it makes coding responsive much easier. Go ahead, resize the browser.
At resolutions < 1024px, the max width of the grid is set to 90%
At < 600px, the small (mobile) break point kicks in, for anything larger target the large breakpoint. On rare occasions you may need to target the full breakpoint (>1024px).
The gutters are set to 16px and each column layout is calculated in percentages.
The grid and therefore everything is mobile first design. So code everything for the mobile view,and then override that for the desktop view. Media queries should always use min-width to maintainconsistency with the grid. Also, place small first, then large, then full in your css as they all havethe same css specificity and that means the later ones apply over the former ones .
@media screen and (min-width: $small-break) {
font-size: .75rem;
}
@media screen and (min-width: $large-break) {
font-size: 1rem;
}
@media screen and (min-width: $full-break) {
font-size: 2rem;
}This example uses the same column number classes for large and small sizes. It will retain its arrangement when you resize the browser or go mobile. For additional documentation visit Basic Grid.
Examples on how the break points work below.
basic grid also has hide-on-{size} and show-on-{size}