9fe51a97e5d6d15698faba0682ad7932a1c29e2e
[project/zen.git] / 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 }