Vertical Spacing

Vertical spacing is governed by the height of body text when the font-size is 16px (this value is a variable set in a theme file $standard-text-height). This helps establish a consistant vertical rhythm. In the example below, each class uses a mixin to calculate the appropriate margin top and bottom. Simply @include vertical-rhythm-bottom or vertical-rhythm-top and pass an integer for the amount of "line heights" to make the margins. In the text example below, every element has margin-bottom of 1 line-height, while the <h3> has a margin-top of 2 line-height.

If you want to assign a margin bottom manually, a few classes are availble in the framework: bottom-spacing-1, bottom-spacing-2, bottom-spacing-3. In the other direction, top-spacing-1, top-spacing-2, top-spacing-3 is available for margin top (useful in cases where an element needs spacing but is not always present on the page, such as in ajax'ed scenarios).

<section>
	<div class="breadcrumb">Breadcrumb ><div>
	<h1 class="heading-1">Page Title</h1>
	<h3 class="heading-3">Section Title</h3>
	<p class="paragraph">Text...</p>	
</section>

Positioning

A few basic float and centering classes have been added to make styling dynamic content simpler, such as in the cases of articles or other standalone bodies of text. For centering with margin-left and margin-right set to "auto", use .center-content or .horizontal-center. The former, .center-content, is an older version that also includes the property display: block, and is most useful for elements that need their display property changed to make margin auto work (like images). To float an object left or right (like an image in a sea of text), .float-left and .float-right.

As always, any situation that requires a complex solution is best off using custom css, rather than a bunch of these single property classes. Use sparingly.

Max-width & Height

Sometimes it's nice to limit the width of an element, like alerts or forms. Similarly we may need to fix the height or max-height of an element, like an element that needs to be scrollable at a certain height.

To set max-width and height use .max-width-### and .height-###, where # is any number between 100 and 800 in increments of 25.

We use max-width instead of width to keep elements flexible for responsive and mobile friendly layouts.

<div class="alert alert_light max-width-200">
	<p>An example! ...</p>
</div>

<div class="alert alert_light height-200">
	<p>An example! ...</p>
</div>