149 lines
2.8 KiB
SCSS
149 lines
2.8 KiB
SCSS
// html-grid.scss v1.0 | @ajlkn | MIT licensed */
|
|
|
|
// Mixins.
|
|
|
|
/// Initializes the current element as an HTML grid.
|
|
/// @param {mixed} $gutters Gutters (either a single number to set both column/row gutters, or a list to set them individually).
|
|
/// @param {mixed} $suffix Column class suffix (optional; either a single suffix or a list).
|
|
@mixin html-grid($gutters: 1.5em, $suffix: '') {
|
|
|
|
// Initialize.
|
|
$cols: 12;
|
|
$multipliers: 0, 0.25, 0.5, 1, 1.50, 2.00;
|
|
$unit: 100% / $cols;
|
|
|
|
// Suffixes.
|
|
$suffixes: null;
|
|
|
|
@if (type-of($suffix) == 'list') {
|
|
$suffixes: $suffix;
|
|
}
|
|
@else {
|
|
$suffixes: ($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.
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
box-sizing: border-box;
|
|
align-items: stretch;
|
|
|
|
// Columns.
|
|
> * {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
// Gutters.
|
|
&.gtr-uniform {
|
|
> * {
|
|
> :last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Alignment.
|
|
&.aln-left {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
&.aln-center {
|
|
justify-content: center;
|
|
}
|
|
|
|
&.aln-right {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
&.aln-top {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
&.aln-middle {
|
|
align-items: center;
|
|
}
|
|
|
|
&.aln-bottom {
|
|
align-items: flex-end;
|
|
}
|
|
|
|
// Step through suffixes.
|
|
@each $suffix in $suffixes {
|
|
|
|
// Suffix.
|
|
@if ($suffix != '') {
|
|
$suffix: '-' + $suffix;
|
|
}
|
|
@else {
|
|
$suffix: '';
|
|
}
|
|
|
|
// 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;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
} |