Foundation
Jump to Nav

# 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>

## 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

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