style-guide.html

---
layout: default
---

<!-- Begin About the Team -->
<section class="container">
  <hr class="vertical-space1">
  <div class="sixteen columns">
    <div class="container">
      <div class="eight columns">
        <h1 id="headings">Headings</h1>

        <h1>Heading 1</h1>
        <h2>Heading 2</h2>
        <h3>Heading 3</h3>
        <h4>Heading 4</h4>
        <h5>Heading 5</h5>
        <h6>Heading 6</h6>
      </div>

      <div class="eight columns">
        <h1 id="tables">Tables</h1>

        <table class="table" cellspacing="0" cellpadding="0">
          <tr>
            <th>Table Header 1</th><th>Table Header 2</th><th>Table Header 3</th>
          </tr>
          <tr>
            <td>Division 1</td><td>Division 2</td><td>Division 3</td>
          </tr>
          <tr class="even">
            <td>Division 1</td><td>Division 2</td><td>Division 3</td>
          </tr>
          <tr>
            <td>Division 1</td><td>Division 2</td><td>Division 3</td>
          </tr>
        </table>

        <table class="table table-condensed" cellspacing="0" cellpadding="0">
          <tr>
            <th>Table Header 1</th><th>Table Header 2</th><th>Table Header 3</th>
          </tr>
          <tr>
            <td>Division 1</td><td>Division 2</td><td>Division 3</td>
          </tr>
          <tr class="even">
            <td>Division 1</td><td>Division 2</td><td>Division 3</td>
          </tr>
          <tr>
            <td>Division 1</td><td>Division 2</td><td>Division 3</td>
          </tr>
        </table>
      </div>
    </div>

    <small><a href="#wrapper">[top]</a></small>
    <hr />

    <h1 id="paragraph">Paragraph</h1>

    <img style="margin-left:15px;height:125px;float:right" src="/images/kale.png" alt="Kale" />

    <p>Plain Lorem - Lorem ipsum <a href="#">test link</a>, vs a <a href="#replace">broken dev link (should be pink!)</a> adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui.</p>

    <p>Lorem <sup>superscript</sup> dolor <sub>subscript</sub> amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. <cite>cite</cite>. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. <acronym title="National Basketball Association">NBA</acronym> Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.  <abbr title="Avenue">AVE</abbr></p>

    <div class="container">
      <div class="eight columns">
        <pre>
          Lorem ipsum dolor sit amet,
          consectetuer adipiscing elit.
          Nullam dignissim convallis est.
          Quisque aliquam.
        </pre>

        <blockquote>
          "This stylesheet is going to help so freaking much." <br />-Blockquote
        </blockquote>
      </div>

      <div class="eight columns">
        {% highlight ruby %}
        class TestClass
          def hello(chunky, *args, &blk)
            require 'keyword'
            puts 'hello'
            yield chunky
          end
        end
        {% endhighlight %}
      </div>
    </div>

    <small><a href="#wrapper">[top]</a></small>
    <hr />

    <h1 id="list_types">List Types</h1>
    <div class="container">
      <div class="eight columns">
        <h3>Definition List</h3>
        <dl>
          <dt>Definition List Title</dt>
          <dd>This is a definition list division.</dd>
        </dl>

        <h3>Ordered List</h3>
        <ol>
          <li>List Item 1</li>
          <li>List Item 2</li>
          <li>List Item 3</li>
        </ol>
      </div>
      <div class="eight columns">
        <h3>Unordered List</h3>
        <ul>
          <li>List Item 1</li>
          <li>List Item 2</li>
          <li>List Item 3</li>
        </ul>
      </div>
    </div>

    <small><a href="#wrapper">[top]</a></small>
    <hr />

    <h1 id="form_elements">Fieldsets, Legends, and Form Elements</h1>

    <fieldset>
      <legend>Legend</legend>

      <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>

      <form>
        <h2>Form Element</h2>

        <div class="container">
          <div class="eight columns">

            <p>
              <label for="text_field">Text Field:</label><br />
              <input type="text" id="text_field" />
            </p>

            <p>
              <label for="text_area">Text Area:</label><br />
              <textarea id="text_area"></textarea>
            </p>

            <p>
              <label for="select_element">Select Element:</label><br />
              <select name="select_element">
                <optgroup label="Option Group 1">
                  <option value="1">Option 1</option>
                  <option value="2">Option 2</option>
                  <option value="3">Option 3</option>
                </optgroup>
                <optgroup label="Option Group 2">
                  <option value="1">Option 1</option>
                  <option value="2">Option 2</option>
                  <option value="3">Option 3</option>
                </optgroup>
              </select>
            </p>

            <p>
              <label for="radio_buttons">Radio Buttons:</label><br />
              <input type="radio" class="radio" name="radio_button" value="radio_1" /> Radio 1<br/>
              <input type="radio" class="radio" name="radio_button" value="radio_2" /> Radio 2<br/>
              <input type="radio" class="radio" name="radio_button" value="radio_3" /> Radio 3<br/>
            </p>

          </div>

          <div class="eight columns">
            <p>
              <label for="checkboxes">Checkboxes:</label><br />
              <input type="checkbox" class="checkbox" name="checkboxes" value="check_1" /> Radio 1<br/>
              <input type="checkbox" class="checkbox" name="checkboxes" value="check_2" /> Radio 2<br/>
              <input type="checkbox" class="checkbox" name="checkboxes" value="check_3" /> Radio 3<br/>
            </p>

            <p>
              <label for="password">Password:</label><br />
              <input type="password" class="password" name="password" />
            </p>

            <p>
              <label for="file">File Input:</label><br />
              <input type="file" class="file" name="file" />
            </p>

            <p>
              <input class="button" type="reset" value="Clear" />
              <input class="button" type="submit" value="Submit" />
            </p>
          </div>
        </div>
      </form>
    </fieldset>

    <small><a href="#wrapper">[top]</a></small>
    <hr />

    <h1 id="figures">Images and figures</h1>

    <figure>
      <a href="http://compnetworking.about.com/od/basicnetworkingconcepts/l/blbasics_osimod.htm">
        <img src="/images/posts/basics_osimodel.jpg" alt="The OSI model of networking" title="The OSI model of networking" />
      </a>
      <figcaption>
        <a href="http://compnetworking.about.com/od/basicnetworkingconcepts/l/blbasics_osimod.htm">Original article here</a>
      </figcaption>
    </figure>

    <small><a href="#wrapper">[top]</a></small>
    <hr />

    <h1 id="grid">Grid layout</h1>

    <!-- Overrides just for this example -->
    <style>
      .example-grid .column,
      .example-grid .columns {
        background: #EEE;
        text-align: center;
        border-radius: 4px;
        font-size: 1rem;
        text-transform: uppercase;
        height: 30px;
        line-height: 30px;
        margin-bottom: .75rem;
        font-weight: 600;
        letter-spacing: .1rem;
      }
    </style>
    <div class="container example-grid">
      <div class="row">
        <div class="one column">One</div>
        <div class="fifteen columns">Eleven</div>
      </div>

      <div class="row">
        <div class="two columns">Two</div>
        <div class="fourteen columns">Ten</div>
      </div>

      <div class="row">
        <div class="one-third column">1/3</div>
        <div class="two-thirds column">2/3</div>
      </div>
      <div class="row">
        <div class="one-half column">1/2</div>
        <div class="one-half column">1/2</div>
      </div>

    </div>

    <small><a href="#wrapper">[top]</a></small>
    <hr />

    <!-- End of Sample Content -->

    <hr class="vertical-space2">
    <h4 class="subtitle">Meet the Team</h4>
    <hr class="vertical-space1">
    <div class="one_third">
      <figure class="our-team"> <img src="images/chuck.jpg" alt="">
        <figcaption>
          <h4>
            <strong>
              Chuck Lauer Vose<br>
              <small>CFO <em>(Chief Fun Officer)</em></small>
            </strong>
          </h4>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit Aenean nisl orci aliqua.adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna..
          </p>
          <div class="socailfollow">
            <a href="#" class="twitter"><i class="icomoon-twitter"></i></a> <a href="#" class="github"><i class="icomoon-github"></i></a> <a href="#" class="linkedin"><i class="icomoon-linkedin"></i></a>
          </div>
        </figcaption>
      </figure>
      <!-- end Our Team -->
    </div>
    <div class="one_third">
      <figure class="our-team"> <img src="images/erica2.jpg" alt=""> <!-- img size = 300x300 -->
        <figcaption>
          <h4>
            <strong>Erica Lauer Vose<br>
              <small>Senior Adventure Strategist</small>
            </strong>
          </h4>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit Aenean nisl orci aliqua.adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna..
          </p>
          <div class="socailfollow">
            <a href="#" class="twitter"><i class="icomoon-twitter"></i></a> <a href="#" class="github"><i class="icomoon-github"></i></a> <a href="#" class="linkedin"><i class="icomoon-linkedin"></i></a>
          </div>
        </figcaption>
      </figure>
      <!-- end Our Team -->
    </div>
    <div class="one_third column-last">
      <figure class="our-team"> <img src="images/kale_300x300.png" alt="">
        <figcaption>
          <h4>
            <strong>
              Kale<br>
              <small>Head Dinosaur Advisor</small>
            </strong>
          </h4>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit Aenean nisl orci aliqua.adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna..
          </p>
          <div class="socailfollow">
            <a href="#" class="twitter"><i class="icomoon-twitter"></i></a> <a href="#" class="github"><i class="icomoon-github"></i></a> <a href="#" class="linkedin"><i class="icomoon-linkedin"></i></a>
          </div>
        </figcaption>
      </figure>
      <!-- end Our Team -->
    </div>
    <hr class="vertical-space3">
  </div>
