-
Notifications
You must be signed in to change notification settings - Fork 16
/
style-guide.html
219 lines (219 loc) · 14 KB
/
style-guide.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
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
<!DOCTYPE html>
<html class="style-guide" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Style Guide - mimogear</title>
<meta name="description" content="Mimogear is a super simple static site generator and web development boilerplate">
<link rel="stylesheet" href="./dist/css/site.css">
</head>
<body><a class="skip-link" href="#main">Skip to main content</a>
<figure class="sprite" style="display: none;"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><symbol viewBox="0 0 32 32" id="arrow-back" xmlns="http://www.w3.org/2000/svg"><path d="M12.586 27.414l-10-10a2 2 0 010-2.828l10-10a2 2 0 112.828 2.828L8.828 14H28a2 2 0 110 4H8.828l6.586 6.586c.39.39.586.902.586 1.414s-.195 1.024-.586 1.414a2 2 0 01-2.828 0z"/></symbol><symbol viewBox="0 0 32 32" id="arrow-forward" xmlns="http://www.w3.org/2000/svg"><path d="M19.414 27.414l10-10a2 2 0 000-2.828l-10-10a2 2 0 10-2.828 2.828L23.172 14H4a2 2 0 100 4h19.172l-6.586 6.586c-.39.39-.586.902-.586 1.414s.195 1.024.586 1.414a2 2 0 002.828 0z"/></symbol><symbol viewBox="0 0 24 24" id="close" xmlns="http://www.w3.org/2000/svg"><path d="M18.984 6.422L13.406 12l5.578 5.578-1.406 1.406L12 13.406l-5.578 5.578-1.406-1.406L10.594 12 5.016 6.422l1.406-1.406L12 10.594l5.578-5.578z"/></symbol><symbol viewBox="0 0 380 80" id="logo" xmlns="http://www.w3.org/2000/svg"><text font-size="80" font-weight="700"><tspan x="0" y="50">Site</tspan></text></symbol><symbol viewBox="0 0 24 24" id="open" xmlns="http://www.w3.org/2000/svg"><path d="M18.984 12.984h-6v6h-1.969v-6h-6v-1.969h6v-6h1.969v6h6v1.969z"/></symbol></svg></figure>
<header class="header" role="banner">
<div class="section">
<div class="compartment">
<div class="header-ribbon"><a class="logo" href="./"><span class="logo-label">mimogear</span><span class="logo">
<svg class="icon icon icon-undefined">
<use xlink:href="#undefined"></use>
</svg></span></a>
<button class="menu-trigger"></button>
<div class="menu">
<nav class="main-nav">
<ol class="main-nav-group">
<li class="main-nav-item"><a class="main-nav-link" href="https://github.com/mimoduo/Mimogear" itemprop="url">View on Github</a>
</li>
<li class="main-nav-item"><a class="main-nav-link" href="https://github.com/mimoduo/Mimogear/tree/master/docs" itemprop="url">Documentation</a>
</li>
</ol>
</nav>
</div>
</div>
</div>
</div>
</header>
<main class="main" id="main" role="main">
<div class="section typography">
<div class="compartment">
<h2>Headings</h2>
<h1>H1 All their equipment and instruments are alive.</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
<h2>H2 A red flair silhouetted the jagged edge of a wing.</h2>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<h3>H3 I watched the storm, so beautiful yet terrific.</h3>
<p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.</p>
<h4>H4 Almost before we knew it, we had left the ground.</h4>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<h5>H5 A shining crescent far beneath the flying vessel.</h5>
<p>Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
<h6>H6 It was going to be a lonely trip back.</h6>
<p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.</p>
</div>
</div>
<div class="section typography">
<div class="compartment">
<h2>Unordered/Ordered Lists</h2>
<ul>
<li>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</li>
<li>hasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.</li>
<ul>
<li>Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</li>
</ul>
<li>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </li>
<li>Nulla consequat massa quis enim.</li>
</ul>
<ol>
<li>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.</li>
<li>hasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.</li>
<ol type="a">
<li>Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.</li>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.</li>
</ol>
<li>Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. </li>
<li>Nulla consequat massa quis enim.</li>
</ol>
</div>
</div>
<div class="section typography">
<div class="compartment">
<h2>Buttons</h2>
<p>Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.</p><a class="button" href="">Button</a><a class="button" href="">Button</a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
</div>
</div>
<div class="section typography">
<div class="compartment">
<h2>Forms</h2>
<form>
<fieldset>
<label>Input Label</label>
<input type="text" placeholder="Input Placeholder">
<label>Input Label</label>
<input type="text" placeholder="Input Placeholder">
</fieldset>
<fieldset>
<textarea placeholder="Input Placeholder"></textarea>
<textarea placeholder="Input Placeholder"></textarea>
</fieldset>
<fieldset>
<select>
<option value="Option One">Option One</option>
<option value="Option Two">Option Two</option>
<option value="Option Three">Option Three</option>
</select>
<select>
<option value="Option One">Option One</option>
<option value="Option Two">Option Two</option>
<option value="Option Three">Option Three</option>
</select>
</fieldset>
<fieldset>
<label>Checkbox Label
<input type="checkbox">
</label>
<label>Checkbox Label
<input type="checkbox">
</label>
</fieldset>
<fieldset>
<label>Radio Label
<input type="radio">
</label>
<label>Radio Label
<input type="radio">
</label>
</fieldset>
<fieldset>
<input type="submit" value="Submit">
</fieldset>
</form>
</div>
</div>
<div class="section typography">
<div class="compartment">
<h2>Inline Type</h2>
<p><em>Lorem ipsum dolor sit amet</em>, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</p>
<p><strong>Donec pede justo</strong>, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.</p>
<p><a href="#">Aenean leo ligula</a>, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.</p>
<blockquote>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.</blockquote>
</div>
</div>
<div class="section typography">
<div class="compartment">
<h2>Tables</h2>
<table>
<thead>
<tr>
<th scope="col">Header One</th>
<th scope="col">Header Two</th>
<th scope="col">Header Three</th>
</tr>
</thead>
<tbody>
<tr scope="row">
<td>Row Item One</td>
<td>Row Item Two</td>
<td>Row Item Three</td>
</tr>
<tr scope="row">
<td>Row Item One</td>
<td>Row Item Two</td>
<td>Row Item Three</td>
</tr>
<tr scope="row">
<td>Row Item One</td>
<td>Row Item Two</td>
<td>Row Item Three</td>
</tr>
<tr scope="row">
<td>Row Item One</td>
<td>Row Item Two</td>
<td>Row Item Three</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="section typography">
<div class="compartment">
<h2>iframe</h2><iframe width="560" height="315" src="https://www.youtube.com/embed/Ee15gbUiqfs" frameborder="0" allowfullscreen></iframe>
</div>
</div>
<div class="section">
<div class="compartment">
<h2>Sail Slides</h2>
<ol class="sail-slides">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
</ol>
</div>
</div>
<div class="section">
<div class="compartment">
<h2>Lantern Lightbox</h2><img class="lantern-light" src="http://i.imgur.com/TN4ivtD.jpg" title="The 'Cathedral Cliffs' of Kauai's Na Pali Coast. Kauai, Hawaii"><img class="lantern-light" src="http://i.imgur.com/SOABm96.jpg" title="Petrified Forest National Park, Arizona">
<div class="lantern"></div>
</div>
</div>
</main>
<footer class="footer" role="contentinfo">
<div class="section">
<div class="compartment">
<div class="vcard" itemscope itemtype="http://schema.org/Organization">
<div class="org" itemprop="name">Organization Name</div><a class="email" href="mailto:@" itemprop="email">organization at gmail.com</a>
<address itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<div class="street-address" itemprop="streetAddress">82 West Pegasus St.</div>
<div class="street-address-details"><span class="locality" itemprop="addressLocality">Washington, </span><span class="region" itemprop="addressRegion">MA </span><span class="postal-code" itemprop="postalCode">480124</span></div>
</address>
<div class="tel" itemprop="telephone">428-242-2020</div>
</div>
</div>
</div>
</footer>
<script src="./dist/js/site.js"></script>
</body>
</html>