Arjun Patel
121 lines
2.3 KiB
SCSS
121 lines
2.3 KiB
SCSS
// grid.scss v0.1-dev | @ajlkn | MIT licensed */
|
|
|
|
// Mixins.
|
|
|
|
/// Initializes grid classes.
|
|
/// @param {mixed} $gutters Gutters (either a single number to set both column/row gutters, or a list to set them individually).
|
|
/// @param {string} $suffix Optional column class suffix.
|
|
/// @param {list} $override Optional list of column classes to override.
|
|
@mixin grid($gutters: 1.5em, $suffix: '', $override: ()) {
|
|
|
|
// Initialize.
|
|
$cols: 12;
|
|
$multipliers: 0, 0.25, 0.5, 1, 1.50, 2.00;
|
|
$unit: 100% / $cols;
|
|
$suffixes: join($override, ($suffix));
|
|
|
|
// Gutters.
|
|
$guttersCols: null;
|
|
$guttersRows: null;
|
|
|
|
@if (type-of($gutters) == 'list') {
|
|
|
|
$guttersCols: nth($gutters, 1);
|
|
$guttersRows: nth($gutters, 2);
|
|
|
|
}
|
|
@else {
|
|
|
|
$guttersCols: $gutters;
|
|
$guttersRows: 0;
|
|
|
|
}
|
|
|
|
// Row.
|
|
.row {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
box-sizing: border-box;
|
|
|
|
// Columns.
|
|
> * {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
// Gutters.
|
|
&.gtr-uniform {
|
|
> * {
|
|
> :last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
// Step through suffixes.
|
|
@each $suffix in $suffixes {
|
|
|
|
// Suffix.
|
|
@if ($suffix != '') {
|
|
$suffix: '-' + $suffix;
|
|
}
|
|
@else {
|
|
$suffix: '';
|
|
}
|
|
|
|
// Row.
|
|
.row {
|
|
|
|
// Important.
|
|
> .imp#{$suffix} {
|
|
order: -1;
|
|
}
|
|
|
|
// Columns, offsets.
|
|
@for $i from 1 through $cols {
|
|
> .col-#{$i}#{$suffix} {
|
|
width: $unit * $i;
|
|
}
|
|
|
|
> .off-#{$i}#{$suffix} {
|
|
margin-left: $unit * $i;
|
|
}
|
|
}
|
|
|
|
// Step through multipliers.
|
|
@each $multiplier in $multipliers {
|
|
|
|
// Gutters.
|
|
$class: null;
|
|
|
|
@if ($multiplier != 1) {
|
|
$class: '.gtr-' + ($multiplier * 100);
|
|
}
|
|
|
|
&#{$class} {
|
|
margin-top: ($guttersRows * $multiplier * -1);
|
|
margin-left: ($guttersCols * $multiplier * -1);
|
|
|
|
> * {
|
|
padding: ($guttersRows * $multiplier) 0 0 ($guttersCols * $multiplier);
|
|
}
|
|
|
|
// Uniform.
|
|
&.gtr-uniform {
|
|
margin-top: $guttersCols * $multiplier * -1;
|
|
|
|
> * {
|
|
padding-top: $guttersCols * $multiplier;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} |