3-column fixed width Zen-based layout + SASS; giving exact width to columns

Question

I'm using Zen theme with SASS (+Compass), and I have a site with fixed width layout. This means I include fixed-width.scss in my custom Zen subtheme's .info file.

I would like 3 columns - 2 for the sidebars, 1 for the main content. By default, I got these (I don't know why, because $zen-column-count is set to 5...).

OK, the problem is that when generating the CSS-files, the width of the columns get automatically calculated based on different SASS mixins. I don't want to mess up the automatic calculation of margins etc., I just want to set the exact parameters.

The main outer grid width should be 920px wide ($zen-grid-width: 920px;).

Now I have these automatically calculated parameters:

sidebars: 184px, 184px
main content: 552px

BUT I want it like this:

sidebars: 220px, 220px
main content: 480px

Here is my fixed-width.scss: http://vpaste.net/n4ve0

How should the exact parameters be set for the sidebar columns when using SASS in Zen?

Answer 1

This is really more a math question than anything, but here goes. Given that you're using a fixed width column layout, we have to start and find how many columns we need to achieve the proportions you posted. The least number of columns possible to achieve 220px | 480px | 220px is 46 with each column equating to 20px (920px / 46 = 20px). With 46 columns, the sidebars are 11 columns each and the main content is 24 columns.

The rest is just plugging in the numbers into the zen grids functions. See http://vpaste.net/VDwL1 for my example.

After defining the number of columns with $zen-column-count, you need to plug in the numbers so that each sidebar spans the correct number of columns while starting at the correct column with zen-grid-item($column-span, $column-position). The Zen starter sub-theme comes with three layouts to account for 1 (left) sidebar + main content, main content + 1 (right) sidebar, and 2 sidebars + main content. Here is how it looks with our new, 46 column system:

/**
 * The layout when there is only one sidebar, the left one.
 */
.sidebar-first {
  /* Span 35 columns, starting in 12th column from left. */
  #content {
    @include zen-grid-item(35, 12);
  }

  /* Span 11 columns, starting in 1st column from left. */
  .region-sidebar-first {
    @include zen-grid-item(11, 1);
  }
}

/**
 * The layout when there is only one sidebar, the right one.
 */
.sidebar-second {
  /* Span 35 columns, starting in 1st column from left. */
  #content {
    @include zen-grid-item(35, 1);
  }

  /* Span 11 columns, starting in 36th column from left. */
  .region-sidebar-second {
    @include zen-grid-item(11, 36);
  }
}

/**
 * The layout when there are two sidebars.
 */
.two-sidebars {
  /* Span 24 columns, starting in 12th column from left. */
  #content {
    @include zen-grid-item(24, 12);
  }

  /* Span 11 columns, starting in 1st column from left. */
  .region-sidebar-first {
    @include zen-grid-item(11, 1);
  }

  /* Span 11 columns, starting in 36th column from left. */
  .region-sidebar-second {
    @include zen-grid-item(11, 36);
  }
}