elements.html

---
layout: page
title: Jekyll Theme - Elements Reference - Massively
description: Having a massive list of every element of a theme is useful for quick referencing and ideas. Here is every component of Massively!
sitemap:
    priority: 0.7
    lastmod: 2017-11-02
    changefreq: weekly
---
<header class="major">
	<h1>Elements<br />
	Reference</h1>
</header>

<!-- Text stuff -->
	<h2>Text</h2>
	<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>
	<h5>Heading Level 5</h5>
	<h6>Heading Level 6</h6>
	<hr />
	<header>
		<h2>Heading with a Subtitle</h2>
		<p>Subtitle text is italicized</p>
	</header>
	<p>This is the text that goes under the heading and the subtitle, most commonly referred to as: the paragraph. Paragraphs vary in length but in school we're taught to make them at least 7 sentences or else we risk getting a C. Since the paragraph didn't have a thesis or a closing argument, it's probably a C grade paragraph.</p>
	<header>
		<h3>Heading with a Subtitle</h3>
		<p>This is the subtitle</p>
	</header>
	<p>This is the text that goes under the heading and the subtitle, most commonly referred to as: the paragraph. Paragraphs vary in length but in school we're taught to make them at least 7 sentences or else we risk getting a C. Since the paragraph didn't have a thesis or a closing argument, it's probably a C grade paragraph.</p>
	<header>
		<h4>Heading with a Subtitle</h4>
		<p>Here is the subtitle again</p>
	</header>
	<p>This is the text that goes under the heading and the subtitle, most commonly referred to as: the paragraph. Paragraphs vary in length but in school we're taught to make them at least 7 sentences or else we risk getting a C. Since the paragraph didn't have a thesis or a closing argument, it's probably a C grade paragraph.</p>

	<hr />

<!-- Lists -->
	<h2>Lists</h2>
	<div class="row">
		<div class="6u 12u$(small)">

			<h3>Unordered</h3>
			<ul>
				<li>The first item on the list.</li>
				<li>The second item.</li>
				<li>And the fourth item!</li>
				<li>Just kidding that last one was the third.</li>
			</ul>

			<h3>Alternate</h3>
			<ul class="alt">
				<li>The first item on the list.</li>
				<li>The second item.</li>
				<li>And the fourth item!</li>
				<li>Just kidding that last one was the third.</li>
			</ul>

		</div>
		<div class="6u$ 12u$(small)">

			<h3>Ordered</h3>
			<ol>
				<li>The first item on the list.</li>
				<li>The second item.</li>
				<li>And the fourth item</li>
				<li>Just kidding that last one was the third.</li>
			</ol>

			<h3>Icons</h3>
			<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>
			</ul>
			<ul class="icons alt">
				<li><a href="#" class="icon alt fa-twitter"><span class="label">Twitter</span></a></li>
				<li><a href="#" class="icon alt fa-facebook"><span class="label">Facebook</span></a></li>
				<li><a href="#" class="icon alt fa-instagram"><span class="label">Instagram</span></a></li>
				<li><a href="#" class="icon alt fa-github"><span class="label">Github</span></a></li>
				<li><a href="#" class="icon alt fa-dribbble"><span class="label">Dribbble</span></a></li>
			</ul>

		</div>
	</div>
	<h3>Definition</h3>
	<dl>
		<dt>Item 1</dt>
		<dd>
			<p>For item number one we have a brand new set of sample text that is purely meant to help you visualize what a completed website might look like. Definitely replace this!</p>
		</dd>
		<dt>Item 2</dt>
		<dd>
			<p>For item number one we have a brand new set of sample text that is purely meant to help you visualize what a completed website might look like. Definitely replace this!</p>
		</dd>
		<dt>Item 3</dt>
		<dd>
			<p>For item number one we have a brand new set of sample text that is purely meant to help you visualize what a completed website might look like. Definitely replace this!</p>
		</dd>
	</dl>

	<h3>Actions</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 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">
				<li><a href="#" class="button special">Default</a></li>
				<li><a href="#" class="button">Default</a></li>
			</ul>
		</div>
		<div class="6u 12u$(small)">
			<ul class="actions vertical small">
				<li><a href="#" class="button special small">Small</a></li>
				<li><a href="#" class="button small">Small</a></li>
			</ul>
		</div>
	</div>
	<div class="row">
		<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>
			</ul>
		</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>

	<hr />

<!-- Blockquote -->
	<h2>Blockquote</h2>
	<blockquote>Here is where you would generally insert a life-changing, Instagram worthy quote that will make all your friends jealous of your smartness.</blockquote>

	<hr />

