7604987d038b5cebd49c77b616bab12d3e2df3f0
[project/zen.git] / STARTERKIT / sass / layout-fixed.scss
1 //
2 // Layout Styling (DIV Positioning)
3 //
4 // Define CSS classes to create a table-free, 3-column, 2-column, or single
5 // column layout depending on whether blocks are enabled in the left or right
6 // columns.
7 //
8 // This layout is based on the Zen Columns layout method.
9 //   http://drupal.org/node/201428
10 //
11 // Only CSS that affects the layout (positioning) of major elements should be
12 // listed here.  Such as:
13 //   display, position, float, clear, width, height, min-width, min-height
14 //   margin, border, padding, overflow
15 //
16
17 @import "base";
18
19
20 //
21 // Body
22 //
23 body {
24 }
25
26 #page-wrapper,
27 .region-bottom {
28   //
29   // If you want to make the page a fixed width and centered in the viewport,
30   // this is the standards-compliant way to do that.
31   //
32   margin-left: auto;
33   margin-right: auto;
34   width: 960px;
35 }
36
37 #page {
38 }
39
40
41 //
42 // Header
43 //
44 #header {
45 }
46
47 .region-header {
48 }
49
50
51 //
52 // Main container and its columns and navbar
53 //
54
55
56 // The layout when there are no sidebars.
57 #main {
58   @include clearfix;
59
60   @include zen-columns (
61     // These mixin parameters describe the columns.
62     $selectors: ('#content'),
63     $widths: (960px),
64     $leading-direction: (),
65     $leading-gutters: (0),
66     $padding: (),
67
68     // These mixin parameters describe the navbar.
69     $navbar-selector: '#navigation',
70     $navbar-height: 3em,
71     $navbar-width: 960px,
72     $navbar-leading-gutter: 0,
73     $navbar-padding: 0
74   );
75 }
76
77 // The layout when there is only one sidebar, the left one.
78 .sidebar-first #main {
79   @include zen-columns (
80     // These mixin parameters describe the columns.
81     $selectors: ('.region-sidebar-first', '#content'),
82     $widths: (180px, 760px),
83     $leading-direction: (),
84     $leading-gutters: (0, 20px),
85     $padding: (),
86
87     // These mixin parameters describe the navbar.
88     $navbar-selector: '#navigation',
89     $navbar-height: 3em,
90     $navbar-width: 960px,
91     $navbar-leading-gutter: 0,
92     $navbar-padding: 0
93   );
94 }
95
96 // The layout when there is only one sidebar, the right one.
97 .sidebar-second #main {
98   @include zen-columns (
99     // These mixin parameters describe the columns.
100     $selectors: ('#content', '.region-sidebar-second'),
101     $widths: (760px, 180px),
102     $leading-direction: (),
103     $leading-gutters: (0, 20px),
104     $padding: (),
105
106     // These mixin parameters describe the navbar.
107     $navbar-selector: '#navigation',
108     $navbar-height: 3em,
109     $navbar-width: 960px,
110     $navbar-leading-gutter: 0,
111     $navbar-padding: 0
112   );
113 }
114
115 // The layout when there are two sidebars.
116 .two-sidebars #main {
117   @include zen-columns (
118     // These mixin parameters describe the columns.
119     $selectors: ('.region-sidebar-first', '#content', '.region-sidebar-second'),
120     $widths: (180px, 560px, 180px),
121     $leading-direction: (),
122     $leading-gutters: (0, 20px, 20px),
123     $padding: (),
124
125     // These mixin parameters describe the navbar.
126     $navbar-selector: '#navigation',
127     $navbar-height: 3em,
128     $navbar-width: 960px,
129     $navbar-leading-gutter: 0,
130     $navbar-padding: 0
131   );
132 }
133
134
135 //
136 // Footer
137 //
138 #footer {
139 }
140
141
142 //
143 // Page bottom
144 //
145 .region-bottom { // See also the #page-wrapper declaration above that this div shares.
146 }
147
148
149 //
150 // If a div.clearfix doesn't have any content after it and its bottom edge
151 // touches the bottom of the viewport, Firefox and Safari will mistakenly
152 // place several pixels worth of space between the bottom of the div and the
153 // bottom of the viewport. Uncomment this CSS property to fix this.
154 // Note: with some over-large content, this property might cause scrollbars
155 // to appear on the #page-wrapper div.
156 //
157
158 //#page {
159 //  overflow-y: hidden;
160 //}