</section>
<!-- END About the Team -->

<!-- Begin Blog Page & Sidebar -->
<section class="section-blog">
  <div class="container">
    <section class="eleven columns">
      {% for post in site.posts | limit:1 %}
      <article class="blog-post">

        <div class="one columns alpha frame">
          <div class="blog-date-sec"> <span>{{ post.date | date: '%B' }}</span>
            <h3>{{ post.date | date: '%d' }}</h3>
            <span>{{ post.date | date: '%Y' }}</span>
          </div>
        </div>

        <div class="ten columns omega">
          <div class="img-container">
            <img class="frame" src="{{ post.image-thumb }}" alt="">
            <h3><a href="{{ post.url }}">{{ post.title }}</a></h3>
            <div class="postmetadata">
              <span>by </span><h6 class="blog-author"> {{ post.author }}</h6>
              <span>in </span><h6 class="blog-author"> {{ post.category }}</h6>
            </div>
          </div>
          <p style="margin-left: 60px;">{{ post.content | strip_html | truncate: 200}}</p>
          <a href="{{ post.url }}"><btn style="float: right;" class="btn btn-sm btn-info"><strong>Read More</strong></btn></a>
        </div>

        <br class="clear">
      </article>
      {% endfor %}

    </section>

    <aside class="four columns offset-by-one sidebar">
      <h4 class="subtitle">Categories</h4>
      <div class="listbox1">
        <ul><li><a href="#">Tech</a></li></ul>
      </div>
      <!-- end-listbox1 -->
      <br class="clear">

      <h4 class="subtitle">More Blog Posts</h4>
      <div class="listbox1">
        <ul>
          {% for post in site.posts | limit:1 %}
          <li><a href="{{ post.url }}"> {{ post.date | date: '%b. %d, %Y' }} {{ post.title }}</a></li>
          {% endfor %}
        </ul>
      </div>
      <!-- end-listbox1 -->
    </aside>
    <!-- end-sidebar-->

    <br class="clear">

    <span id="scroll-top"><a class="scrollup"><i class="icomoon-arrow-up"></i></a></span> </div>
    <!-- end-wrap -->
    <!-- End Document -->

    <br class="clear">

    <div class="vertical-space2"></div>
  </section>
  <!-- END Blog Page & Sidebar -->


  <section class="section-blog">
    <div class="container">
      {% for page in site.posts | limit:1 %}
      <section class="eleven columns">
        <article class="blog-single-post"> <img src="{{ page.image-main }}" alt=""><br>
          <div class="post">
            <div class="postmetadata">
              <h6 class="blog-author">{{ page.date | date: '%B %d %Y' }} / <strong>by</strong>  {{ page.author }} / <strong>in</strong> <a href="{{ page.category_url }}.html">{{ page.category }}</a></h6>
            </div>
            <h1>{{ page.title }}</h1>
            <p> {{ page.content | truncate:400 }}</p>
            <br class="clear">
            <hr class="boldbx">
          </div>
        </article>
      </section>
      {% endfor %}
    </div>
  </section>

</div>
<!-- End .wrapper -->