elements.md 16.1 KB
Newer Older
Andrew Banchich's avatar
Andrew Banchich committed
1
---
Andrew Banchich's avatar
Andrew Banchich committed
2
layout: page
Andrew Banchich's avatar
Andrew Banchich committed
3
title: Elements
Andrew Banchich's avatar
Andrew Banchich committed
4 5
---

Andrew Banchich's avatar
Andrew Banchich committed
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
<h2 id="content">Sample Content</h2>
<p>Praesent ac adipiscing ullamcorper semper ut amet ac risus. Lorem sapien ut odio odio nunc. Ac adipiscing nibh porttitor erat risus justo adipiscing adipiscing amet placerat accumsan. Vis. Faucibus odio magna tempus adipiscing a non. In mi primis arcu ut non accumsan vivamus ac blandit adipiscing adipiscing arcu metus praesent turpis eu ac lacinia nunc ac commodo gravida adipiscing eget accumsan ac nunc adipiscing adipiscing lorem ipsum dolor sit amet nullam veroeros adipiscing.</p>
<div class="row">
	<div class="6u 12u$(small)">
		<h3>Sem turpis amet semper</h3>
		<p>Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat commodo eu sed ante lacinia. Sapien a lorem in integer ornare praesent commodo adipiscing arcu in massa commodo lorem accumsan at odio massa ac ac. Semper adipiscing varius montes viverra nibh in adipiscing blandit tempus accumsan.</p>
	</div>
	<div class="6u$ 12u$(small)">
		<h3>Magna odio tempus commodo</h3>
		<p>In arcu accumsan arcu adipiscing accumsan orci ac. Felis id enim aliquet. Accumsan ac integer lobortis commodo ornare aliquet accumsan erat tempus amet porttitor. Ante commodo blandit adipiscing integer semper orci eget. Faucibus commodo adipiscing mi eu nullam accumsan morbi arcu ornare odio mi adipiscing nascetur lacus ac interdum morbi accumsan vis mi accumsan.</p>
	</div>
	<!-- Break -->
	<div class="4u 12u$(medium)">
		<h3>Interdum sapien gravida</h3>
		<p>Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit.</p>
	</div>
	<div class="4u 12u$(medium)">
		<h3>Faucibus consequat lorem</h3>
		<p>Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit.</p>
	</div>
	<div class="4u$ 12u$(medium)">
		<h3>Accumsan montes viverra</h3>
		<p>Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit.</p>
	</div>
</div>
Andrew Banchich's avatar
Andrew Banchich committed
31

Andrew Banchich's avatar
Andrew Banchich committed
32
<hr class="major" />
Andrew Banchich's avatar
Andrew Banchich committed
33

Andrew Banchich's avatar
Andrew Banchich committed
34 35 36 37
<!-- Elements -->
<h2 id="elements">Elements</h2>
<div class="row 200%">
	<div class="6u 12u$(medium)">
Andrew Banchich's avatar
Andrew Banchich committed
38

Andrew Banchich's avatar
Andrew Banchich committed
39 40 41 42 43 44 45 46 47 48 49 50
		<!-- Text stuff -->
			<h3>Text</h3>
			<p>This is <b>bold</b> and this is <strong>strong</strong>. This is <i>italic</i> and this is <em>emphasized</em>.
			This is <sup>superscript</sup> text and this is <sub>subscript</sub> text.
			This is <u>underlined</u> and this is code: <code>for (;;) { ... }</code>.
			Finally, this is a <a href="#">link</a>.</p>
			<hr />
			<h2>Heading Level 2</h2>
			<h3>Heading Level 3</h3>
			<h4>Heading Level 4</h4>
			<hr />
			<p>Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.</p>
Andrew Banchich's avatar
Andrew Banchich committed
51

Andrew Banchich's avatar
Andrew Banchich committed
52 53 54 55
		<!-- Lists -->
			<h3>Lists</h3>
			<div class="row">
				<div class="6u 12u$(small)">
Andrew Banchich's avatar
Andrew Banchich committed
56

