-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathreadme.html
116 lines (87 loc) · 3.88 KB
/
readme.html
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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<h2 id="onetrueform">OneTrueForm</h2>
<h3 id="basicusage">Basic Usage</h3>
<h4 id="css">CSS</h4>
<p>Link to external css:
<code>html
<link rel="stylesheet" href="css/onetrueform.css">
</code></p>
<p>Optional: Project specific css can be added to a provide file to keep the main CSS form clean:
<code>html
<link rel="stylesheet" href="css/onetrueform-custom.css">
</code></p>
<h4 id="markup">Markup</h4>
<pre><code class="html"><div id="oneTrueForm" class="[vertical/horizontal] [no-content]">
<div class="content">
<div class="section">
Content Area
</div>
</div>
<div class="form">
<div class="section-container">
<div class="section">
<h3>Section 1</h3>
</div>
</div>
<div class="section-container">
<div class="section">
<h3>Section 2</h3>
</div>
</div>
<div class="section-container">
<div class="section">
<h3>Section 3</h3>
</div>
</div>
</div>
</div>
</code></pre>
<h5 id="customizationwithclasses">Customization with Classes</h5>
<pre><code class="html"><div id="oneTrueForm" class="[vertical/horizontal] [no-content]">
</code></pre>
<h6 id="requiredverticalorhorizontalclass">Required Vertical or Horizontal Class</h6>
<p>Either <code>.vertical</code> or <code>.horizontal</code> is required and specifies if a vertical or horiztonal layout will be used.</p>
<h6 id="optionalnocontentclass">Optional No Content Class</h6>
<p>Optionally a <code>.no-content</code> class may be added. This adjusts the layout to account for an implementation without a content area. If this flag is used it is reccomended you do not include the <code>.content</code> div, however, if a <code>.content</code> div is present this class will force it to be hidden</p>
<h4 id="generallayout">General Layout</h4>
<h5 id="verticallayout">Vertical Layout</h5>
<p>Window Width Greater than 768px
- OneTrueForm Container: 100% of parent
- Left (form) column: 33% of parent
- Right (content) column: 66% of parent</p>
<p>Window Width Less than 768px (tablet to mobile)
- OneTrueForm Container: 100% of parent
- Top (content) column: 100% of parent
- Bottom (form) column: 100% of parent</p>
<h5 id="verticallayoutwithoutcontent">Vertical Layout without Content</h5>
<p>Window Width Greater than 768px
- OneTrueForm Container: 33% of parent
- Left (form) column: 100% of parent</p>
<p>Window Width Less than 768px (tablet to mobile)
- OneTrueForm Container: 100% of parent
- Left (form) column: 100% of parent</p>
<h5 id="horiztonallayout">Horiztonal Layout</h5>
<p>Window Width Greater than 768px
- OneTrueForm Container: 100% of parent
- Top (content) column: 100% of parent
- Bottom (form) column: 100% of parent</p>
<p>Window Width Less than 768px (tablet to mobile)
- OneTrueForm Container: 100% of parent
- Top (content) column: 100% of parent
- Bottom (form) column: 100% of parent</p>
<h3 id="advancedusage">Advanced Usage</h3>
<h4 id="sassvariables">SASS Variables</h4>
<pre><code class="sass">$breakpoint-tablet: 768px;
</code></pre>
<p>Breakpoint for tablet down to mobile views</p>
<pre><code class="sass">$vertical-form-width: 33%;
</code></pre>
<p>Releavant to vertical forms only. This is the width of form section for vertical form. Content width is calculated from this.
If <code>.no-content</code> class is used the entire <code>oneTrueForm</code> container will become with width.</p>
</body>
</html>