STARTERKIT/sass-extensions/zen-grids/stylesheets/zen/_grids.scss

   1 //
   2 // Mixins for the Zen Grids system.
   3 //
   4
   5
   6 // Specify the number of columns in the grid.
   7 $zen-column-count: 12 !default;
   8
   9 // Specify the width of the gutters; half of the gutter will be placed on each
  10 // side of a grid column.
  11 $zen-gutter-width: 20px !default;
  12
  13 // Specify the width of the entire grid. Defaults to 100% for a fluid responsive
  14 // design, but you can change this to a pixel value if you need a fixed grid.
  15 $zen-grid-width: 100% !default;
  16
  17 // Specify the default floating direction for zen's mixins.
  18 $zen-float-direction: left !default;
  19
  20 // Specify the CSS3 box-sizing method. The default, "border-box", is compatible
  21 // with all modern browsers, including IE 8 and later. Use "content-box" for
  22 // wider compatibility (Note: you'll also need to set $legacy-support-for-ie7
  23 // and $legacy-support-for-ie6 to true.)
  24 $zen-box-sizing: border-box !default;
  25
  26 // This is a helper variable for RTL layouts.
  27 $zen-reverse-all-floats: false !default;
  28
  29 // You can generate more efficient CSS if you manually apply the unit base to
  30 // all grid elements in a single ruleset.
  31 $zen-auto-include-unit-base: true !default;
  32
  33 // Turn off IE6/7 support since we're defaulting to box-sizing: border-box.
  34 $legacy-support-for-ie7: false !default;
  35 $legacy-support-for-ie6: false !default;
  36
  37
  38 //
  39 // Zen Grids requires the clearfix mixin.
  40 //
  41 @import "compass/utilities/general/clearfix";
  42
  43
  44 //
  45 // Apply this to the container element.
  46 //
  47 @mixin zen-grid-container () {
  48   position: relative;
  49   @include clearfix;
  50 }
  51
  52 //
  53 // Apply this to any content box that is also a container element for a nested
  54 // grid.
  55 //
  56 @mixin zen-nested-container () {
  57   @include zen-grid-container();
  58   padding: {
  59     left: 0;
  60     right: 0;
  61   }
  62 }
  63
  64 //
  65 // Apply this to each content box. Set the $column-position to the column number
  66 // the content box starts on. And set the $column-span to the number of columns
  67 // that the content box spans.
  68 //
  69 @mixin zen-grid (
  70   $column-position,
  71   $column-span,
  72   $float-direction: $zen-float-direction,
  73   $column-count: $zen-column-count,
  74   $gutter-width: $zen-gutter-width,
  75   $grid-width: $zen-grid-width,
  76   $box-sizing: $zen-box-sizing
  77 ) {
  78
  79   // Calculate the unit width.
  80   $unit-width: $grid-width / $column-count;
  81
  82   // Determine the float direction and its reverse.
  83   $dir: $float-direction;
  84   @if $zen-reverse-all-floats {
  85     $dir: zen-direction-flip($dir);
  86   }
  87   $rev: zen-direction-flip($dir);
  88
  89   // Auto-apply the unit base mixin.
  90   @if $zen-auto-include-unit-base {
  91     @include zen-grid-unit-base($box-sizing);
  92   }
  93
  94   float: $dir;
  95   width: $column-span * $unit-width;
  96   margin: {
  97     #{$dir}: ($column-position - 1) * $unit-width;
  98     #{$rev}: (1 - $column-position - $column-span) * $unit-width;
  99   }
 100   padding: {
 101     left: $gutter-width / 2;
 102     right: $gutter-width / 2;
 103   }
 104 }
 105
 106 //
 107 // Apply this mixin to each content box in the layout to prevent overflowing
 108 // content from breaking the layout.
 109 //
 110 // The mixin has the following optional parameters:
 111 // - $box-sizing: The type of CSS3 box model each box should use. Can be set to
 112 //   content-box or border-box. Defaults to content-box, but border-box is way
 113 //   cooler. IE 6 and 7 don't support border-box.
 114 @mixin zen-grid-unit-base ($box-sizing: $zen-box-sizing) {
 115   // Specify the border-box properties.
 116   @if $box-sizing == border-box {
 117     -moz-box-sizing: border-box;
 118     -webkit-box-sizing: border-box;
 119     -ms-box-sizing: border-box;
 120     box-sizing: border-box;
 121   }
 122   // Prevent borders since they'll break the layout with content-box.
 123   @if $box-sizing == content-box {
 124     border: 0 !important;
 125   }
 126   // Prevent overflowing content from breaking the layout.
 127   overflow: visible;
 128   word-wrap: break-word; // A very nice CSS3 property.
 129
 130   @if $legacy-support-for-ie6 {
 131     @if $box-sizing == content-box {
 132       .ie6 & {
 133         display: inline; // display inline or double your floated margin! [1]
 134         overflow: hidden; // in IE6, overflow auto is broken [2] and so is overflow visible [3]
 135         overflow-y: visible;
 136       }
 137     }
 138     @else {
 139       @warn "IE6 legacy support is on, but $box-sizing is set to #{$box-sizing}.";
 140     }
 141   }
 142 }
 143
 144 //
 145 // Apply this to content boxes that need to be cleared below other content boxes.
 146 //
 147 @mixin zen-clear (
 148   $float-direction: $zen-float-direction
 149 ) {
 150   // Determine the float direction.
 151   $dir: $float-direction;
 152   @if $zen-reverse-all-floats {
 153     $dir: zen-direction-flip($dir);
 154   }
 155   clear: $dir;
 156 }
 157
 158
 159 //
 160 // Helper functions for the Zen mixins.
 161 //
 162
 163 // Returns the opposite direction, given "left" or "right".
 164 @function zen-direction-flip($dir) {
 165   @if $dir == left {
 166     @return right;
 167   }
 168   @return left;
 169 }