forked from bozboz/luigi
-
Notifications
You must be signed in to change notification settings - Fork 0
/
_grid.scss
66 lines (54 loc) · 1.28 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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
// When using the grid item mixin, the amount elements in a row should add up to $columns
// Grid push is irrespective of the above
// .wrapper {
// @include grid-container;
// }
// .sidebar {
// @include grid-item(3);
// }
// .sidebar-small {
// @include grid-width(2);
// }
// .content {
// @include grid-push(8);
// @include grid-width(2);
// }
$grids: 12 !default;
$grid-container: 1024px !default;
$grid-gutter: 15px !default;
$grid-percentage-widths: false;
$grid-gutter-type: unquote("margin");
@if $grid-percentage-widths == true {
$grid-gutter-type: unquote("padding");
}
@function grid-num($num) {
$number: $num;
@if $grid-percentage-widths == true {
$number: ($num / $grids) * 100%;
} @else {
$number: (($grid-container/$grids) * $num);
$number: $number - $grid-gutter;
}
@return $number;
}
@mixin grid-push($space) {
$number: grid-num($space);
@if $grid-percentage-widths == true {
#{$grid-gutter-type}-left: $grid-gutter;
} @else {
$number: $number + ($grid-gutter * 2);
}
margin-left: $number;
}
@mixin grid-container {
margin-left: -$grid-gutter;
width: $grid-container;
}
@mixin grid-width($width) {
width: grid-num($width);
}
@mixin grid-item($grid-width) {
@include grid-width($grid-width);
float: left;
#{$grid-gutter-type}-left: $grid-gutter;
}