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         }