3 // Generate semantic grid columns with these mixins.
5 // Centered container element
6 @mixin container-fixed($gutter: $grid-gutter-width) {
9 padding-left: ($gutter / 2);
10 padding-right: ($gutter / 2);
14 // Creates a wrapper for a series of columns
15 @mixin make-row($gutter: $grid-gutter-width) {
16 margin-left: ceil(($gutter / -2));
17 margin-right: floor(($gutter / -2));
21 // Generate the extra small columns
22 @mixin 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 @mixin make-xs-column-offset($columns) {
32 margin-left: percentage(($columns / $grid-columns));
35 @mixin make-xs-column-push($columns) {
36 left: percentage(($columns / $grid-columns));
39 @mixin make-xs-column-pull($columns) {
40 right: percentage(($columns / $grid-columns));
43 // Generate the small columns
44 @mixin 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 @mixin make-sm-column-offset($columns) {
57 @media (min-width: $screen-sm-min) {
58 margin-left: percentage(($columns / $grid-columns));
62 @mixin make-sm-column-push($columns) {
63 @media (min-width: $screen-sm-min) {
64 left: percentage(($columns / $grid-columns));
68 @mixin make-sm-column-pull($columns) {
69 @media (min-width: $screen-sm-min) {
70 right: percentage(($columns / $grid-columns));
74 // Generate the medium columns
75 @mixin 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 @mixin make-md-column-offset($columns) {
88 @media (min-width: $screen-md-min) {
89 margin-left: percentage(($columns / $grid-columns));
93 @mixin make-md-column-push($columns) {
94 @media (min-width: $screen-md-min) {
95 left: percentage(($columns / $grid-columns));
99 @mixin make-md-column-pull($columns) {
100 @media (min-width: $screen-md-min) {
101 right: percentage(($columns / $grid-columns));
105 // Generate the large columns
106 @mixin 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 @mixin make-lg-column-offset($columns) {
119 @media (min-width: $screen-lg-min) {
120 margin-left: percentage(($columns / $grid-columns));
124 @mixin make-lg-column-push($columns) {
125 @media (min-width: $screen-lg-min) {
126 left: percentage(($columns / $grid-columns));
130 @mixin make-lg-column-pull($columns) {
131 @media (min-width: $screen-lg-min) {
132 right: percentage(($columns / $grid-columns));