Andrew Banchich's avatar
Andrew Banchich committed
57 58 59 60 61 62
					<h4>Unordered</h4>
					<ul>
						<li>Dolor etiam magna etiam.</li>
						<li>Sagittis lorem eleifend.</li>
						<li>Felis dolore viverra.</li>
					</ul>
Andrew Banchich's avatar
Andrew Banchich committed
63

Andrew Banchich's avatar
Andrew Banchich committed
64 65 66 67 68 69
					<h4>Alternate</h4>
					<ul class="alt">
						<li>Dolor etiam magna etiam.</li>
						<li>Sagittis lorem eleifend.</li>
						<li>Felis feugiat viverra.</li>
					</ul>
Andrew Banchich's avatar
Andrew Banchich committed
70

Andrew Banchich's avatar
Andrew Banchich committed
71 72
				</div>
				<div class="6u$ 12u$(small)">
Andrew Banchich's avatar
Andrew Banchich committed
73

Andrew Banchich's avatar
Andrew Banchich committed
74 75 76 77 78 79 80 81 82
					<h4>Ordered</h4>
					<ol>
						<li>Dolor etiam magna etiam.</li>
						<li>Etiam vel lorem sed viverra.</li>
						<li>Felis dolore viverra.</li>
						<li>Dolor etiam magna etiam.</li>
						<li>Etiam vel lorem sed viverra.</li>
						<li>Felis dolore viverra.</li>
					</ol>
Andrew Banchich's avatar
Andrew Banchich committed
83

Andrew Banchich's avatar
Andrew Banchich committed
84 85 86 87 88 89 90 91 92
					<h4>Icons</h4>
					<ul class="icons">
						<li><a href="#" class="icon fa-twitter"><span class="label">Twitter</span></a></li>
						<li><a href="#" class="icon fa-facebook"><span class="label">Facebook</span></a></li>
						<li><a href="#" class="icon fa-instagram"><span class="label">Instagram</span></a></li>
						<li><a href="#" class="icon fa-github"><span class="label">Github</span></a></li>
						<li><a href="#" class="icon fa-dribbble"><span class="label">Dribbble</span></a></li>
						<li><a href="#" class="icon fa-tumblr"><span class="label">Tumblr</span></a></li>
					</ul>
Andrew Banchich's avatar
Andrew Banchich committed
93

Andrew Banchich's avatar
Andrew Banchich committed
94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110
				</div>
			</div>
			<h4>Definition</h4>
			<dl>
				<dt>Item1</dt>
				<dd>
					<p>Lorem ipsum dolor vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Lorem ipsum dolor.</p>
				</dd>
				<dt>Item2</dt>
				<dd>
					<p>Lorem ipsum dolor vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Lorem ipsum dolor.</p>
				</dd>
				<dt>Item3</dt>
				<dd>
					<p>Lorem ipsum dolor vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Lorem ipsum dolor.</p>
				</dd>
			</dl>
Andrew Banchich's avatar
Andrew Banchich committed
111

Andrew Banchich's avatar
Andrew Banchich committed
112 113 114 115 116 117 118 119 120 121 122 123
			<h4>Actions</h4>
			<ul class="actions">
				<li><a href="#" class="button special">Default</a></li>
				<li><a href="#" class="button">Default</a></li>
			</ul>
			<ul class="actions small">
				<li><a href="#" class="button special small">Small</a></li>
				<li><a href="#" class="button small">Small</a></li>
			</ul>
			<div class="row">
				<div class="6u 12u$(small)">
					<ul class="actions vertical">
Andrew Banchich's avatar
Andrew Banchich committed
124 125 126
						<li><a href="#" class="button special">Default</a></li>
						<li><a href="#" class="button">Default</a></li>
					</ul>
Andrew Banchich's avatar
Andrew Banchich committed
127 128 129
				</div>
				<div class="6u$ 12u$(small)">
					<ul class="actions vertical small">
Andrew Banchich's avatar
Andrew Banchich committed
130 131 132
						<li><a href="#" class="button special small">Small</a></li>
						<li><a href="#" class="button small">Small</a></li>
					</ul>
