Migrated from @blog -> @site
[editorial.git] / assets / main / sass / libs / _html-grid.scss
1 // html-grid.scss v1.0 | @ajlkn | MIT licensed */
2
3 // Mixins.
4
5 /// Initializes the current element as an HTML grid.
6 /// @param {mixed} $gutters Gutters (either a single number to set both column/row gutters, or a list to set them individually).
7 /// @param {mixed} $suffix Column class suffix (optional; either a single suffix or a list).
8 @mixin html-grid($gutters: 1.5em, $suffix: '') {
9
10 // Initialize.
11 $cols: 12;
12 $multipliers: 0, 0.25, 0.5, 1, 1.50, 2.00;
13 $unit: 100% / $cols;
14
15 // Suffixes.
16 $suffixes: null;
17
18 @if (type-of($suffix) == 'list') {
19 $suffixes: $suffix;
20 }
21 @else {
22 $suffixes: ($suffix);
23 }
24
25 // Gutters.
26 $guttersCols: null;
27 $guttersRows: null;
28
29 @if (type-of($gutters) == 'list') {
30
31 $guttersCols: nth($gutters, 1);
32 $guttersRows: nth($gutters, 2);
33
34 }
35 @else {
36
37 $guttersCols: $gutters;
38 $guttersRows: 0;
39
40 }
41
42 // Row.
43 display: flex;
44 flex-wrap: wrap;
45 box-sizing: border-box;
46 align-items: stretch;
47
48 // Columns.
49 > * {
50 box-sizing: border-box;
51 }
52
53 // Gutters.
54 &.gtr-uniform {
55 > * {
56 > :last-child {
57 margin-bottom: 0;
58 }
59 }
60 }
61
62 // Alignment.
63 &.aln-left {
64 justify-content: flex-start;
65 }
66
67 &.aln-center {
68 justify-content: center;
69 }
70
71 &.aln-right {
72 justify-content: flex-end;
73 }
74
75 &.aln-top {
76 align-items: flex-start;
77 }
78
79 &.aln-middle {
80 align-items: center;
81 }
82
83 &.aln-bottom {
84 align-items: flex-end;
85 }
86
87 // Step through suffixes.
88 @each $suffix in $suffixes {
89
90 // Suffix.
91 @if ($suffix != '') {
92 $suffix: '-' + $suffix;
93 }
94 @else {
95 $suffix: '';
96 }
97
98 // Row.
99
100 // Important.
101 > .imp#{$suffix} {
102 order: -1;
103 }
104
105 // Columns, offsets.
106 @for $i from 1 through $cols {
107 > .col-#{$i}#{$suffix} {
108 width: $unit * $i;
109 }
110
111 > .off-#{$i}#{$suffix} {
112 margin-left: $unit * $i;
113 }
114 }
115
116 // Step through multipliers.
117 @each $multiplier in $multipliers {
118
119 // Gutters.
120 $class: null;
121
122 @if ($multiplier != 1) {
123 $class: '.gtr-' + ($multiplier * 100);
124 }
125
126 &#{$class} {
127 margin-top: ($guttersRows * $multiplier * -1);
128 margin-left: ($guttersCols * $multiplier * -1);
129
130 > * {
131 padding: ($guttersRows * $multiplier) 0 0 ($guttersCols * $multiplier);
132 }
133
134 // Uniform.
135 &.gtr-uniform {
136 margin-top: $guttersCols * $multiplier * -1;
137
138 > * {
139 padding-top: $guttersCols * $multiplier;
140 }
141 }
142
143 }
144
145 }
146
147 }
148
149 }