1 // fixed-grid.scss v1.0 | @ajlkn | MIT licensed */
5 /// Initializes base fixed-grid classes.
6 /// @param {string} $vertical-align Vertical alignment of cells.
7 /// @param {string} $horizontal-align Horizontal alignment of cells.
8 @mixin fixed-grid-base($vertical-align: null, $horizontal-align: null) {
11 @include vendor('display', 'flex');
12 @include vendor('flex-wrap', 'wrap');
14 // Vertical alignment.
15 @if ($vertical-align == top) {
16 @include vendor('align-items', 'flex-start');
18 @else if ($vertical-align == bottom) {
19 @include vendor('align-items', 'flex-end');
21 @else if ($vertical-align == center) {
22 @include vendor('align-items', 'center');
25 @include vendor('align-items', 'stretch');
28 // Horizontal alignment.
29 @if ($horizontal-align != null) {
30 text-align: $horizontal-align;
35 @include vendor('flex-shrink', '1');
36 @include vendor('flex-grow', '0');
41 /// Sets up fixed-grid columns.
42 /// @param {integer} $columns Columns.
43 @mixin fixed-grid-columns($columns) {
46 $cell-width: 100% / $columns;
47 width: #{$cell-width};
52 /// Sets up fixed-grid gutters.
53 /// @param {integer} $columns Columns.
54 /// @param {number} $gutters Gutters.
55 @mixin fixed-grid-gutters($columns, $gutters) {
59 $cell-width: 100% / $columns;
61 padding: ($gutters * 0.5);
67 /// Sets up fixed-grid gutters (flush).
68 /// @param {integer} $columns Columns.
69 /// @param {number} $gutters Gutters.
70 @mixin fixed-grid-gutters-flush($columns, $gutters) {
74 $cell-width: 100% / $columns;
75 $cell-width-pad: $gutters / $columns;
77 padding: ($gutters * 0.5);
78 width: calc(#{$cell-width} + #{$cell-width-pad});
81 // Clear top/bottom gutters.
82 > :nth-child(-n + #{$columns}) {
86 > :nth-last-child(-n + #{$columns}) {
90 // Clear left/right gutters.
91 > :nth-child(#{$columns}n + 1) {
95 > :nth-child(#{$columns}n) {
99 // Adjust widths of leftmost and rightmost cells.
100 > :nth-child(#{$columns}n + 1),
101 > :nth-child(#{$columns}n) {
102 $cell-width: 100% / $columns;
103 $cell-width-pad: ($gutters / $columns) - ($gutters / 2);
105 width: calc(#{$cell-width} + #{$cell-width-pad});
110 /// Reset fixed-grid gutters (flush only).
111 /// Used to override a previous set of fixed-grid gutter classes.
112 /// @param {integer} $columns Columns.
113 /// @param {number} $gutters Gutters.
114 /// @param {integer} $prev-columns Previous columns.
115 @mixin fixed-grid-gutters-flush-reset($columns, $gutters, $prev-columns) {
119 $cell-width: 100% / $prev-columns;
120 $cell-width-pad: $gutters / $prev-columns;
122 padding: ($gutters * 0.5);
123 width: calc(#{$cell-width} + #{$cell-width-pad});
126 // Clear top/bottom gutters.
127 > :nth-child(-n + #{$prev-columns}) {
128 padding-top: ($gutters * 0.5);
131 > :nth-last-child(-n + #{$prev-columns}) {
132 padding-bottom: ($gutters * 0.5);
135 // Clear left/right gutters.
136 > :nth-child(#{$prev-columns}n + 1) {
137 padding-left: ($gutters * 0.5);
140 > :nth-child(#{$prev-columns}n) {
141 padding-right: ($gutters * 0.5);
144 // Adjust widths of leftmost and rightmost cells.
145 > :nth-child(#{$prev-columns}n + 1),
146 > :nth-child(#{$prev-columns}n) {
147 $cell-width: 100% / $columns;
148 $cell-width-pad: $gutters / $columns;
150 padding: ($gutters * 0.5);
151 width: calc(#{$cell-width} + #{$cell-width-pad});
156 /// Adds debug styles to current fixed-grid element.
157 @mixin fixed-grid-debug() {
159 box-shadow: 0 0 0 1px red;
162 box-shadow: inset 0 0 0 1px blue;
167 box-shadow: inset 0 0 0 1px green;
173 /// Initializes the current element as a fixed grid.
174 /// @param {integer} $columns Columns (optional).
175 /// @param {number} $gutters Gutters (optional).
176 /// @param {bool} $flush If true, clears padding around the very edge of the grid.
177 @mixin fixed-grid($settings: ()) {
184 @if (map-has-key($settings, 'debug')) {
185 $debug: map-get($settings, 'debug');
189 $vertical-align: null;
191 @if (map-has-key($settings, 'vertical-align')) {
192 $vertical-align: map-get($settings, 'vertical-align');
196 $horizontal-align: null;
198 @if (map-has-key($settings, 'horizontal-align')) {
199 $horizontal-align: map-get($settings, 'horizontal-align');
205 @if (map-has-key($settings, 'columns')) {
206 $columns: map-get($settings, 'columns');
212 @if (map-has-key($settings, 'gutters')) {
213 $gutters: map-get($settings, 'gutters');
219 @if (map-has-key($settings, 'flush')) {
220 $flush: map-get($settings, 'flush');
223 // Initialize base grid.
224 @include fixed-grid-base($vertical-align, $horizontal-align);
228 @include fixed-grid-debug;
231 // Columns specified?
232 @if ($columns != null) {
234 // Initialize columns.
235 @include fixed-grid-columns($columns);
237 // Gutters specified?
243 // Initialize gutters (flush).
244 @include fixed-grid-gutters-flush($columns, $gutters);
251 // Initialize gutters.
252 @include fixed-grid-gutters($columns, $gutters);
262 /// Resizes a previously-initialized grid.
263 /// @param {integer} $columns Columns.
264 /// @param {number} $gutters Gutters (optional).
265 /// @param {list} $reset A list of previously-initialized grid columns (only if $flush is true).
266 /// @param {bool} $flush If true, clears padding around the very edge of the grid.
267 @mixin fixed-grid-resize($settings: ()) {
274 @if (map-has-key($settings, 'columns')) {
275 $columns: map-get($settings, 'columns');
281 @if (map-has-key($settings, 'gutters')) {
282 $gutters: map-get($settings, 'gutters');
286 $prev-columns: false;
288 @if (map-has-key($settings, 'prev-columns')) {
289 $prev-columns: map-get($settings, 'prev-columns');
295 @if (map-has-key($settings, 'flush')) {
296 $flush: map-get($settings, 'flush');
300 @include fixed-grid-columns($columns);
302 // Gutters specified?
308 // Previous columns specified?
309 @if ($prev-columns) {
311 // Convert to list if it isn't one already.
312 @if (type-of($prev-columns) != list) {
313 $prev-columns: ($prev-columns);
316 // Step through list of previous columns and reset them.
317 @each $x in $prev-columns {
318 @include fixed-grid-gutters-flush-reset($columns, $gutters, $x);
323 // Resize gutters (flush).
324 @include fixed-grid-gutters-flush($columns, $gutters);
332 @include fixed-grid-gutters($columns, $gutters);