Andrew Banchich's avatar
Andrew Banchich committed
133 134 135 136 137
				</div>
				<div class="6u 12u$(small)">
					<ul class="actions vertical">
						<li><a href="#" class="button special fit">Default</a></li>
						<li><a href="#" class="button fit">Default</a></li>
Andrew Banchich's avatar
Andrew Banchich committed
138
					</ul>
Andrew Banchich's avatar
Andrew Banchich committed
139 140 141 142 143 144 145 146
				</div>
				<div class="6u$ 12u$(small)">
					<ul class="actions vertical small">
						<li><a href="#" class="button special small fit">Small</a></li>
						<li><a href="#" class="button small fit">Small</a></li>
					</ul>
				</div>
			</div>
Andrew Banchich's avatar
Andrew Banchich committed
147

Andrew Banchich's avatar
Andrew Banchich committed
148 149 150 151 152 153 154 155 156 157 158 159
			<h4>Pagination</h4>
			<ul class="pagination">
				<li><span class="button disabled">Prev</span></li>
				<li><a href="#" class="page active">1</a></li>
				<li><a href="#" class="page">2</a></li>
				<li><a href="#" class="page">3</a></li>
				<li><span>&hellip;</span></li>
				<li><a href="#" class="page">8</a></li>
				<li><a href="#" class="page">9</a></li>
				<li><a href="#" class="page">10</a></li>
				<li><a href="#" class="button">Next</a></li>
			</ul>
Andrew Banchich's avatar
Andrew Banchich committed
160

Andrew Banchich's avatar
Andrew Banchich committed
161 162 163
		<!-- Blockquote -->
			<h3>Blockquote</h3>
			<blockquote>Lorem ipsum dolor vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent. Lorem ipsum dolor. Lorem ipsum dolor vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus.</blockquote>
Andrew Banchich's avatar
Andrew Banchich committed
164

Andrew Banchich's avatar
Andrew Banchich committed
165 166
		<!-- Table -->
			<h3>Table</h3>
Andrew Banchich's avatar
Andrew Banchich committed
167

Andrew Banchich's avatar
Andrew Banchich committed
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
			<h4>Default</h4>
			<div class="table-wrapper">
				<table>
					<thead>
						<tr>
							<th>Name</th>
							<th>Description</th>
							<th>Price</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>Item1</td>
							<td>Ante turpis integer aliquet porttitor.</td>
							<td>29.99</td>
						</tr>
						<tr>
							<td>Item2</td>
							<td>Vis ac commodo adipiscing arcu aliquet.</td>
							<td>19.99</td>
						</tr>
						<tr>
							<td>Item3</td>
							<td> Morbi faucibus arcu accumsan lorem.</td>
							<td>29.99</td>
						</tr>
						<tr>
							<td>Item4</td>
							<td>Vitae integer tempus condimentum.</td>
							<td>19.99</td>
						</tr>
						<tr>
							<td>Item5</td>
							<td>Ante turpis integer aliquet porttitor.</td>
							<td>29.99</td>
						</tr>
					</tbody>
					<tfoot>
						<tr>
							<td colspan="2"></td>
							<td>100.00</td>
						</tr>
					</tfoot>
				</table>
Andrew Banchich's avatar
Andrew Banchich committed
212 213
			</div>

Andrew Banchich's avatar
Andrew Banchich committed
214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258
			<h4>Alternate</h4>
			<div class="table-wrapper">
				<table class="alt">
					<thead>
						<tr>
							<th>Name</th>
							<th>Description</th>
							<th>Price</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>Item1</td>
							<td>Ante turpis integer aliquet porttitor.</td>
							<td>29.99</td>
						</tr>
						<tr>
							<td>Item2</td>
							<td>Vis ac commodo adipiscing arcu aliquet.</td>
							<td>19.99</td>
						</tr>
						<tr>
							<td>Item3</td>
							<td> Morbi faucibus arcu accumsan lorem.</td>
							<td>29.99</td>
						</tr>
						<tr>
							<td>Item4</td>
							<td>Vitae integer tempus condimentum.</td>
							<td>19.99</td>
						</tr>
						<tr>
							<td>Item5</td>
							<td>Ante turpis integer aliquet porttitor.</td>
							<td>29.99</td>
						</tr>
					</tbody>
					<tfoot>
						<tr>
							<td colspan="2"></td>
							<td>100.00</td>
						</tr>
					</tfoot>
				</table>
			</div>
