<section>
	<div class="help-content">
		<h3 class="info-title smaller" data-id="#pages/email">Email Templates</h3>
		<!-- #section:pages/email -->
		<div class="info-section">
		 <ul class="info-list list-unstyled">
			<li>
				Ace admin template has an <a href="../build/email.html">email converter</a>
				which takes your HTML code
				in Bootstrap style and converts it to table layout
				appropriate for email clients.
			</li>
			
			<li>
				For starters, there are a few samples provided that you can use and modify to make your own email templates:
				<ul>
					<li><code data-open-file="html" class="open-file"><span class="brief-show">build/demo/demo-</span>confirmation.html</code></li>
					<li><code data-open-file="html" class="open-file"><span class="brief-show">build/demo/demo-</span>navbar.html</code></li>
					<li><code data-open-file="html" class="open-file"><span class="brief-show">build/demo/demo-</span>newsletter.html</code></li>
					<li><code data-open-file="html" class="open-file"><span class="brief-show">build/demo/demo-</span>contrast.html</code></li>
				</ul>
				
				Inside email converter, when you select one of the above demo files, some of the options
				on left side are also modified.
			</li>
			
			<li>
				You should consider the following for better results with converter.
			</li>
			
			<li>
				Currently it only works best in Chrome browser as the conversion is done inside the browser
				and "getMatchedCSSRules" function is used which is only available in webkit browsers.
			</li>
			
			<li>
				Use <code>.row</code> and <code>.col-sm-*</code> elements to have multiple columns inside a row which will be stacked on top of each other in small devices.
				<br />
				If you add <code>.sm-border</code> class to <code>.row</code>, there will be a border separating stacked columns on small devices.
				
				<br />
				
				You can also use a single <code>.col</code> class for less padding.
				
			</li>
			<li>
				<code>.row</code> element can have <code>.padding-*</code> class for different content padding values.
				<br />
				If you use this, the paddings will be fixed and won't be changed on smaller screens:
				<br />
<pre data-language="html">
  <div class="row padding-12"></div>
</pre>
				Use <code>.margin-*</code> class on <code>.row</code> to specify spacing between its columns:
<pre data-language="html">
  <div class="row margin-8"></div>
</pre>
			</li>
		
			<li>
				Use <code>.clearfix</code> and <code>.pull-left</code> or <code>.pull-right</code> classes to have a table with multiple rows and columns which won't be stacked on top of each other in small devices.
			</li>
			
			<li>
				Use <code>.navbar</code> class for a navbar which has 100% width.
			</li>
			
			<li>
				Use <code>.space-*</code>, <code>.break-*</code> and <code>.hr-*</code> classes for spacing or horizontal lines.
				<br />
				For example <code>.break-12</code> adds a <i>12px</i> space with body background color
				and <code>.space-12</code> adds a <i>12px</i> space with content background color.
				<br />
				For <code>.hr-*</code> you can also add the optional
				<code>.padding-*</code> to add padding from sides.
				<br />
				If you have nested rows and columns, don't use above classes inside inner rows and columns.
			</li>
			
			<li>
				<div class="alert alert-info">
					For each of the above classes (.row, .clearfix, .navbar, .space-*, .hr-*) you can use inline styles to override background color:
					<code>&lt;div class="space-12" style="background-color: #FF0000;"&gt;&lt;/div&gt;</code>
				</div>
			</li>
			
			<li>
				Add <code>.pull-left</code>, <code>.pull-right</code> class to <code>img</code> elements 
				to make them automatically float to right or left on small devices.
			</li>
		
			<li>
				You can use some classes to style your email. The following classes can be used:
				<ul>
					<li>
						Alerts, such as <code>.alert-info</code>, etc ...
					</li>
					<li>
						Background classes such as <code>.bg-primary</code>, etc ...
					</li>
					<li>
						Wells, such as <code>.well</code>, <code>.well-sm</code>
					</li>
					<li>
						Text colors and styles such as <code>.blue</code> <code>.red</code>
						<code>.text-info</code>
						<code>.bigger-110</code>, etc ...
					</li>
					<li>
						Button & label classes such as
						<code>.btn-info</code>, <code>.btn-sm</code>, <code>.btn-white</code>, <code>.no-border</code>, <code>.label-success</code>, etc ...
					</li>
					<li>
						Alignment classes such as <code>.text-right</code>, <code>.align-middle</code>, etc ...
					</li>
					<li>
						List classes such as <code>.list-unstyled</code>, <code>.spaced</code>, etc ...
					</li>
					
					<li>
						And different classes or inline styles such as <code>font-size</code>,
						<code>line-height</code>, <code>text-decoration</code> <code>list-style-type</code>, etc ...
					</li>
				</ul>
			</li>
		 </ul>
		</div>
	</div>
	<!-- /section:pages/email -->
</section>