|
1 // Grid system |
|
2 // |
|
3 // Generate semantic grid columns with these mixins. |
|
4 |
|
5 // Centered container element |
|
6 .container-fixed(@gutter: @grid-gutter-width) { |
|
7 margin-right: auto; |
|
8 margin-left: auto; |
|
9 padding-left: (@gutter / 2); |
|
10 padding-right: (@gutter / 2); |
|
11 &:extend(.clearfix all); |
|
12 } |
|
13 |
|
14 // Creates a wrapper for a series of columns |
|
15 .make-row(@gutter: @grid-gutter-width) { |
|
16 margin-left: (@gutter / -2); |
|
17 margin-right: (@gutter / -2); |
|
18 &:extend(.clearfix all); |
|
19 } |
|
20 |
|
21 // Generate the extra small columns |
|
22 .make-xs-column(@columns; @gutter: @grid-gutter-width) { |
|
23 position: relative; |
|
24 float: left; |
|
25 width: percentage((@columns / @grid-columns)); |
|
26 min-height: 1px; |
|
27 padding-left: (@gutter / 2); |
|
28 padding-right: (@gutter / 2); |
|
29 } |
|
30 .make-xs-column-offset(@columns) { |
|
31 margin-left: percentage((@columns / @grid-columns)); |
|
32 } |
|
33 .make-xs-column-push(@columns) { |
|
34 left: percentage((@columns / @grid-columns)); |
|
35 } |
|
36 .make-xs-column-pull(@columns) { |
|
37 right: percentage((@columns / @grid-columns)); |
|
38 } |
|
39 |
|
40 // Generate the small columns |
|
41 .make-sm-column(@columns; @gutter: @grid-gutter-width) { |
|
42 position: relative; |
|
43 min-height: 1px; |
|
44 padding-left: (@gutter / 2); |
|
45 padding-right: (@gutter / 2); |
|
46 |
|
47 @media (min-width: @screen-sm-min) { |
|
48 float: left; |
|
49 width: percentage((@columns / @grid-columns)); |
|
50 } |
|
51 } |
|
52 .make-sm-column-offset(@columns) { |
|
53 @media (min-width: @screen-sm-min) { |
|
54 margin-left: percentage((@columns / @grid-columns)); |
|
55 } |
|
56 } |
|
57 .make-sm-column-push(@columns) { |
|
58 @media (min-width: @screen-sm-min) { |
|
59 left: percentage((@columns / @grid-columns)); |
|
60 } |
|
61 } |
|
62 .make-sm-column-pull(@columns) { |
|
63 @media (min-width: @screen-sm-min) { |
|
64 right: percentage((@columns / @grid-columns)); |
|
65 } |
|
66 } |
|
67 |
|
68 // Generate the medium columns |
|
69 .make-md-column(@columns; @gutter: @grid-gutter-width) { |
|
70 position: relative; |
|
71 min-height: 1px; |
|
72 padding-left: (@gutter / 2); |
|
73 padding-right: (@gutter / 2); |
|
74 |
|
75 @media (min-width: @screen-md-min) { |
|
76 float: left; |
|
77 width: percentage((@columns / @grid-columns)); |
|
78 } |
|
79 } |
|
80 .make-md-column-offset(@columns) { |
|
81 @media (min-width: @screen-md-min) { |
|
82 margin-left: percentage((@columns / @grid-columns)); |
|
83 } |
|
84 } |
|
85 .make-md-column-push(@columns) { |
|
86 @media (min-width: @screen-md-min) { |
|
87 left: percentage((@columns / @grid-columns)); |
|
88 } |
|
89 } |
|
90 .make-md-column-pull(@columns) { |
|
91 @media (min-width: @screen-md-min) { |
|
92 right: percentage((@columns / @grid-columns)); |
|
93 } |
|
94 } |
|
95 |
|
96 // Generate the large columns |
|
97 .make-lg-column(@columns; @gutter: @grid-gutter-width) { |
|
98 position: relative; |
|
99 min-height: 1px; |
|
100 padding-left: (@gutter / 2); |
|
101 padding-right: (@gutter / 2); |
|
102 |
|
103 @media (min-width: @screen-lg-min) { |
|
104 float: left; |
|
105 width: percentage((@columns / @grid-columns)); |
|
106 } |
|
107 } |
|
108 .make-lg-column-offset(@columns) { |
|
109 @media (min-width: @screen-lg-min) { |
|
110 margin-left: percentage((@columns / @grid-columns)); |
|
111 } |
|
112 } |
|
113 .make-lg-column-push(@columns) { |
|
114 @media (min-width: @screen-lg-min) { |
|
115 left: percentage((@columns / @grid-columns)); |
|
116 } |
|
117 } |
|
118 .make-lg-column-pull(@columns) { |
|
119 @media (min-width: @screen-lg-min) { |
|
120 right: percentage((@columns / @grid-columns)); |
|
121 } |
|
122 } |