Andrew Banchich's avatar
Andrew Banchich committed
259

Andrew Banchich's avatar
Andrew Banchich committed
260 261
	</div>
	<div class="6u$ 12u$(medium)">
Andrew Banchich's avatar
Andrew Banchich committed
262

Andrew Banchich's avatar
Andrew Banchich committed
263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294
		<!-- Buttons -->
			<h3>Buttons</h3>
			<ul class="actions">
				<li><a href="#" class="button special">Special</a></li>
				<li><a href="#" class="button">Default</a></li>
			</ul>
			<ul class="actions">
				<li><a href="#" class="button big">Big</a></li>
				<li><a href="#" class="button">Default</a></li>
				<li><a href="#" class="button small">Small</a></li>
			</ul>
			<ul class="actions">
				<li><a href="#" class="button special big">Big</a></li>
				<li><a href="#" class="button special">Default</a></li>
				<li><a href="#" class="button special small">Small</a></li>
			</ul>
			<ul class="actions fit">
				<li><a href="#" class="button special fit">Fit</a></li>
				<li><a href="#" class="button fit">Fit</a></li>
			</ul>
			<ul class="actions fit small">
				<li><a href="#" class="button special fit small">Fit + Small</a></li>
				<li><a href="#" class="button fit small">Fit + Small</a></li>
			</ul>
			<ul class="actions">
				<li><a href="#" class="button special icon fa-search">Icon</a></li>
				<li><a href="#" class="button icon fa-download">Icon</a></li>
			</ul>
			<ul class="actions">
				<li><span class="button special disabled">Special</span></li>
				<li><span class="button disabled">Default</span></li>
			</ul>
Andrew Banchich's avatar
Andrew Banchich committed
295

Andrew Banchich's avatar
Andrew Banchich committed
296 297
		<!-- Form -->
			<h3>Form</h3>
Andrew Banchich's avatar
Andrew Banchich committed
298

Andrew Banchich's avatar
Andrew Banchich committed
299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316
			<form method="post" action="#">
				<div class="row uniform">
					<div class="6u 12u$(xsmall)">
						<input type="text" name="demo-name" id="demo-name" value="" placeholder="Name" />
					</div>
					<div class="6u$ 12u$(xsmall)">
						<input type="email" name="demo-email" id="demo-email" value="" placeholder="Email" />
					</div>
					<!-- Break -->
					<div class="12u$">
						<div class="select-wrapper">
							<select name="demo-category" id="demo-category">
								<option value="">- Category -</option>
								<option value="1">Manufacturing</option>
								<option value="1">Shipping</option>
								<option value="1">Administration</option>
								<option value="1">Human Resources</option>
							</select>
Andrew Banchich's avatar
Andrew Banchich committed
317 318
						</div>
					</div>
Andrew Banchich's avatar
Andrew Banchich committed
319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353
					<!-- Break -->
					<div class="4u 12u$(small)">
						<input type="radio" id="demo-priority-low" name="demo-priority" checked>
						<label for="demo-priority-low">Low</label>
					</div>
					<div class="4u 12u$(small)">
						<input type="radio" id="demo-priority-normal" name="demo-priority">
						<label for="demo-priority-normal">Normal</label>
					</div>
					<div class="4u$ 12u$(small)">
						<input type="radio" id="demo-priority-high" name="demo-priority">
						<label for="demo-priority-high">High</label>
					</div>
					<!-- Break -->
					<div class="6u 12u$(small)">
						<input type="checkbox" id="demo-copy" name="demo-copy">
						<label for="demo-copy">Email me a copy</label>
					</div>
					<div class="6u$ 12u$(small)">
						<input type="checkbox" id="demo-human" name="demo-human" checked>
						<label for="demo-human">I am a human</label>
					</div>
					<!-- Break -->
					<div class="12u$">
						<textarea name="demo-message" id="demo-message" placeholder="Enter your message" rows="6"></textarea>
					</div>
					<!-- Break -->
					<div class="12u$">
						<ul class="actions">
							<li><input type="submit" value="Send Message" class="special" /></li>
							<li><input type="reset" value="Reset" /></li>
						</ul>
					</div>
				</div>
			</form>
