style-guide.html

<!-- @include _top.html -->
<!-- $title Style Guide -->
<article class="style-guide">
  
  <h1 class="style-title">Style Guide</h1>
  
  <section class="logo">
    <div class="row">
      <div class="large-3 columns"><h2 class="style-subtitle">Logo</h2></div>
      <div class="large-9 columns">
        <img src="http://placehold.it/260x61&text=Logo" />
      </div>
    </div>
  </section>

  <section>
    <div class="row">
        <div class="large-3 columns">
          <h2 class="style-subtitle">Typography</h2>
        </div>
        <div class="large-9 columns">
          <div class="typography">
                <dl class="style-info"><dt>Headline Font: </dt> <dd>Edit this</dd></dl>
                <h1>This is a page title</h1>

                <h2>This is a second level heading</h2>

                <h3>And this is a third</h3>

                <h4>Heading four</h4>

                <h5>Heading Five</h5>

                <h6>Heading Six</h6>

                <dl class="style-info"><dt>Body font: </dt> <dd>Edit this</dd></dl>

                <p class="intro">An introductory paragraph is a great way to summarise the content before the reader really digs into the detail of your story. With a .intro class attached, this special paragraph can have a unique text size while inheriting its other attributes from it's parent.</p>

                <p>This is a paragraph, which will probably be the most common element on your site. It's likely that the vertical rhythm of your site will be largely determined by the line-height of your paragraph.&nbsp;</p>

                <p>Content can contain inline styles such as <a href="#">hyperlinks</a>. It's likely that the <strong>vertical rhythm</strong> of your site will be largely determined by the line-height of your <em>paragraph</em>.</p>

                <blockquote>This is a blockquote, an element that represents a section that is being quoted from another source.<cite>John Doe</cite></blockquote>
                
            </div>
      </div>
    </div>
  </section>

  <section class="color-styles">
    <div class="row">
      <div class="large-3 columns">
        <h2 class="style-subtitle">Color</h2>
      </div>
      <div class="large-3 columns">
        <h5>Neutrals</h5>
        <ul class="colors neutrals">
          <li class="neutral-one">1</li>
          <li class="neutral-two">2</li>
        </ul>
      </div>
      <div class="large-3 columns">
        <h5>Accents</h5>
        <ul class="colors accents">
          <li class="accent-one">1</li>
          <li class="accent-two">2</li>
          <li class="accent-three">3</li>
        </ul>
      </div>
      <div class="large-3 columns">
        <h5>Action</h5>
        <ul class="colors actions">
          <li class="action-one">1</li>
        </ul>
      </div>
    </div>
  </section>

  <section class"forms">
    <div class="row">
      <div class="large-3 columns">
        <h2 class="style-subtitle">Forms</h2>
      </div>
      <div class="large-9 columns">

        <form>
          <div class="row collapse">
            <div class="small-3 large-3 columns">
              <span class="prefix">Name</span>
            </div>
            <div class="small-9 large-9 columns">
              <input type="text" placeholder="First Last">
            </div>
          </div>
          <div class="row">
            <div class="large-6 columns">
              <textarea></textarea>
            </div>
          </div>
          <div class="row">
            <div class="large-4 columns">
              <a href="#" data-dropdown="drop1" class="button dropdown">Drop-down</a>
              <ul id="drop1" class="f-dropdown">
                <li><a href="#">This is a link</a></li>
                <li><a href="#">This is another</a></li>
                <li><a href="#">Yet another</a></li>
              </ul>
            </div>
          </div>
          <div class="row">
            <div class="large-12 columns">
              <input type="submit" value="Button" class="button">
            </div>
          </div>

        </form>

      </div>
    </div> <!-- end forms -->
  </section>

  <section>
    <div class="row icons">
      <div class="large-3 columns"><h2 class="style-subtitle">Icon Style</h2></div>
      <div class="large-9 columns">
        <img src="http://placehold.it/50x50&text=icon" />
        <img src="http://placehold.it/50x50&text=icon" />
        <img src="http://placehold.it/50x50&text=icon" />
      </div>
    </div>
  </section>

  <section class="photos">
    <div class="row">
      <div class="large-3 columns"><h2 class="style-subtitle">Photo Style</h2></div>
      <div class="large-9 columns">
            <img src="http://placehold.it/50x50&text=icon"/>
      </div>
    </div>
  </section>

<section class="tables">
  <div class="row">
    <div class="large-3 columns"><h2 class="style-subtitle">Data</h2></div>
    <div class="large-9 columns">
      <table>
        <thead>
          <tr>
            <th>Col 1</th>
            <th>Col 2</th>
        </tr>
        </thead>  
        <tr>
          <td>Data 1</td>
          <td>Data 2</td>
        </tr>
        <tr>
          <td>Data 3</td>
          <td>Data 4</td>
        </tr>
      </table>
    </div>
  </div>
</section>

<section class="sketchpad">
  <div class="row">
    <div class="large-3 columns"><h2 class="style-subtitle">Sketchpad</h2></div>
    <div class="large-9 columns"><img src="http://placehold.it/1200x1090&text=sketchpad" /></div>
  </div>
</section>

</article>

<footer>
  <div class="row">
    <div class="large-12 columns"><p>&copy;2013 20Mile Interactive. All rights reserved</p></div>
</div>
</footer>

<!-- @include _bottom.html -->