email-guide.html
3.46 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title text-primary">Help</h4>
</div>
<div class="modal-body">
<div class="alert alert-info">Please select a template from top right dropdown box, to see some examples!</div>
<div class="alert alert-info">Also refer to documentation for more info!</div>
<ul class="spaced">
<li>
Use <code>.row</code> and <code>.col-sm-*</code> 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.
<hr />
<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>
<code><div class="row padding-12"></div></code></pre>
Use <code>.margin-*</code> class on <code>.row</code> to specify spacing between its columns.
<br />
</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.
</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.
</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><div class="space-12" style="background-color: #FF0000;"></div></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>