Andrew Banchich's avatar
Andrew Banchich committed
354

Andrew Banchich's avatar
Andrew Banchich committed
355 356
		<!-- Image -->
			<h3>Image</h3>
Andrew Banchich's avatar
Andrew Banchich committed
357

Andrew Banchich's avatar
Andrew Banchich committed
358
			<h4>Fit</h4>
359
			<span class="image fit"><img src="assets/images/pic11.jpg" alt="" /></span>
Andrew Banchich's avatar
Andrew Banchich committed
360 361
			<div class="box alt">
				<div class="row 50% uniform">
362 363 364
					<div class="4u"><span class="image fit"><img src="assets/images/pic01.jpg" alt="" /></span></div>
					<div class="4u"><span class="image fit"><img src="assets/images/pic02.jpg" alt="" /></span></div>
					<div class="4u$"><span class="image fit"><img src="assets/images/pic03.jpg" alt="" /></span></div>
Andrew Banchich's avatar
Andrew Banchich committed
365
					<!-- Break -->
366 367 368
					<div class="4u"><span class="image fit"><img src="assets/images/pic03.jpg" alt="" /></span></div>
					<div class="4u"><span class="image fit"><img src="assets/images/pic01.jpg" alt="" /></span></div>
					<div class="4u$"><span class="image fit"><img src="assets/images/pic02.jpg" alt="" /></span></div>
Andrew Banchich's avatar
Andrew Banchich committed
369
					<!-- Break -->
370 371 372
					<div class="4u"><span class="image fit"><img src="assets/images/pic02.jpg" alt="" /></span></div>
					<div class="4u"><span class="image fit"><img src="assets/images/pic03.jpg" alt="" /></span></div>
					<div class="4u$"><span class="image fit"><img src="assets/images/pic01.jpg" alt="" /></span></div>
Andrew Banchich's avatar
Andrew Banchich committed
373 374 375 376
				</div>
			</div>

			<h4>Left &amp; Right</h4>
377
			<p><span class="image left"><img src="assets/images/pic01.jpg" alt="" /></span>Lorem ipsum dolor sit accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent.</p>
Andrew Banchich's avatar
Andrew Banchich committed
378
			<p><span class="image right"><img src="assets/images/pic02.jpg" alt="" /></span>Lorem ipsum dolor sit accumsan interdum nisi, quis tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Vestibulum ante ipsum primis sagittis eget. tempus euismod. Vestibulum ante ipsum primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent.</p>
Andrew Banchich's avatar
Andrew Banchich committed
379

Andrew Banchich's avatar
Andrew Banchich committed
380 381 382 383 384 385 386 387 388
		<!-- Box -->
			<h3>Box</h3>
			<div class="box">
				<p>Felis sagittis eget tempus primis in faucibus vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing accumsan eu faucibus. Integer ac pellentesque praesent tincidunt felis sagittis eget. tempus euismod. Magna sed etiam ante ipsum primis in faucibus vestibulum.</p>
			</div>

		<!-- Preformatted Code -->
			<h3>Preformatted</h3>
			<pre><code>i = 0;
Andrew Banchich's avatar
Andrew Banchich committed
389 390

while (!deck.isInOrder()) {
Andrew Banchich's avatar
Andrew Banchich committed
391 392 393
print 'Iteration ' + i;
deck.shuffle();
i++;
Andrew Banchich's avatar
Andrew Banchich committed
394 395 396 397 398
}

print 'It took ' + i + ' iterations to sort the deck.';
</code></pre>

Andrew Banchich's avatar
Andrew Banchich committed
399 400
	</div>
</div>