aleph1.co.uk Git - yaffs-website/blob - vendor/twbs/bootstrap-sass/assets/stylesheets/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:  floor(($gutter / 2));
  10   padding-right: ceil(($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 @mixin make-xs-column-offset($columns) {
  31   margin-left: percentage(($columns / $grid-columns));
  32 }
  33 @mixin make-xs-column-push($columns) {
  34   left: percentage(($columns / $grid-columns));
  35 }
  36 @mixin make-xs-column-pull($columns) {
  37   right: percentage(($columns / $grid-columns));
  38 }
  39
  40 // Generate the small columns
  41 @mixin 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 @mixin make-sm-column-offset($columns) {
  53   @media (min-width: $screen-sm-min) {
  54     margin-left: percentage(($columns / $grid-columns));
  55   }
  56 }
  57 @mixin make-sm-column-push($columns) {
  58   @media (min-width: $screen-sm-min) {
  59     left: percentage(($columns / $grid-columns));
  60   }
  61 }
  62 @mixin 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 @mixin 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 @mixin make-md-column-offset($columns) {
  81   @media (min-width: $screen-md-min) {
  82     margin-left: percentage(($columns / $grid-columns));
  83   }
  84 }
  85 @mixin make-md-column-push($columns) {
  86   @media (min-width: $screen-md-min) {
  87     left: percentage(($columns / $grid-columns));
  88   }
  89 }
  90 @mixin 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 @mixin 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 @mixin make-lg-column-offset($columns) {
 109   @media (min-width: $screen-lg-min) {
 110     margin-left: percentage(($columns / $grid-columns));
 111   }
 112 }
 113 @mixin make-lg-column-push($columns) {
 114   @media (min-width: $screen-lg-min) {
 115     left: percentage(($columns / $grid-columns));
 116   }
 117 }
 118 @mixin make-lg-column-pull($columns) {
 119   @media (min-width: $screen-lg-min) {
 120     right: percentage(($columns / $grid-columns));
 121   }
 122 }