Home | History | Annotate | Download | only in mixins 
      1 // Grid system
      2 //
      3 // Generate semantic grid columns with these mixins.
      4 
      5 // Centered container element
      6 .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   &:extend(.clearfix all);
     12 }
     13 
     14 // Creates a wrapper for a series of columns
     15 .make-row(@gutter: @grid-gutter-width) {
     16   margin-left:  (@gutter / -2);
     17   margin-right: (@gutter / -2);
     18   &:extend(.clearfix all);
     19 }
     20 
     21 // Generate the extra small columns
     22 .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 .make-xs-column-offset(@columns) {
     31   margin-left: percentage((@columns / @grid-columns));
     32 }
     33 .make-xs-column-push(@columns) {
     34   left: percentage((@columns / @grid-columns));
     35 }
     36 .make-xs-column-pull(@columns) {
     37   right: percentage((@columns / @grid-columns));
     38 }
     39 
     40 // Generate the small columns
     41 .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 .make-sm-column-offset(@columns) {
     53   @media (min-width: @screen-sm-min) {
     54     margin-left: percentage((@columns / @grid-columns));
     55   }
     56 }
     57 .make-sm-column-push(@columns) {
     58   @media (min-width: @screen-sm-min) {
     59     left: percentage((@columns / @grid-columns));
     60   }
     61 }
     62 .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 .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 .make-md-column-offset(@columns) {
     81   @media (min-width: @screen-md-min) {
     82     margin-left: percentage((@columns / @grid-columns));
     83   }
     84 }
     85 .make-md-column-push(@columns) {
     86   @media (min-width: @screen-md-min) {
     87     left: percentage((@columns / @grid-columns));
     88   }
     89 }
     90 .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 .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 .make-lg-column-offset(@columns) {
    109   @media (min-width: @screen-lg-min) {
    110     margin-left: percentage((@columns / @grid-columns));
    111   }
    112 }
    113 .make-lg-column-push(@columns) {
    114   @media (min-width: @screen-lg-min) {
    115     left: percentage((@columns / @grid-columns));
    116   }
    117 }
    118 .make-lg-column-pull(@columns) {
    119   @media (min-width: @screen-lg-min) {
    120     right: percentage((@columns / @grid-columns));
    121   }
    122 }
    123