resources/scss/bootstrap/mixins/_grid.scss

   1 // Grid system
   2 //
   3 // Generate semantic grid columns with these mixins.
   4
   5 // Centered container element
   6 @mixin 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   @include clearfix;
  12 }
  13
  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));
  18   @include clearfix;
  19 }
  20
  21 // Generate the extra small columns
  22 @mixin 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
  31 @mixin make-xs-column-offset($columns) {
  32   margin-left: percentage(($columns / $grid-columns));
  33 }
  34
  35 @mixin make-xs-column-push($columns) {
  36   left: percentage(($columns / $grid-columns));
  37 }
  38
  39 @mixin make-xs-column-pull($columns) {
  40   right: percentage(($columns / $grid-columns));
  41 }
  42
  43 // Generate the small columns
  44 @mixin make-sm-column($columns, $gutter: $grid-gutter-width) {
  45   position: relative;
  46   min-height: 1px;
  47   padding-left: ($gutter / 2);
  48   padding-right: ($gutter / 2);
  49
  50   @media (min-width: $screen-sm-min) {
  51         float: left;
  52         width: percentage(($columns / $grid-columns));
  53   }
  54 }
  55
  56 @mixin make-sm-column-offset($columns) {
  57   @media (min-width: $screen-sm-min) {
  58         margin-left: percentage(($columns / $grid-columns));
  59   }
  60 }
  61
  62 @mixin make-sm-column-push($columns) {
  63   @media (min-width: $screen-sm-min) {
  64         left: percentage(($columns / $grid-columns));
  65   }
  66 }
  67
  68 @mixin make-sm-column-pull($columns) {
  69   @media (min-width: $screen-sm-min) {
  70         right: percentage(($columns / $grid-columns));
  71   }
  72 }
  73
  74 // Generate the medium columns
  75 @mixin make-md-column($columns, $gutter: $grid-gutter-width) {
  76   position: relative;
  77   min-height: 1px;
  78   padding-left: ($gutter / 2);
  79   padding-right: ($gutter / 2);
  80
  81   @media (min-width: $screen-md-min) {
  82         float: left;
  83         width: percentage(($columns / $grid-columns));
  84   }
  85 }
  86
  87 @mixin make-md-column-offset($columns) {
  88   @media (min-width: $screen-md-min) {
  89         margin-left: percentage(($columns / $grid-columns));
  90   }
  91 }
  92
  93 @mixin make-md-column-push($columns) {
  94   @media (min-width: $screen-md-min) {
  95         left: percentage(($columns / $grid-columns));
  96   }
  97 }
  98
  99 @mixin make-md-column-pull($columns) {
 100   @media (min-width: $screen-md-min) {
 101         right: percentage(($columns / $grid-columns));
 102   }
 103 }
 104
 105 // Generate the large columns
 106 @mixin make-lg-column($columns, $gutter: $grid-gutter-width) {
 107   position: relative;
 108   min-height: 1px;
 109   padding-left: ($gutter / 2);
 110   padding-right: ($gutter / 2);
 111
 112   @media (min-width: $screen-lg-min) {
 113         float: left;
 114         width: percentage(($columns / $grid-columns));
 115   }
 116 }
 117
 118 @mixin make-lg-column-offset($columns) {
 119   @media (min-width: $screen-lg-min) {
 120         margin-left: percentage(($columns / $grid-columns));
 121   }
 122 }
 123
 124 @mixin make-lg-column-push($columns) {
 125   @media (min-width: $screen-lg-min) {
 126         left: percentage(($columns / $grid-columns));
 127   }
 128 }
 129
 130 @mixin make-lg-column-pull($columns) {
 131   @media (min-width: $screen-lg-min) {
 132         right: percentage(($columns / $grid-columns));
 133   }
 134 }