/
_grid.scss
52 lines (41 loc) · 2.44 KB
/
_grid.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
@function lf-col($n, $column-width, $gutter) { @return ($n * $column-width) + (($n - 1) * $gutter); }
@function lf-push-pull($n, $column-width, $gutter) { @return lf-col($n, $column-width, $gutter) + $gutter + ($gutter/2); }
// Lasergrid - Static
// --------------------------------------------------------------- //
@mixin grid($columns: 12, $column-width: 55px, $gutter: 30px, $float: true, $push-pull: false) {
.wrapper { @include clearfix; margin: 0 auto; min-width: ($columns * $column-width) + ($gutter * $columns); }
.row { @include clearfix; margin: 0 auto; width: ($columns * $column-width) + ($gutter * $columns); }
.row .row { margin-left: -($gutter / 2); margin-right: -($gutter / 2); margin-top: 0; margin-bottom: 0; max-width: ($columns * $column-width) + ($gutter * $columns); width: auto; }
*[class*="col"] { margin:0 ($gutter / 2); @if $float == true { float:left; } @if $float != true { width: lf-col($columns, $column-width, $gutter) !important; } }
*[class*="push"], *[class*="pull"] { position: relative; }
$i : $columns;
@while $i > 0 {
.col#{$i} { width: lf-col($i, $column-width, $gutter); }
@if $push-pull == true {
.push#{$i} { margin-left: lf-push-pull($i, $column-width, $gutter); }
.pull#{$i} { margin-right: lf-push-pull($i, $column-width, $gutter); }
}
$i: $i - 1;
}
}
// Lasergrid - Fluid
// --------------------------------------------------------------- //
@mixin grid-fluid($columns: 12, $gutter: 30px, $max-width: 1000px, $float: true, $push-pull: true) {
@if $max-width != false { $gutter: percentage($gutter/$max-width); }
@if $max-width == false { $gutter: percentage($gutter/100); }
$column-width: (100 / $columns) - $gutter;
.wrapper { @include clearfix; margin: 0 auto; width: 100%; @if $max-width != false { max-width: $max-width; } }
.row { @include clearfix; width: auto; }
.row .row { margin-left: -($gutter / 2); margin-right: -($gutter / 2); margin-top: 0; margin-bottom: 0; }
*[class*="col"] { margin: 0 ($gutter / 2); @if $float == true { float:left; } @if $float != true { width: (100 - $gutter) !important; } }
*[class*="push"], *[class*="pull"] { position: relative; }
$i : $columns;
@while $i > 0 {
.col#{$i} { width: lf-col($i, $column-width, $gutter); }
@if $push-pull == true {
.push#{$i} { left: lf-push-pull($i, $column-width, $gutter); }
.pull#{$i} { right: lf-push-pull($i, $column-width, $gutter); }
}
$i: $i - 1;
}
}