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