elements.html

---
layout: page
title: WI+RE's Elements Reference
description: Having a massive list of every element of a theme is useful for quick referencing and ideas!
permalink: /elements/
sitemap:
    priority: 0.7
    lastmod: 2017-11-02
    changefreq: monthly
---
<h1>Content types</h1>

<h2>Handouts</h2>

<p>A printable PDF file.</p>

<h3>Frontmatter</h3>
...

<h2>Pages</h2>

<h2>Posts</h2>

<h2>Team members</h2>

<h3>Frontmatter</h3>

<pre>
<code>
---
title:  "Name"
firstname: 
lastname: 
start-date:   YYYY-MM-DD 
end-date:
bio: >- 
    A bio paragraph in first person.
profile: /assets/images/team/...
features:
- feature1
- feature2
- feature3
---
</code>
</pre>

<h2>Tutorials</h2>

<p>A quick and interactive online activity.</p>

<h3>Frontmatter</h3>

<pre>
<code>
---
title:  "The tutorial title"
date:   2009-12-28 
description: >- 
    This is a 1-2 sentence description of the tutorial.
background: /assets/images/...
thumbnail: # do we need this if we have background? Or are they two things?
handout: the-name-of-the-handout-file
category: Getting Started
tags:
- tag1
- tag2
- tag3
---
</code>
</pre>

## Workshops

A series of related activities with integrated assessment and opportunities reflection.

<header class="major">
    <h1>Elements 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 />
<!-- Icons -->
    <h2>Icons</h2>
    <h3>Font Awesome</h3>
    <p>Accessibility and font awesome icons: https://fontawesome.com/how-to-use/on-the-web/other-topics/accessibility</p>
    <blockquote>If your icons are purely decorative, you’ll need to manually add an aria-hidden attribute to each of your icons so they’re accessible.</blockquote>
    <pre>
        <code>
            &lt;i class=&quot;fas fa-camera-retro&quot; aria-hidden&gt;&lt;/i&gt;
        </code>
    </pre>
    <blockquote>If your icons have semantic meaning, you’ll need to manually add a few things so that your icon is appropriately accessible: aria-hidden attribute + Provide a text alternative inside a <code>span</code> (or similar) element. Also include appropriate CSS to visually hide the element while keeping it accessible to assisitive technologies +
    title attribute on the icon to provide a tooltip for sighted mouse users. </blockquote>
    <pre>
        <code>
            &lt;i aria-hidden class=&quot;fas fa-car&quot; title=&quot;Time to destination by car&quot;&gt;&lt;/i&gt;
            &lt;span class=&quot;sr-only&quot;&gt;Time to destination by car:&lt;/span&gt;
            &lt;span&gt;4 minutes&lt;/span&gt;
        </code>
    </pre>
    <p><i class="fab fa-accessible-icon"></i></p> 
    <p><i class="fas fa-universal-access"></i></p>
    <p><i class="fab fa-creative-commons"></i></p>
    <p><i class="fas fa-box-open"></i></p>
    <p><i class="fas fa-microscope"></i></p>
    <p><i class="fas fa-book"></i></p>
    
<!-- Definition List --> 
    <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>
    

    <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>
    <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>


<!-- Tips -->

<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
  Tooltip on top
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
  Tooltip on right
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
  Tooltip on bottom
</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
  Tooltip on left
</button>

<!-- Lead -->
<h3>A "lead" paragraph</h3>
<p class="lead">Lorem ipsum dolor sit amet, consectetur adipisici elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua. A communi observantia non est recedendum. Cras mattis iudicium purus sit amet fermentum.</p>


<!-- Highlights -->
<h3>Highlights</h3>

<section class="py-5">
  <div class="container">
    <div class="row">
      <!-- Box -->
      <div class="col-lg-4">
        <div class="card mb-5 mb-lg-0">
          <div class="card-body">
              <h5 class="card-title text-center">1500+ <br><span class="text-muted">Workshops Completed</span></h5>
          </div>
        </div>
      </div>
      <!-- Box -->
      <div class="col-lg-4">
        <div class="card mb-5 mb-lg-0">
          <div class="card-body">
            <h5 class="card-title text-center">1500+ <br><span class="text-muted">Workshops Completed</span></h5>
          </div>
        </div>
      </div>
      <!-- Box -->
      <div class="col-lg-4">
        <div class="card">
          <div class="card-body">
            <h5 class="card-title text-center">1500+ <br><span class="text-muted">Workshops Completed</span></h5>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>



<!-- Buttons -->


<!-- Form -->


<!-- Image -->


<!-- Box -->


<!-- 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>