Vertical Rhythm

TBG

Mixins, helper classes and extends for consistently vertically spacing elements.

Helper classes & extends

The TBG flavor of Foundation provides helper classes and extends to promote consistent vertical spacing between elements. Vertical rhythm classes all determine a "top" spacing value; "bottom" spacing is not accounted for and a pattern should be followed based on that.

These classes and extends begin with either vertical-margin- or vertical-padding- and end with the number of times the base spacing value (1rem by default) is multiplied, from 0 to a total number of your choosing (12 by default).

<div class="vertical-margin-0 text-center">
  <img src="assets/img/vertical-rhythm/jigglypuff.gif" alt="">
</div>
<div class="vertical-margin-1 text-center">
  <img src="assets/img/vertical-rhythm/jigglypuff.gif" alt="">
</div>
<div class="vertical-margin-2 text-center">
  <img src="assets/img/vertical-rhythm/jigglypuff.gif" alt="">
</div>
<div class="vertical-margin-3 text-center">
  <img src="assets/img/vertical-rhythm/jigglypuff.gif" alt="">
</div>
<div class="vertical-margin-4 text-center">
  <img src="assets/img/vertical-rhythm/jigglypuff.gif" alt="">
</div>
<div class="vertical-margin-5 text-center">
  <img src="assets/img/vertical-rhythm/jigglypuff.gif" alt="">
</div>

Responsive vertical spacing classes

To trigger different vertical spacing at different breakpoints, append the name of a breakpoint to the vertical-margin- or vertical-padding- class.

<div class="vertical-margin-2-small vertical-margin-0-large text-center">
  <img src="assets/img/vertical-rhythm/jigglypuff.gif" alt="">
  <div>
    0 vertical margin above the large breakpoint and 2x vertical margin below
  </div>
</div>
<div class="vertical-padding-2-small vertical-padding-4-large text-center">
  <img src="assets/img/vertical-rhythm/jigglypuff.gif" alt="">
  <div>
    4x vertical padding above the large breakpoint and 2x vertical padding below
  </div>
</div>

0 vertical margin above the large breakpoint and 2x vertical margin below

4x vertical padding above the large breakpoint and 2x vertical padding below

Sass Reference

Mixins

We use these mixins to build the final CSS output of this component. You can use the mixins yourself to build your own class structure out of our components.

vertical-rhythm

@include vertical-rhythm($multiplier, $property, $increment);

Outputs a margin-top or padding-top CSS property for vertical spacing

Parameter	Type	Default Value	Description
`$multiplier`	Number	`1rem`	The number of times to multiply the base increment
`$property`	String	`'margin'`	Designates the CSS property to use for spacing: either `margin` or `padding`
`$increment`	Number	`1rem`	The base increment to be multiplied

vertical-rhythm-classes

@include vertical-rhythm-classes($class, $count);

Generates vertical spacing helper classes (and extends) in increments a given number of times Classes have !important to override CSS

Parameter	Type	Default Value	Description
`$class`	String	`'vertical-'`	The base of the class name for each increment
`$count`	Number	`12`	The total number of classes (increments) to generate