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 @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 }