#Bootstrap spacing

The missing white space needed for a consistent bootstrap experience.

You followed the Boostrap way, and yet, things still look funny all bunched together? So you start figure investigating why. You add a row here, a col-xs-12 there and finally you get it look "close enough". But you've just created an unmanageable nightmare.

Let's stop the madness, bootstrap-spacing is designed to give you the padding and margin control you need without a bunch of divs, .rows and .col-whatever-12.

Check out some examples

##Spacer

Spacer is top-margin that can be added to an element. Spacer will default to the spacer-md size.

<div class="spacer spacer-sm">
	I'll have a little margin on the top.
</div>
<div class="spacer">
	I'll have some more margin on the top.
</div>
<div class="spacer spacer-xl">
	I'll have event more margin on the top.
</div>

###Spacer add ons

• spacer-off
• spacer-sm
• spacer-md
• spacer-lg
• spacer-xl

##Padding

Like spacer, padding can be added to any element, but this time it's padding.

<div class="row">
	<div class="col-sm-3 ">
		<div style="background-color:rgba(0,0,0,.03);"
				class="hairline hairline-top hairline-bottom padding padding-sm">
			hairline hairline-top hairline-bottom padding padding-sm
		</div>
	</div>
	<div class="col-sm-3 ">
		<div style="background-color:rgba(0,0,0,.03);"
				class="spacer spacer-sm hairline hairline-top hairline-bottom padding padding-lg">
			spacer spacer-sm hairline hairline-top hairline-bottom padding padding-lg
		</div>
	</div>
	<div class="col-sm-3 ">
		<div style="background-color:rgba(0,0,0,.03);"
				class="spacer spacer-md hairline hairline-top hairline-bottom padding padding-xl">
		spacer spacer-md hairline hairline-top hairline-bottom padding padding-xl
		</div>
	</div>
	<div class="col-sm-3 ">
		<div style="background-color:rgba(0,0,0,.03);"
				class="spacer spacer-lg spacer-bottom hairline hairline-left hairline-right padding padding-md padding-xl-top">
			spacer spacer-lg spacer-bottom hairline hairline-left hairline-right padding padding-md padding-xl-top
		</div>
	</div>
</div>

###Padding add ons

• padding-off-top
• padding-sm-top
• padding-md-top
• padding-lg-top
• padding-xl-top
• padding-off-bottom
• padding-sm-bottom
• padding-md-bottom
• padding-lg-bottom
• padding-xl-bottom
• padding-off-left
• padding-sm-left
• padding-md-left
• padding-lg-left
• padding-xl-left
• padding-off-right
• padding-sm-right
• padding-md-right
• padding-lg-right
• padding-xl-right

##Margin

Just like padding, but for margin. Requires "margin" to be included in the class name - e.g. class="margin margin-xl-top"

<div class="margin margin-md"></div>

###margin add ons

• margin-off-top
• margin-sm-top
• margin-md-top
• margin-lg-top
• margin-xl-top
• margin-off-bottom
• margin-sm-bottom
• margin-md-bottom
• margin-lg-bottom
• margin-xl-bottom
• margin-off-left
• margin-sm-left
• margin-md-left
• margin-lg-left
• margin-xl-left
• margin-off-right
• margin-sm-right
• margin-md-right
• margin-lg-right
• margin-xl-right

##Hairline

Hairline is a 1px 20% black border. You can apply it to the top, bottom, left, or right of an element.

<div class="spacer padding hairline hairline-top">
	I'll have a some more padding on the top some margin AND a border
</div>

###Hairline add ons

• hairline-top
• hairline-bottom
• hairline-left
• hairline-right

#Todo:

• Add adjustments for media queries