{% layout 'layout' %}
{% block title %}Helpers{% endblock %}

{% block breadcrumb %}
<li><a href="index.html">Home</a></li>
<li><a href="#">UI Elements</a></li>
<li class="active"><a href="ui-helpers.html">Helpers</a></li>
{% endblock %}

{% block styles %}
{% endblock %}

{% block scripts %}
{% endblock %}

{% block content %}

<div class="row">
	<div class="col-md-12">

		<h3>Margin</h3>
		<div class="alert alert-inverse">
			<p>The default base margin is set to 5px. Other margins are calculated as a multiple of the base margin, e.g. <code>m-md</code> is <code>@base-margin*4</code>. You can change the base margin from the Avenger-helpers.less file</p>

			<p class="mb0"><strong>Negative Margins:</strong> Add a class <code>.n</code> for the negative value of that margin. For example <code>.ml10.n</code> would produce <code>{margin-left: -10px}</code></p>
		</div>
		
		<div class="panel">
			<div class="panel-body panel-no-padding">
				<table class="table table-striped">
					<thead>
						<tr>
							<th>Margin Class</th>
							<th>Alternate Class</th>
							<th></th>
						</tr>
					</thead>
					<tbody>
						<tr><td>.m-n  	 </td> <td>.m0 </td> <td><code>{margin: 0px   !important}</code></td></tr>
						<tr><td>.m-xs 	 </td> <td>.m5 </td> <td><code>{margin: 5px    !important}</code></td></tr>
						<tr><td>.m-sm 	 </td> <td>.m10</td> <td><code>{margin: 10px  !important}</code></td></tr>
						<tr><td>.m    	 </td> <td>.m15</td> <td><code>{margin: 15px  !important}</code></td></tr>
						<tr><td>.m-md 	 </td> <td>.m20</td> <td><code>{margin: 20px  !important}</code></td></tr>
						<tr><td>.m-lg 	 </td> <td>.m30</td> <td><code>{margin: 30px  !important}</code></td></tr>
						<tr><td>.m-xl 	 </td> <td>.m40</td> <td><code>{margin: 40px  !important}</code></td></tr>
						<tr><td>.m-xxl	 </td> <td>.m50</td> <td><code>{margin: 50px !important}</code></td></tr>

						<tr><td colspan="3">&nbsp;</td></tr>

						<tr><td>.mb-n  </td> <td>.mb0 </td>  <td><code>{margin-bottom: 0px   		  	 !important}</code></td></tr>
						<tr><td>.mb-xs </td> <td>.mb5 </td>  <td><code>{margin-bottom: 5px    !important}</code></td></tr>
						<tr><td>.mb-sm </td> <td>.mb10</td>  <td><code>{margin-bottom: 10px  !important}</code></td></tr>
						<tr><td>.mb    </td>  <td>.mb15</td> <td><code>{margin-bottom: 15px  !important}</code></td></tr>
						<tr><td>.mb-md </td> <td>.mb20</td>  <td><code>{margin-bottom: 20px  !important}</code></td></tr>
						<tr><td>.mb-lg </td> <td>.mb30</td>  <td><code>{margin-bottom: 30px  !important}</code></td></tr>
						<tr><td>.mb-xl </td> <td>.mb40</td>  <td><code>{margin-bottom: 40px  !important}</code></td></tr>
						<tr><td>.mb-xxl</td> <td>.mb50</td>  <td><code>{margin-bottom: 50px !important}</code></td></tr>

						<tr><td colspan="3">&nbsp;</td></tr>

						<tr><td>.ml-n  </td> <td>.ml0 </td>  <td><code>{margin-left:  0px 			!important}</code></td></tr>
						<tr><td>.ml-xs </td> <td>.ml5 </td>  <td><code>{margin-left: 5px    !important}</code></td></tr>
						<tr><td>.ml-sm </td> <td>.ml10</td>  <td><code>{margin-left: 10px  !important}</code></td></tr>
						<tr><td>.ml    </td>  <td>.ml15</td> <td><code>{margin-left: 15px  !important}</code></td></tr>
						<tr><td>.ml-md </td> <td>.ml20</td>  <td><code>{margin-left: 20px  !important}</code></td></tr>
						<tr><td>.ml-lg </td> <td>.ml30</td>  <td><code>{margin-left: 30px  !important}</code></td></tr>
						<tr><td>.ml-xl </td> <td>.ml40</td>  <td><code>{margin-left: 40px  !important}</code></td></tr>
						<tr><td>.ml-xxl</td> <td>.ml50</td>  <td><code>{margin-left: 50px !important}</code></td></tr>

						<tr><td colspan="3">&nbsp;</td></tr>

						<tr><td>.mr-n  </td> <td>.mr0 </td>  <td><code>{margin-right: 0px 			 !important}</code></td></tr>
						<tr><td>.mr-xs </td> <td>.mr5 </td>  <td><code>{margin-right: 5px    !important}</code></td></tr>
						<tr><td>.mr-sm </td> <td>.mr10</td>  <td><code>{margin-right: 10px  !important}</code></td></tr>
						<tr><td>.mr    </td>  <td>.mr15</td> <td><code>{margin-right: 15px  !important}</code></td></tr>
						<tr><td>.mr-md </td> <td>.mr20</td>  <td><code>{margin-right: 20px  !important}</code></td></tr>
						<tr><td>.mr-lg </td> <td>.mr30</td>  <td><code>{margin-right: 30px  !important}</code></td></tr>
						<tr><td>.mr-xl </td> <td>.mr40</td>  <td><code>{margin-right: 40px  !important}</code></td></tr>
						<tr><td>.mr-xxl</td> <td>.mr50</td>  <td><code>{margin-right: 50px !important}</code></td></tr>

						<tr><td colspan="3">&nbsp;</td></tr>

						<tr><td>.mt-n  </td> <td>.mt0 </td>  <td><code>{margin-top: 0px  		   !important}</code></td></tr>
						<tr><td>.mt-xs </td> <td>.mt5 </td>  <td><code>{margin-top: 5px    !important}</code></td></tr>
						<tr><td>.mt-sm </td> <td>.mt10</td>  <td><code>{margin-top: 10px  !important}</code></td></tr>
						<tr><td>.mt    </td>  <td>.mt15</td> <td><code>{margin-top: 15px  !important}</code></td></tr>
						<tr><td>.mt-md </td> <td>.mt20</td>  <td><code>{margin-top: 20px  !important}</code></td></tr>
						<tr><td>.mt-lg </td> <td>.mt30</td>  <td><code>{margin-top: 30px  !important}</code></td></tr>
						<tr><td>.mt-xl </td> <td>.mt40</td>  <td><code>{margin-top: 40px  !important}</code></td></tr>
						<tr><td>.mt-xxl</td> <td>.mt50</td>  <td><code>{margin-top: 50px !important}</code></td></tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>


	<div class="col-md-12">

		<h3>Padding</h3>
		<div class="alert alert-inverse">
			<p>The default base padding is set to 5px. Other paddings are calculated as a multiple of the base padding, e.g. <code>p-md</code> is <code>@base-padding*4</code>. You can change the base padding from the Avenger-helpers.less file</p>

			<p class="mb0"><strong>Negative Paddings:</strong> Add a class <code>.n</code> for the negative value of that padding. For example <code>.pl10.n</code> would produce <code>{padding-left: -10px}</code></p>
		</div>
		<div class="panel">
			<div class="panel-body panel-no-padding">
				<table class="table table-striped">
					<thead>
						<tr>
							<th>Padding Class</th>
							<th>Alternate Class</th>
							<th></th>
						</tr>
					</thead>
					<tbody>
						<tr><td>.p-n  	 </td> <td>.p0 </td> <td><code>{padding: 0px   		  !important}</code></td></tr>
						<tr><td>.p-xs 	 </td> <td>.p5 </td> <td><code>{padding: 5px    !important}</code></td></tr>
						<tr><td>.p-sm 	 </td> <td>.p10</td> <td><code>{padding: 10px  !important}</code></td></tr>
						<tr><td>.p    	 </td> <td>.p15</td> <td><code>{padding: 15px  !important}</code></td></tr>
						<tr><td>.p-md 	 </td> <td>.p20</td> <td><code>{padding: 20px  !important}</code></td></tr>
						<tr><td>.p-lg 	 </td> <td>.p30</td> <td><code>{padding: 30px  !important}</code></td></tr>
						<tr><td>.p-xl 	 </td> <td>.p40</td> <td><code>{padding: 40px  !important}</code></td></tr>
						<tr><td>.p-xxl	 </td> <td>.p50</td> <td><code>{padding: 50px !important}</code></td></tr>

						<tr><td colspan="3">&nbsp;</td></tr>

						<tr><td>.pb-n  </td> <td>.pb0 </td>  <td><code>{padding-bottom: 0px   		  	 !important}</code></td></tr>
						<tr><td>.pb-xs </td> <td>.pb5 </td>  <td><code>{padding-bottom: 5px    !important}</code></td></tr>
						<tr><td>.pb-sm </td> <td>.pb10</td>  <td><code>{padding-bottom: 10px  !important}</code></td></tr>
						<tr><td>.pb    </td>  <td>.pb15</td> <td><code>{padding-bottom: 15px  !important}</code></td></tr>
						<tr><td>.pb-md </td> <td>.pb20</td>  <td><code>{padding-bottom: 20px  !important}</code></td></tr>
						<tr><td>.pb-lg </td> <td>.pb30</td>  <td><code>{padding-bottom: 30px  !important}</code></td></tr>
						<tr><td>.pb-xl </td> <td>.pb40</td>  <td><code>{padding-bottom: 40px  !important}</code></td></tr>
						<tr><td>.pb-xxl</td> <td>.pb50</td>  <td><code>{padding-bottom: 50px !important}</code></td></tr>

						<tr><td colspan="3">&nbsp;</td></tr>

						<tr><td>.pl-n  </td> <td>.pl0 </td>  <td><code>{padding-left:  0px 			!important}</code></td></tr>
						<tr><td>.pl-xs </td> <td>.pl5 </td>  <td><code>{padding-left: 5px    !important}</code></td></tr>
						<tr><td>.pl-sm </td> <td>.pl10</td>  <td><code>{padding-left: 10px  !important}</code></td></tr>
						<tr><td>.pl    </td>  <td>.pl15</td> <td><code>{padding-left: 15px  !important}</code></td></tr>
						<tr><td>.pl-md </td> <td>.pl20</td>  <td><code>{padding-left: 20px  !important}</code></td></tr>
						<tr><td>.pl-lg </td> <td>.pl30</td>  <td><code>{padding-left: 30px  !important}</code></td></tr>
						<tr><td>.pl-xl </td> <td>.pl40</td>  <td><code>{padding-left: 40px  !important}</code></td></tr>
						<tr><td>.pl-xxl</td> <td>.pl50</td>  <td><code>{padding-left: 50px !important}</code></td></tr>

						<tr><td colspan="3">&nbsp;</td></tr>

						<tr><td>.pr-n  </td> <td>.pr0 </td>  <td><code>{padding-right: 0px 			 !important}</code></td></tr>
						<tr><td>.pr-xs </td> <td>.pr5 </td>  <td><code>{padding-right: 5px    !important}</code></td></tr>
						<tr><td>.pr-sm </td> <td>.pr10</td>  <td><code>{padding-right: 10px  !important}</code></td></tr>
						<tr><td>.pr    </td>  <td>.pr15</td> <td><code>{padding-right: 15px  !important}</code></td></tr>
						<tr><td>.pr-md </td> <td>.pr20</td>  <td><code>{padding-right: 20px  !important}</code></td></tr>
						<tr><td>.pr-lg </td> <td>.pr30</td>  <td><code>{padding-right: 30px  !important}</code></td></tr>
						<tr><td>.pr-xl </td> <td>.pr40</td>  <td><code>{padding-right: 40px  !important}</code></td></tr>
						<tr><td>.pr-xxl</td> <td>.pr50</td>  <td><code>{padding-right: 50px !important}</code></td></tr>

						<tr><td colspan="3">&nbsp;</td></tr>

						<tr><td>.pt-n  </td> <td>.pt0 </td>  <td><code>{padding-top: 0px  		   !important}</code></td></tr>
						<tr><td>.pt-xs </td> <td>.pt5 </td>  <td><code>{padding-top: 5px    !important}</code></td></tr>
						<tr><td>.pt-sm </td> <td>.pt10</td>  <td><code>{padding-top: 10px  !important}</code></td></tr>
						<tr><td>.pt    </td>  <td>.pt15</td> <td><code>{padding-top: 15px  !important}</code></td></tr>
						<tr><td>.pt-md </td> <td>.pt20</td>  <td><code>{padding-top: 20px  !important}</code></td></tr>
						<tr><td>.pt-lg </td> <td>.pt30</td>  <td><code>{padding-top: 30px  !important}</code></td></tr>
						<tr><td>.pt-xl </td> <td>.pt40</td>  <td><code>{padding-top: 40px  !important}</code></td></tr>
						<tr><td>.pt-xxl</td> <td>.pt50</td>  <td><code>{padding-top: 50px !important}</code></td></tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>

	<div class="col-md-12">
		<h3>Embed Responsively</h3>
		<div class="alert alert-inverse">
			<p class="mb0">The Embed Responsively class helps build responsive embed codes for embedding rich third-party media into responsive web pages. Simply wrap the media object in <code>embed-container</code> class.</p>
		</div>
		<div class="panel">
			<div class="panel-body panel-no-padding">

				<div class="table-responsive">
					<table class="table table-hover table-striped mb0">
						<thead>
							<tr>
								<th width="300">Third Party</th>
								<th>Code Sample</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>Youtube</td>
								<td><code>&lt;div class='embed-container'&gt;&lt;iframe src='http://www.youtube.com/embed/QILiHiTD3uc' frameborder='0' allowfullscreen&gt;&lt;/iframe&gt;&lt;/div</code></td>
							</tr>
							<tr>
								<td>Vimeo</td>
								<td><code>&lt;div class='embed-container'&gt;&lt;iframe src='http://player.vimeo.com/video/66140585' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen&gt;&lt;/iframe&gt;&lt;/div&gt;</td></code>
							</tr>
							<tr>
								<td>DailyMotion</td>
								<td><code>&lt;div class='embed-container'&gt;&lt;iframe src='http://www.dailymotion.com/embed/video/xsr67x' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen&gt;&lt;/iframe&gt;&lt;/div&gt;</td></code>
							</tr>
							<tr>
								<td>Google Maps</td>
								<td><code>&lt;div class='embed-container'&gt;&lt;iframe src='https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d387144.0075834208!2d-73.97800349999999!3d40.7056308!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c24fa5d33f083b%3A0xc80b8f06e177fe62!2sNew+York%2C+NY!5e0!3m2!1sen!2sus!4v1394298866288' width='600' height='450' frameborder='0' style='border:0'&gt;&lt;/iframe&gt;&lt;/div&gt;</td></code>
							</tr>
							<tr>
								<td>Instagram</td>
								<td><code>&lt;div class='embed-container'&gt;&lt;iframe src='//instagram.com/p/dnQi4EGuZx/embed/' frameborder='0' scrolling='no' allowtransparency='true'&gt;&lt;/iframe&gt;&lt;/div&gt;</td></code>
							</tr>
							<tr>
								<td>Vine</td>
								<td><code>&lt;div class='embed-container'&gt;&lt;iframe width='100%' src='https://vine.co/v/h9eAhKWzJlv/embed/simple' frameborder='0' scrolling='no' allowtransparency='true'&gt;&lt;/iframe&gt;&lt;script async src='//platform.vine.co/static/scripts/embed.js' charset='utf-8'&gt;&lt;/script&gt;&lt;/div&gt;;</code></td>
							</tr>

							
						</tbody>
					</table>
				</div>

			</div>
		</div>
	</div>


	<div class="col-md-12">
		<h3>Others</h3>
		<div class="panel">
			<div class="panel-body panel-no-padding">

				<div class="table-responsive">
					<table class="table table-hover table-striped mb0">
						<thead>
							<tr>
								<th width="300">Class Functions</th>
								<th>Description</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>Vertical Alignment</td>
								<td>To vertically center a div, add <code>position:relative</code> to the parent and <code>vertical-align</code> class to the child.</td>
							</tr>
							<tr>
								<td>Vertical Align For Tables</td>
								<td>
									To vertical align contents in table, add classes <code>vat</code>, <code>vam</code> and <code>vab</code> to td to align contents <i>top</i>, <i>middle</i> and <i>bottom</i> respectively. Alternatively apply the classes <code>table-vat</code>, <code>table-vam</code> and <code>table-vab</code> to the <code>table</code> to align contents to all cells in the table
								</td>
							</tr>
							<tr>
								<td>Avatar</td>
								<td>Using <code>img.avatar</code> will style an image with Avenger standard for Avatar</td>
							</tr>
							<tr>
								<td>iSelect</td>
								<td>wrap <code>select</code> in <code>div.iSelect</code> for custom font-awesome icons</td>
							</tr>
							

							
						</tbody>
					</table>
				</div>

			</div>
		</div>
	</div>

	<div class="col-md-12">
		<div class="pull-right">
			<h3 class="mb20">+ More to be added!</h3>
		</div>
	</div>


</div>






{% endblock %}
