How can I prevent a .sidebar and the #content from touching each other? [#1593842]

Thanks for the fantastic work on this responsive Zen layout! I've been a longtime Zen user, and the latest evolution is exciting and awesome!

Now I'm somewhat new to grid-based design, but I'm a bit stumped as to how I can prevent a .sidebar from touching the #content. Check out the attached screenshot.

My use case: I'm trying to make both the sidebar and the main content area have a box shadow, but the two box shadows butt up against each other. I think this is a negative side-effect of #1348258: Add box-sizing: border-box to the Zen Columns layout method. Back when we had those wrapper divs, they came in handy for applying a style to the "inner" div which respected the "whitespace" (really just padding on the "outer" div) between neighboring divs.

I'd hate to re-introduce inner divs to solve this, but I guess if I have no other choice I will. Can someone please offer a better suggestion? Thanks!!

Comment	File	Size	Author
	2012-05-21_touching_grid.png	39.65 KB	sbandyopadhyay

Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Comment #1

sbandyopadhyay CreditAttribution: sbandyopadhyay commented 22 May 2012 at 03:01

Maybe in the responsive-sidebars.scss I should edit the sidebars to use a different $gutter-width? So instead of...

@include zen-grid-item(1, 1);

...maybe I should use...

@include zen-grid-item(1, 1, $zen-float-direction, $zen-column-count, 10px);

...instead?

Or is there a better option?

Comment #2

sbandyopadhyay CreditAttribution: sbandyopadhyay commented 22 May 2012 at 04:09

My suggestion in the previous comment leads to a dead end.

I guess what I'm looking for is a way to specify whether the gutter should be treated as padding, margin, or some combination thereof. I'm leaning towards turning this into a feature request to that end, but I'm holding out hope that I'm just missing something obvious that won't require so much re-engineering.

Comment #3

steveOR CreditAttribution: steveOR commented 6 February 2013 at 21:06

I am desiring the same thing. More control over gutters. If a section is the first section, I don't want gutter padding on the left side. Likewise for the last section of columns, I don't want gutter padding on the right side. I am currently finding myself trying to come up with the best workaround, possibly inner divs as sbandyopadhyay suggests.

Comment #4

JohnAlbin

he/they/他

English

Taipei, Taiwan

CreditAttribution: JohnAlbin commented 27 February 2013 at 09:38

Status:

Active

» Postponed

This is an open feature request slated for Zen Grids 2.0. See https://github.com/JohnAlbin/compass-zen-grids/issues/23

Comment #5

JohnAlbin

he/they/他

English

Taipei, Taiwan

CreditAttribution: JohnAlbin commented 28 July 2013 at 15:52

Status:

Postponed

» Fixed

If you delete the sass-extensions folder from your sub-theme, install Zen Grids 2.x on your local system with gem install zen-grids --pre and then edit your config.rb file to import zen-grids, you'll get that feature.