-
Notifications
You must be signed in to change notification settings - Fork 0
/
_grid.scss
85 lines (77 loc) · 4.73 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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
/*
* This Grid system is following to use:
*
* edit your grid width and space width with your size
*
* use the following classes:
* "grid_$size" for a grid
* "no-pre-space" to delete the prefix space of the first grid_column
* "nosuff-space" to delete the suffix space of the last grid column
* "prefix_$size" to add a left padding before your grid
* "suffix_$size" to add a right padding after your grid
*/
$grid_width:66px;
$grid_space: 16px;
.grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6, .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12 {
display: inline; float: left; position: relative; margin-left: $grid_space ; margin-right: $grid_space ;
}
.grid_1 { width: ($grid_space + $grid_width ); }
.grid_2 { width: ($grid_space + $grid_width ) * 2; }
.grid_3 { width: ($grid_space + $grid_width ) * 3; }
.grid_4 { width: ($grid_space + $grid_width ) * 4; }
.grid_5 { width: ($grid_space + $grid_width ) * 5; }
.grid_6 { width: ($grid_space + $grid_width ) * 6; }
.grid_7 { width: ($grid_space + $grid_width ) * 7; }
.grid_8 { width: ($grid_space + $grid_width ) * 8; }
.grid_9 { width: ($grid_space + $grid_width ) * 9; }
.grid_10 { width: ($grid_space + $grid_width ) * 10; }
.grid_11 { width: ($grid_space + $grid_width ) * 11; }
.grid_12 { width: ($grid_space + $grid_width ) * 12; }
.grid_13 { width: ($grid_space + $grid_width ) * 13; }
.grid_14 { width: ($grid_space + $grid_width ) * 14; }
.grid_15 { width: ($grid_space + $grid_width ) * 15; }
.grid_16 { width: ($grid_space + $grid_width ) * 16; }
.grid_17 { width: ($grid_space + $grid_width ) * 17; }
.grid_18 { width: ($grid_space + $grid_width ) * 18; }
.grid_19 { width: ($grid_space + $grid_width ) * 19; }
.grid_20 { width: ($grid_space + $grid_width ) * 20; }
.no-pre-space {margin-left: 0px ;}
.no-suff-space {margin-right: 0px ;}
.prefix_1 { padding-left: ($grid_space + $grid_width ) + $grid-space ;}
.prefix_2 { padding-left: ($grid_space + $grid_width * 2 ) + $grid-space ;}
.prefix_3 { padding-left: ($grid_space + $grid_width * 3 ) + $grid-space ;}
.prefix_4 { padding-left: ($grid_space + $grid_width * 4 ) + $grid-space ;}
.prefix_5 { padding-left: ($grid_space + $grid_width * 5 ) + $grid-space ;}
.prefix_6 { padding-left: ($grid_space + $grid_width * 6 ) + $grid-space ;}
.prefix_7 { padding-left: ($grid_space + $grid_width * 7 ) + $grid-space ;}
.prefix_8 { padding-left: ($grid_space + $grid_width * 8 ) + $grid-space ;}
.prefix_9 { padding-left: ($grid_space + $grid_width * 9 ) + $grid-space ;}
.prefix_10 { padding-left: ($grid_space + $grid_width * 10 ) + $grid-space ;}
.prefix_11 { padding-left: ($grid_space + $grid_width * 11 ) + $grid-space ;}
.prefix_12 { padding-left: ($grid_space + $grid_width * 12 ) + $grid-space ;}
.prefix_13 { padding-left: ($grid_space + $grid_width * 13 ) + $grid-space ;}
.prefix_14 { padding-left: ($grid_space + $grid_width * 14 ) + $grid-space ;}
.prefix_15 { padding-left: ($grid_space + $grid_width * 15 ) + $grid-space ;}
.prefix_16 { padding-left: ($grid_space + $grid_width * 16 ) + $grid-space ;}
.prefix_17 { padding-left: ($grid_space + $grid_width * 17 ) + $grid-space ;}
.prefix_18 { padding-left: ($grid_space + $grid_width * 18 ) + $grid-space ;}
.prefix_19 { padding-left: ($grid_space + $grid_width * 19 ) + $grid-space ;}
.suffix_1 { padding-right: ($grid_space + $grid_width ) + $grid-space ;}
.suffix_2 { padding-right: ($grid_space + $grid_width * 2 ) + $grid-space ;}
.suffix_3 { padding-right: ($grid_space + $grid_width * 3 ) + $grid-space ;}
.suffix_4 { padding-right: ($grid_space + $grid_width * 4 ) + $grid-space ;}
.suffix_5 { padding-right: ($grid_space + $grid_width * 5 ) + $grid-space ;}
.suffix_6 { padding-right: ($grid_space + $grid_width * 6 ) + $grid-space ;}
.suffix_7 { padding-right: ($grid_space + $grid_width * 7 ) + $grid-space ;}
.suffix_8 { padding-right: ($grid_space + $grid_width * 8 ) + $grid-space ;}
.suffix_9 { padding-right: ($grid_space + $grid_width * 9 ) + $grid-space ;}
.suffix_10 { padding-right: ($grid_space + $grid_width * 10 ) + $grid-space ;}
.suffix_11 { padding-right: ($grid_space + $grid_width * 11 ) + $grid-space ;}
.suffix_12 { padding-right: ($grid_space + $grid_width * 12 ) + $grid-space ;}
.suffix_13 { padding-right: ($grid_space + $grid_width * 13 ) + $grid-space ;}
.suffix_14 { padding-right: ($grid_space + $grid_width * 14 ) + $grid-space ;}
.suffix_15 { padding-right: ($grid_space + $grid_width * 15 ) + $grid-space ;}
.suffix_16 { padding-right: ($grid_space + $grid_width * 16 ) + $grid-space ;}
.suffix_17 { padding-right: ($grid_space + $grid_width * 17 ) + $grid-space ;}
.suffix_18 { padding-right: ($grid_space + $grid_width * 18 ) + $grid-space ;}
.suffix_19 { padding-right: ($grid_space + $grid_width * 19 ) + $grid-space ;}