Hi,

Just wondering if there is a standard way to change the vertical spacing. It seems that right now it is always the 28px but in some cases I'd like to have the div's closer or actually no spacing.

Thanks.

Comments

rogueturnip’s picture

rogueturnip commented

I looked in the css for the squaregrid theme and noticed that this was not include so in my subtheme I created a style.css with:

.pullv-1 { top: -8px; }
.pullv-2 { top: -16px; }
.pullv-3 { top: -24x; }
.pushv-1 { top: 8px; }
.pushv-2 { top: 16px; }
.pushv-3 { top: 24x; }

.sgv-1 { min-height: 28px; }
.sgv-2 { min-height: 56px; }
.sgv-3 { min-height: 84px; }
.sgv-4 { min-height: 112px; }

Obviously the v stands for vertical. I may make more options similar to up to sg-35 but this was the first kick at the can. I set the sgv to min-height to ensure that it can expand but I might change that after some experimenting.

laura s’s picture

laura s commented

Vertical spacing at the moment is set in the margins. See http://drupalcode.org/project/squaregrid.git/blob/11f101de7e3cc7c1bdee22... This is inherited from the squaregrid framework.

The vertical dimension is an important part of grid-based layouts, especially in print. However, I confess I find vertical gridding a bit problematic in a practical sense when dealing with web apps that are more streams of information than static pages. Vertical heights can vary, depending upon content. And how much vertical whitespace between units is ideal very much is dependent upon what role the grid regions are playing in the user interface. One-size-fits-all is not likely to happen.

I'm open to ideas here if you have any suggestions.

rogueturnip’s picture

rogueturnip commented

My solution was pretty simplistic.

For small moves:
.pullsv-1 { top: -8px; }
.pullsv-2 { top: -16px; }
.pullsv-3 { top: -24x; }
.pushsv-1 { top: 8px; }
.pushsv-2 { top: 16px; }
.pushsv-3 { top: 24x; }

For larger moves: (repeated with a pullv)

.pushv-1{top:28px} .pushv-2{top:56px} .pushv-3{top:84px} .pushv-4{top:112px} .pushv-5{top:140px} .pushv-6{top:168px} .pushv-7{top:196px} .pushv-8{top:224px} .pushv-9{top:252px} .pushv-10{top:280px} .pushv-11{top:308px} .pushv-12{top:336px} .pushv-13{top:364px} .pushv-14{top:392px} .pushv-15{top:420px} .pushv-16{top:448px} .pushv-17{top:476px} .pushv-18{top:504px} .pushv-19{top:532px} .pushv-20{top:560px} .pushv-21{top:588px} .pushv-22{top:616px} .pushv-23{top:644px} .pushv-24{top:672px} .pushv-25{top:700px} .pushv-26{top:728px} .pushv-27{top:756px} .pushv-28{top:784px} .pushv-29{top:812px} .pushv-30{top:840px} .pushv-31{top:868px} .pushv-32{top:896px} .pushv-33{top:924px} .pushv-34{top:952px} .pushv-35{top:980px}

For sizing the divs using a min-height but no max-height:

.sgv-1{min-height:28px} .sgv-2{min-height:56px} .sgv-3{min-height:84px} .sgv-4{min-height:112px} .sgv-5{min-height:140px} .sgv-6{min-height:168px} .sgv-7{min-height:196px} .sgv-8{min-height:224px} .sgv-9{min-height:252px} .sgv-10{min-height:280px} .sgv-11{min-height:308px} .sgv-12{min-height:336px} .sgv-13{min-height:364px} .sgv-14{min-height:392px} .sgv-15{min-height:420px} .sgv-16{min-height:448px} .sgv-17{min-height:476px} .sgv-18{min-height:504px} .sgv-19{min-height:532px} .sgv-20{min-height:560px} .sgv-21{min-height:588px} .sgv-22{min-height:616px} .sgv-23{min-height:644px} .sgv-24{min-height:672px} .sgv-25{min-height:700px} .sgv-26{min-height:728px} .sgv-27{min-height:756px} .sgv-28{min-height:784px} .sgv-29{min-height:812px} .sgv-30{min-height:840px} .sgv-31{min-height:868px} .sgv-32{min-height:896px} .sgv-33{min-height:924px} .sgv-34{min-height:952px} .sgv-35{min-height:980px}

And finally for fixed heights on a div (ie the "f" in the sgfv):
.sgfv-1{height:28px} .sgfv-2{height:56px} .sgfv-3{height:84px} .sgfv-4{height:112px} .sgfv-5{height:140px} .sgfv-6{height:168px} .sgfv-7{height:196px} .sgfv-8{height:224px} .sgfv-9{height:252px} .sgfv-10{height:280px} .sgfv-11{height:308px} .sgfv-12{height:336px} .sgfv-13{height:364px} .sgfv-14{height:392px} .sgfv-15{height:420px} .sgfv-16{height:448px} .sgfv-17{height:476px} .sgfv-18{height:504px} .sgfv-19{height:532px} .sgfv-20{height:560px} .sgfv-21{height:588px} .sgfv-22{height:616px} .sgfv-23{height:644px} .sgfv-24{height:672px} .sgfv-25{height:700px} .sgfv-26{height:728px} .sgfv-27{height:756px} .sgfv-28{height:784px} .sgfv-29{height:812px} .sgfv-30{height:840px} .sgfv-31{height:868px} .sgfv-32{height:896px} .sgfv-33{height:924px} .sgfv-34{height:952px} .sgfv-35{height:980px}

This works for what I'm trying to do.

I also created a clear-right(or left or bottom)-margin to remove the margins as I needed to. In some cases this was the better solution then pushing or pulling.

laura s’s picture

laura s commented
Version: 7.x-2.x-dev » 7.x-3.x-dev
Status: Active » Fixed

Noting that the 3.x branch has no vertical settings. I did this because vertical rhythm is much more particular to individual design. Themer can set vertical spacing on semantic elements with better targeting. At any rate, I'm marking this as "fixed" in that the problematic setting has been removed altogether in the 3.x branch.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.