Utility

A bunch of useful utility classes.

Code

Floats

Classes for floating and clearing elements.

• .left
• .right
• .clear

				
<p class="left">I'm floating left.</p>
<p class="right">I'm floating right.</p>
<p class="clear">I'm clearing both.</p>
				
			

Display

Classes for changing the display attribute on an element.

• .inline
• .inline-block
• .block

				
<p class="inline">I'm inline.</p>
<p class="inline-block">I'm inline-block.</p>
<p class="block">I'm block.</p>
				
			

Padding & Margin

By default, the grid system will apply padding and vertical margins. To remove these, use these classes.

• .no-pad
• .no-margin
• .no-margin-vertical

				
<div class="g--1 no-pad">I have no padding.</div>
<div class="g--1 no-margin">I have no margin.</div>
<div class="g--1 no-margin-vertical">I have no vertical margins.</div>
				
			

Centering

Classes for centering text or elements.

• .center
• .text-center

				
<p class="center">I have margin: 0 auto</p>
<p class="text-center">I have text-align: center</p>