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