3 // Generate semantic grid columns with these mixins.
5 // Centered container element
6 .container-fixed(@gutter: @grid-gutter-width) {
9 padding-left: (@gutter / 2);
10 padding-right: (@gutter / 2);
11 &:extend(.clearfix all);
14 // Creates a wrapper for a series of columns
15 .make-row(@gutter: @grid-gutter-width) {
16 margin-left: ceil((@gutter / -2));
17 margin-right: floor((@gutter / -2));
18 &:extend(.clearfix all);
21 // Generate the extra small columns
22 .make-xs-column(@columns; @gutter: @grid-gutter-width) {
25 width: percentage((@columns / @grid-columns));
27 padding-left: (@gutter / 2);
28 padding-right: (@gutter / 2);
31 .make-xs-column-offset(@columns) {
32 margin-left: percentage((@columns / @grid-columns));
35 .make-xs-column-push(@columns) {
36 left: percentage((@columns / @grid-columns));
39 .make-xs-column-pull(@columns) {
40 right: percentage((@columns / @grid-columns));
43 // Generate the small columns
44 .make-sm-column(@columns; @gutter: @grid-gutter-width) {
47 padding-left: (@gutter / 2);
48 padding-right: (@gutter / 2);
50 @media (min-width: @screen-sm-min) {
52 width: percentage((@columns / @grid-columns));
56 .make-sm-column-offset(@columns) {
57 @media (min-width: @screen-sm-min) {
58 margin-left: percentage((@columns / @grid-columns));
62 .make-sm-column-push(@columns) {
63 @media (min-width: @screen-sm-min) {
64 left: percentage((@columns / @grid-columns));
68 .make-sm-column-pull(@columns) {
69 @media (min-width: @screen-sm-min) {
70 right: percentage((@columns / @grid-columns));
74 // Generate the medium columns
75 .make-md-column(@columns; @gutter: @grid-gutter-width) {
78 padding-left: (@gutter / 2);
79 padding-right: (@gutter / 2);
81 @media (min-width: @screen-md-min) {
83 width: percentage((@columns / @grid-columns));
87 .make-md-column-offset(@columns) {
88 @media (min-width: @screen-md-min) {
89 margin-left: percentage((@columns / @grid-columns));
93 .make-md-column-push(@columns) {
94 @media (min-width: @screen-md-min) {
95 left: percentage((@columns / @grid-columns));
99 .make-md-column-pull(@columns) {
100 @media (min-width: @screen-md-min) {
101 right: percentage((@columns / @grid-columns));
105 // Generate the large columns
106 .make-lg-column(@columns; @gutter: @grid-gutter-width) {
109 padding-left: (@gutter / 2);
110 padding-right: (@gutter / 2);
112 @media (min-width: @screen-lg-min) {
114 width: percentage((@columns / @grid-columns));
118 .make-lg-column-offset(@columns) {
119 @media (min-width: @screen-lg-min) {
120 margin-left: percentage((@columns / @grid-columns));
124 .make-lg-column-push(@columns) {
125 @media (min-width: @screen-lg-min) {
126 left: percentage((@columns / @grid-columns));
130 .make-lg-column-pull(@columns) {
131 @media (min-width: @screen-lg-min) {
132 right: percentage((@columns / @grid-columns));