• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
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}
123