|
0
|
1 /// Grid system
|
|
|
2 //
|
|
|
3 // Generate semantic grid columns with these mixins.
|
|
|
4
|
|
|
5 @mixin make-container() {
|
|
|
6 margin-right: auto;
|
|
|
7 margin-left: auto;
|
|
|
8 padding-right: ($grid-gutter-width / 2);
|
|
|
9 padding-left: ($grid-gutter-width / 2);
|
|
|
10 width: 100%;
|
|
|
11 }
|
|
|
12
|
|
|
13
|
|
|
14 // For each breakpoint, define the maximum width of the container in a media query
|
|
|
15 @mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
|
|
|
16 @each $breakpoint, $container-max-width in $max-widths {
|
|
|
17 @include media-breakpoint-up($breakpoint, $breakpoints) {
|
|
|
18 max-width: $container-max-width;
|
|
|
19 }
|
|
|
20 }
|
|
|
21 }
|
|
|
22
|
|
|
23 @mixin make-row() {
|
|
|
24 display: flex;
|
|
|
25 flex-wrap: wrap;
|
|
|
26 margin-right: ($grid-gutter-width / -2);
|
|
|
27 margin-left: ($grid-gutter-width / -2);
|
|
|
28 }
|
|
|
29
|
|
|
30 @mixin make-col-ready() {
|
|
|
31 position: relative;
|
|
|
32 // Prevent columns from becoming too narrow when at smaller grid tiers by
|
|
|
33 // always setting `width: 100%;`. This works because we use `flex` values
|
|
|
34 // later on to override this initial width.
|
|
|
35 width: 100%;
|
|
|
36 min-height: 1px; // Prevent collapsing
|
|
|
37 padding-right: ($grid-gutter-width / 2);
|
|
|
38 padding-left: ($grid-gutter-width / 2);
|
|
|
39 }
|
|
|
40
|
|
|
41 @mixin make-col($size, $columns: $grid-columns) {
|
|
|
42 flex: 0 0 percentage($size / $columns);
|
|
|
43 // Add a `max-width` to ensure content within each column does not blow out
|
|
|
44 // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
|
|
|
45 // do not appear to require this.
|
|
|
46 max-width: percentage($size / $columns);
|
|
|
47 }
|
