_grid_variables.scss
| 1 | |
| 2 | // GRID |
| 3 | |
| 4 | $enable-grid-classes: true !default; |
| 5 | |
| 6 | // Grid breakpoints |
| 7 | // |
| 8 | // Define the minimum dimensions at which your layout will change, |
| 9 | // adapting to different screen sizes, for use in media queries. |
| 10 | |
| 11 | $grid-breakpoints: ( |
| 12 | xs: 0, |
| 13 | sm: 576px, |
| 14 | md: 768px, |
| 15 | lg: 992px, |
| 16 | xl: 1200px |
| 17 | ) !default; |
| 18 | |
| 19 | @include _assert-ascending($grid-breakpoints, "$grid-breakpoints"); |
| 20 | @include _assert-starts-at-zero($grid-breakpoints); |
| 21 | |
| 22 | |
| 23 | // Grid containers |
| 24 | // |
| 25 | // Define the maximum width of `.container` for different screen sizes. |
| 26 | |
| 27 | $container-max-widths: ( |
| 28 | sm: 540px, |
| 29 | md: 720px, |
| 30 | lg: 960px, |
| 31 | xl: 1140px |
| 32 | ) !default; |
| 33 | |
| 34 | @include _assert-ascending($container-max-widths, "$container-max-widths"); |
| 35 | |
| 36 | |
| 37 | // Grid columns |
| 38 | // |
| 39 | // Set the number of columns and specify the width of the gutters. |
| 40 | |
| 41 | $grid-columns: 12 !default; |
| 42 | $grid-gutter-width: 16px !default; |