Email On Acid

UI Guide

Various UI components for content and layout.

Global Tags

Default HTML markup for header tags and other global elements

Tag	Font Size	Example
<h1>	3em	Email On Acid
<h2>	2.2em	Email On Acid
<h3>	1.6em	Email On Acid
<h4>	1.4em	Email On Acid
<h5>	1.2em	Email On Acid
<h6>	1.1em	Email On Acid
<p>	1em	When we started this company, email development was anything but easy. The internet was full of resources for web developers, but we could hardly find anything to help email developers. So we set out to create a service that would make it easy to find and fix email problems, and give developers and marketers a place to talk about email. We love email (obviously), and are dedicated to making email testing and marketing as simple as possible.
<p class="headline">	1em	When we started this company, email development was anything but easy. The internet was full of resources for web developers, but we could hardly find anything to help email developers.
<blockquote>	1.2em	When we started this company, email development was anything but easy. The internet was full of resources for web developers, but we could hardly find anything to help email developers.
<pre>	.85em	This is some pre text mostly used for code and debugging.
<ol>	1em	Ordered list item Ordered list item Ordered list item
<ul>	1em	Unordered list item Unordered list item Unordered list item

Colors

Primary and Secondary colors from EOA styleguide

Color	Hex	CSS class
Primary colors
Aqua	#3ab97d	`color-aqua`
Blue	#398aca	`color-blue`
Green	#a2cd3a	`color-green`
Orange	#f36c24	`color-orange`
Purple	#933e71	`color-purple`
Red	#ef3e37	`color-red`
Yellow	#faac1e	`color-yellow`
Secondary colors ^{Use sparingly!}
Aqua 2	#3a8d6c	`color-aqua-2`
Blue 2	#235d8a	`color-blue-2`
Green 2	#a2cd3a	`color-green-2`
Orange 2	#cb5828	`color-orange-2`
Purple 2	#69295b	`color-purple-2`
Red 2	#c7372f	`color-red-2`
Yellow 2	#d8962d	`color-yellow-2`
Neutral colors
Black	#000000	`color-black`
Grey	#888888	`color-grey`
Grey Light	#d8dada	`color-grey-light`
Grey Dark	#343433	`color-grey-dark`
White	#ffffff	`color-white`

Gradients

Background gradients for use

Color	Example	CSS class
Same color gradients
Aqua		`bg-gradient-aqua`
Green		`bg-gradient-green`
Blue		`bg-gradient-blue`
Orange		`bg-gradient-orange`
Purple		`bg-gradient-purple`
Multi-color gradients
Aqua / Green		`bg-gradient-aqua-green`

Lists

Various list classes for use

Type	Example	CSS class
Standard List	List item List item List item	`list-standard`
Inline List	List item List item List item	`list-inline`
Icons List	List item List item List item	`list-icons`
Nav List	List of nav items Nav Item 1 Nav Item 2 Nav Item 3	`list-icons`
Menu List	List of menu items 1 Menu Item 1 2 Menu Item 1 3 Menu Item 1	`list-menu`

HTML Examples

Standard List

<ul class="list-standard">
	<li>List item</li>
	<li>List item</li>
	<li>List item</li>
</ul>

Icons List

<ul class="list-icons">
	<li><i class="fa fa-globe"></i> List item</li>
	<li><i class="fa fa-tasks"></i> List item</li>
	<li><i class="fa fa-edit"></i> List item</li>
</ul>

Nav List

<ul class="list-nav">
	<li><a href="#">Nav Item 1</a></li>
	<li><a href="#">Nav Item 2</a></li>
	<li><a href="#">Nav Item 3</a></li>
</ul>

Menu List

<ul class="list-menu">
	<li>
		<a href="#">
			<span class="menu-number">1</span>
			<span class="menu-title">Menu Item 1</span>
		</a>	
	</li>
	<li>
		<a href="#">
			<span class="menu-number">2</span>
			<span class="menu-title">Menu Item 1</span>
		</a>	
	</li>
	<li>
		<a href="#">
			<span class="menu-number">3</span>
			<span class="menu-title">Menu Item 1</span>
		</a>	
	</li>
</ul>

Buttons

CSS Class	`btn`

Type	Example	CSS class
Default Buttons
Green (Default)	Default Button	`btn btn-default`
Aqua	Aqua Button	`btn btn-aqua`
Blue	Blue Button	`btn btn-blue`
Orange	Orange Button	`btn btn-orange`
Purple	Purple Button	`btn btn-purple`
Red	Red Button	`btn btn-red`
Yellow	Yellow Button	`btn btn-yellow`
Primary Buttons
Green (Default)	Primary Button	`btn btn-primary`
Aqua	Aqua Button	`btn btn-primary-aqua`
Blue	Blue Button	`btn btn-primary-blue`
Orange	Orange Button	`btn btn-primary-orange`
Purple	Purple Button	`btn btn-primary-purple`
Red	Red Button	`btn btn-primary-red`
Yellow	Yellow Button	`btn btn-primary-yellow`
Dark background Buttons
White	White Button	`btn btn-white`
Trans	Transparent Button	`btn btn-trans`

HTML Examples

<a href="#" class="btn btn-primary">Button Text</a>

Scroll Button

<a href="#" class="btn btn-default js-scroll" data-id="target-id">Button Text</a>

Helper Classes

Various styles and helpers

Type	CSS class	Description
Text Formatting
Bold	`bold`	Makes text bold
Capitalize	`capitalize`	Makes first letter in text capitalize
Caps	`caps`	Makes all text uppercase
Spaced (5px)	`spaced-5`	Gives text 5px letter spacing
Spaced (10px)	`spaced-10`	Gives text 10px letter spacing
Font (100)	`font-100`	Gives text 100 font weight
Font (300)	`font-300`	Gives text 300 font weight
Font (400)	`font-400`	Gives text 400 font weight
Font (700)	`font-700`	Gives text 700 font weight
Text Alignment
Centered	`centered`	Makes text centered
Left Aligned	`left-aligned`	Makes text left aligned
Right Aligned	`right-aligned`	Makes text right aligned
Object Alignment
Centered	`block-centered`	Makes HTML element centered
Left	`block-left`	Makes HTML element float left
Right	`block-right`	Makes HTML element float right

Items

Items are used for modular UI elements that have date or type categorization (i.e. blog articles).

CSS Class	`item`

Default Items

Email Development July 29, 2017

A How-To Guide on Embedding HTML5 Video in Email

Have you been dying to add video to your emails, but worried about the technical barriers...

Email Development July 18, 2017

How to Build an Interactive Magic 8 Ball for Email

This article covers a technique to implement an interactive Magic 8 Ball using only CSS...

Email Development June 30, 2017

Super Mail Quest: An Interview With Designer and Developer Aaron Simmonds

We sat down with the creator of Super Mail Quest, Aaron Simmonds, to learn about what...

HTML Example

<div class="item">
	<div class="item-image">
		<a href="#">
			<img src="https://www.emailonacid.com/wp-content/themes/eoa/images/placeholder-wide.jpg" />
		</a>
	</div>
	<div class="item-content">
		<div class="meta">
			<label class="meta-label label-category">Category</label>
			<label class="meta-label">Date</label>
		</div>
		<h4 class="item-title"><a href="#">Item Title</a></h4>
		<p>Item description...</p>
	</div>
</div>

Thumb Items