|
1 |
// ======
|
|
2 |
// fx-grid.css
|
|
3 |
// flexbox grid system
|
|
4 |
// =====
|
|
5 |
|
|
6 |
$fx-grid-gutter: 1rem;
|
|
7 |
$fx-grid-half-gutter: $fx-grid-gutter / 2;
|
|
8 |
$fx-grid-cell-min-size: 10em; // for .fx-grid--auto
|
|
9 |
$fx-grid-mobile-limit: $very-small-limit;
|
|
10 |
$fx-grid-tablet-limit: $grid-mobile-limit;
|
|
11 |
$max-cols-mobile : 3;
|
|
12 |
$max-cols-tablet : 6;
|
|
13 |
$max-cols-desktop : 9;
|
|
14 |
|
|
15 |
// custom media queries
|
|
16 |
// ex. @media ($max-grid-mobile-viewport) {}
|
|
17 |
$max-grid-mobile-viewport: "max-width: #{$fx-grid-mobile-limit}";
|
|
18 |
$min-grid-tablet-viewport: "min-width: #{$fx-grid-mobile-limit + 1}";
|
|
19 |
$min-grid-desktop-viewport: "min-width: #{$fx-grid-tablet-limit + 1}";
|
|
20 |
|
|
21 |
.fx-grid,
|
|
22 |
[class*="fx-grid--"] {
|
|
23 |
display: flex;
|
|
24 |
flex-wrap: wrap;
|
|
25 |
margin: 0;
|
|
26 |
padding: 0;
|
|
27 |
margin-left: -1 * $fx-grid-half-gutter;
|
|
28 |
margin-right: -1 * $fx-grid-half-gutter;
|
|
29 |
/* if flex item are list */
|
|
30 |
list-style-type: none;
|
|
31 |
|
|
32 |
> * {
|
|
33 |
box-sizing: border-box;
|
|
34 |
margin-left: $fx-grid-half-gutter;
|
|
35 |
margin-right: $fx-grid-half-gutter;
|
|
36 |
flex-basis: calc(100% - #{$fx-grid-gutter});
|
|
37 |
hyphens: auto;
|
|
38 |
}
|
|
39 |
}
|
|
40 |
|
|
41 |
// mode auto
|
|
42 |
.fx-grid--auto {
|
|
43 |
> * {
|
|
44 |
flex-basis: $fx-grid-cell-min-size;
|
|
45 |
flex-shrink: 1;
|
|
46 |
flex-grow: 1;
|
|
47 |
}
|
|
48 |
}
|
|
49 |
|
|
50 |
// mode cols
|
|
51 |
@for $i from 2 through $max-cols-mobile {
|
|
52 |
.fx-grid--#{$i} > *,
|
|
53 |
[class*="fx-grid--"][class*="--m#{$i}"] > * {
|
|
54 |
flex-basis: calc(#{100%/$i} - #{$fx-grid-gutter});
|
|
55 |
}
|
|
56 |
}
|
|
57 |
@media ($min-grid-tablet-viewport) {
|
|
58 |
@for $i from 2 through $max-cols-tablet {
|
|
59 |
[class*="fx-grid--"][class*="--t#{$i}"] > * {
|
|
60 |
flex-basis: calc(#{100%/$i} - #{$fx-grid-gutter});
|
|
61 |
}
|
|
62 |
}
|
|
63 |
}
|
|
64 |
@media ($min-grid-desktop-viewport) {
|
|
65 |
@for $i from 2 through $max-cols-desktop {
|
|
66 |
[class*="fx-grid--"][class*="--d#{$i}"] > * {
|
|
67 |
flex-basis: calc(#{100%/$i} - #{$fx-grid-gutter});
|
|
68 |
}
|
|
69 |
}
|
|
70 |
}
|
|
71 |
|
|
72 |
// custom grid cell size
|
|
73 |
.fx-grid,
|
|
74 |
[class*="fx-grid--"] {
|
|
75 |
@for $i from 1 through $max-cols-mobile {
|
|
76 |
@for $j from 1 through $i {
|
|
77 |
> .size--#{$j}-#{$i},
|
|
78 |
> [class*="size--"][class*="--m#{$j}-#{$i}"] {
|
|
79 |
flex-basis: calc( #{100%*$j/$i} - #{$fx-grid-gutter});
|
|
80 |
flex-grow: 0;
|
|
81 |
}
|
|
82 |
}
|
|
83 |
}
|
|
84 |
@media ($min-grid-tablet-viewport) {
|
|
85 |
@for $i from 1 through $max-cols-tablet {
|
|
86 |
@for $j from 1 through $i {
|
|
87 |
> [class*="size--"][class*="--t#{$j}-#{$i}"] {
|
|
88 |
flex-basis: calc( #{100%*$j/$i} - #{$fx-grid-gutter});
|
|
89 |
flex-grow: 0;
|
|
90 |
}
|
|
91 |
}
|
|
92 |
}
|
|
93 |
}
|
|
94 |
@media ($min-grid-desktop-viewport) {
|
|
95 |
@for $i from 1 through $max-cols-desktop {
|
|
96 |
@for $j from 1 through $i {
|
|
97 |
> [class*="size--"][class*="--d#{$j}-#{$i}"] {
|
|
98 |
flex-basis: calc( #{100%*$j/$i} - #{$fx-grid-gutter});
|
|
99 |
flex-grow: 0;
|
|
100 |
}
|
|
101 |
}
|
|
102 |
}
|
|
103 |
}
|
|
104 |
}
|