### Email Templates

- Ace admin template has an email converter which takes your HTML code in Bootstrap style and converts it to table layout appropriate for email clients.
- For starters, there are a few samples provided that you can use and modify to make your own email templates:
  - `build/demo/demo-confirmation.html`
  - `build/demo/demo-navbar.html`
  - `build/demo/demo-newsletter.html`
  - `build/demo/demo-contrast.html`
  Inside email converter, when you select one of the above demo files, some of the options on left side are also modified.
- You should consider the following for better results with converter.
- 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.
- Use `.row` and `.col-sm-*` elements to have multiple columns inside a row which will be stacked on top of each other in small devices.
  If you add `.sm-border` class to `.row`, there will be a border separating stacked columns on small devices.
  You can also use a single `.col` class for less padding.
- `.row` element can have `.padding-*` class for different content padding values.
  If you use this, the paddings will be fixed and won't be changed on smaller screens:

  Use `.margin-*` class on `.row` to specify spacing between its columns:

- Use `.clearfix` and `.pull-left` or `.pull-right` classes to have a table with multiple rows and columns which won't be stacked on top of each other in small devices.
- Use `.navbar` class for a navbar which has 100% width.
- Use `.space-*`, `.break-*` and `.hr-*` classes for spacing or horizontal lines.
  For example `.break-12` adds a 12px space with body background color and `.space-12` adds a 12px space with content background color.
  For `.hr-*` you can also add the optional `.padding-*` to add padding from sides.
  If you have nested rows and columns, don't use above classes inside inner rows and columns.
- For each of the above classes (.row, .clearfix, .navbar, .space-*, .hr-*) you can use inline styles to override background color: `<div class="space-12" style="background-color: #FF0000;"></div>`
- Add `.pull-left`, `.pull-right` class to `img` elements to make them automatically float to right or left on small devices.
- You can use some classes to style your email. The following classes can be used:
  - Alerts, such as `.alert-info`, etc ...
  - Background classes such as `.bg-primary`, etc ...
  - Wells, such as `.well`, `.well-sm`
  - Text colors and styles such as `.blue` `.red` `.text-info` `.bigger-110`, etc ...
  - Button & label classes such as `.btn-info`, `.btn-sm`, `.btn-white`, `.no-border`, `.label-success`, etc ...
  - Alignment classes such as `.text-right`, `.align-middle`, etc ...
  - List classes such as `.list-unstyled`, `.spaced`, etc ...
  - And different classes or inline styles such as `font-size`, `line-height`, `text-decoration` `list-style-type`, etc ...