<!-- Table -->
	<h2>Table</h2>

	<h3>Default</h3>
	<div class="table-wrapper">
		<table>
			<thead>
				<tr>
					<th>Name</th>
					<th>Description</th>
					<th>Price</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Item 1</td>
					<td>This item costs money.</td>
					<td>29.99</td>
				</tr>
				<tr>
					<td>Item 2</td>
					<td>And this one is not free either.</td>
					<td>19.99</td>
				</tr>
				<tr>
					<td>Item 3</td>
					<td>Here we have another item.</td>
					<td>29.99</td>
				</tr>
				<tr>
					<td>Item 4</td>
					<td>More items and stuff.</td>
					<td>19.99</td>
				</tr>
				<tr>
					<td>Item 5</td>
					<td>The last item and stuff.</td>
					<td>29.99</td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<td colspan="2"></td>
					<td>100.00</td>
				</tr>
			</tfoot>
		</table>
	</div>

	<h3>Alternate</h3>
	<div class="table-wrapper">
		<table class="alt">
			<thead>
				<tr>
					<th>Name</th>
					<th>Description</th>
					<th>Price</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td>Item 1</td>
					<td>This item costs money.</td>
					<td>29.99</td>
				</tr>
				<tr>
					<td>Item 2</td>
					<td>And this one is not free either.</td>
					<td>19.99</td>
				</tr>
				<tr>
					<td>Item 3</td>
					<td>Here we have another item.</td>
					<td>29.99</td>
				</tr>
				<tr>
					<td>Item 4</td>
					<td>More items and stuff.</td>
					<td>19.99</td>
				</tr>
				<tr>
					<td>Item 5</td>
					<td>The last item and stuff.</td>
					<td>29.99</td>
				</tr>
			</tbody>
			<tfoot>
				<tr>
					<td colspan="2"></td>
					<td>100.00</td>
				</tr>
			</tfoot>
		</table>
	</div>

	<hr />

<!-- Buttons -->
	<h2>Buttons</h2>
	<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 special 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 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>

	<hr />

<!-- Form -->
	<h2>Form</h2>

	<form method="post" action="#" class="alt">
		<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>
				</div>
			</div>
			<!-- 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>

	<hr />

<!-- Image -->
	<h2>Image</h2>

	<h3>Fit</h3>
	<span class="image fit"><img src="{{ "/images/pic01.jpg" | absolute_url }}" alt="" /></span>
	<div class="box alt">
		<div class="row 50% uniform">
			<div class="4u"><span class="image fit"><img src="{{ "/images/pic02.jpg" | absolute_url }}" alt="" /></span></div>
			<div class="4u"><span class="image fit"><img src="{{ "/images/pic03.jpg" | absolute_url }}" alt="" /></span></div>
			<div class="4u$"><span class="image fit"><img src="/images/pic04.jpg" alt="" /></span></div>
			<!-- Break -->
			<div class="4u"><span class="image fit"><img src="{{ "/images/pic04.jpg" | absolute_url }}" alt="" /></span></div>
			<div class="4u"><span class="image fit"><img src="{{ "/images/pic05.jpg" | absolute_url }}" alt="" /></span></div>
			<div class="4u$"><span class="image fit"><img src="{{ "/images/pic01.jpg" | absolute_url }}" alt="" /></span></div>
			<!-- Break -->
			<div class="4u"><span class="image fit"><img src="{{ "/images/pic02.jpg" | absolute_url }}" alt="" /></span></div>
			<div class="4u"><span class="image fit"><img src="{{ "/images/pic04.jpg" | absolute_url }}" alt="" /></span></div>
			<div class="4u$"><span class="image fit"><img src="{{ "/images/pic03.jpg" | absolute_url }}" alt="" /></span></div>
		</div>
	</div>

	<h3>Left &amp; Right</h3>
	<p><span class="image left"><img src="{{ "/images/pic02.jpg" | absolute_url }}" alt="" /></span>In both layman and nerd-speak, this is a paragraph. This is a paragraph that goes on the right side of an image. This is the text that goes under the heading and the subtitle. Paragraphs vary in length but in school we're taught to make them at least 7 sentences or else we risk getting a C. Since the paragraph didn't have a thesis or a closing argument, it's probably a C grade paragraph.</p>
	<p><span class="image right"><img src="{{ "/images/pic03.jpg" | absolute_url }}" alt="" /></span>In both layman and nerd-speak, this is a paragraph. This is a paragraph that goes on the right side of an image. This is the text that goes under the heading and the subtitle. Paragraphs vary in length but in school we're taught to make them at least 7 sentences or else we risk getting a C. Since the paragraph didn't have a thesis or a closing argument, it's probably a C grade paragraph.</p>

	<hr />

<!-- Box -->
	<h2>Box</h2>
	<div class="box">
		<p>In both layman and nerd-speak, this is a paragraph. This is a paragraph that goes inside a box! Whoa so crazy. This is the text that goes under the heading and the subtitle. Paragraphs vary in length but in school we're taught to make them at least 7 sentences or else we risk getting a C. Since the paragraph didn't have a thesis or a closing argument, it's probably a C grade paragraph.</p>
	</div>

	<hr />

<!-- Preformatted Code -->
	<h2>Preformatted</h2>
	<pre><code>i = 0;

	while (!deck.isInOrder()) {
	print 'Iteration ' + i;
	deck.shuffle();
	i++;
	}

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