Skip to content
This repository
Fetching contributors…

Cannot retrieve contributors at this time

file 188 lines (166 sloc) 6.991 kb
1 2 3 4 5 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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188
<!DOCTYPE html>
<!-- paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/ -->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8" />

  <!-- Set the viewport width to device width for mobile -->
  <meta name="viewport" content="width=device-width" />

  <title>Foundation Typography Testing</title>

  <!-- Included CSS Files -->
  <link rel="stylesheet" href="stylesheets/styles.css">

  <script src="../vendor/assets/javascripts/foundation/modernizr.foundation.js"></script>

</head>
<body>

  <div class="row">
    <div class="twelve columns">
      <p><a href="index.html">&laquo; Back</a></p>
      <h2>Foundation Typography Testing</h2>
      <hr />
      <dl class="sub-nav">
        <dt>Go to:</dt>
        <dd><a href="#headers">Headers</a></dd>
        <dd><a href="#links">Links</a></dd>
        <dd><a href="#lists">Lists</a></dd>
        <dd><a href="#blockquotes">Blockquotes</a></dd>
      </dl>
    </div>
  </div>

  <!-- Test Foundation Components Here -->
  <div class="row">
    <div class="twelve columns">

      <h3>Typography</h3>
      <h4 class="subheader">Foundation 3 uses a modular scale to generate typography. That means a great, logical vertical rhythm for every design.</h4>

      <div class="row">
        <div class="four columns">
          <a name="headers"></a>
          <h4>General Typography</h4>
          <p>These are the basic elements of typography and rhythm in Foundation 3.</p>
        </div>
        <div class="eight columns">
          <h1>h1. This is a very large header.</h1>
          <h2>h2. This is a large header.</h2>
          <h3>h3. This is a medium header.</h3>
          <h4>h4. This is a moderate header.</h4>
          <h5>h5. This is small header.</h5>
          <h6>h6. This is very small header.</h6>

          <p>This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm. To show what a paragraph looks like this needs a little more content so, let's see&#8230; did you know that there are storms occurring on Jupiter that are larger than the Earth? That's pretty cool.</p>
        </div>
      </div>

      <br><br>

      <div class="row">
        <div class="four columns">
          <h4>Header Styles</h4>
          <p>Optional Subheader Styles</p>
        </div>
        <div class="eight columns">
          <h2>This is a very large main header.</h2>
          <h4 class="subheader">This is a smaller subheader.</h4>

          <h3>This is a large header. <small>This is a small segment of that header.</small></h3>
        </div>
      </div>

      <br><br>

      <div class="row">
        <div class="four columns">
          <a name="links"></a>
          <h4>Links</h4>
          <p>Links are very standard, and the color is preset.</p>
        </div>
        <div class="eight columns">
          <h2><a href="#">This is a header link.</a></h2>
          <h3><a href="#">This is a header link.</a></h3>
          <h4><a href="#">This is a header link.</a></h4>
          <h5><a href="#">This is a header link.</a></h5>
          <p><a href="#">This is a standard inline paragraph link.</a></p>
        </div>
      </div>

      <br><br>

      <div class="row">
        <div class="four columns">
          <a name="lists"></a>
          <h4>Lists</h4>
          <p>Lists are helpful for, well, lists of things.</p>
        </div>
        <div class="eight columns">
          <h6>ul.disc</h6>
          <ul class="disc">
            <li>List item with a much longer description or more content.</li>
            <li>List item</li>
            <li>List item
              <ul>
                <li>Nested List Item</li>
                <li>Nested List Item</li>
                <li>Nested List Item</li>
              </ul>
            </li>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
          </ul>
          <br>
          <h6>ul.circle</h6>
          <ul class="circle">
            <li>List item with a much longer description or more content.</li>
            <li>List item</li>
            <li>List item
              <ul>
                <li>Nested List Item</li>
                <li>Nested List Item</li>
                <li>Nested List Item</li>
              </ul>
            </li>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
          </ul>
          <br>
          <h6>ul.square</h6>
          <ul class="square">
            <li>List item with a much longer description or more content.</li>
            <li>List item</li>
            <li>List item
              <ul>
                <li>Nested List Item</li>
                <li>Nested List Item</li>
                <li>Nested List Item</li>
              </ul>
            </li>
            <li>List item</li>
            <li>List item</li>
            <li>List item</li>
          </ul>
        </div>
      </div>

      <br><br>

      <div class="row">
        <div class="four columns">
          <a name="blockquotes"></a>
          <h4>Blockquotes</h4>
          <p>Sometimes other people say smart things, and you may want to mention that through a blockquote callout. We've got you covered.</p>
        </div>
        <br>
        <div class="eight columns">
          <blockquote>I do not fear computers. I fear the lack of them. Maecenas faucibus mollis interdum. Aenean lacinia bibendum nulla sed consectetur.<cite>Isaac Asimov</cite></blockquote>
        </div>
      </div>


    </div>
  </div>

  <!-- Included JS Files -->
  <script src="../vendor/assets/javascripts/foundation/jquery.js"></script>
  <script src="../vendor/assets/javascripts/foundation/jquery.foundation.mediaQueryToggle.js"></script>
  <script src="../vendor/assets/javascripts/foundation/jquery.placeholder.js"></script>
  <script src="../vendor/assets/javascripts/foundation/jquery.foundation.alerts.js"></script>
  <script src="../vendor/assets/javascripts/foundation/jquery.foundation.accordion.js"></script>
  <script src="../vendor/assets/javascripts/foundation/jquery.foundation.buttons.js"></script>
  <script src="../vendor/assets/javascripts/foundation/jquery.foundation.tooltips.js"></script>
  <script src="../vendor/assets/javascripts/foundation/jquery.foundation.forms.js"></script>
  <script src="../vendor/assets/javascripts/foundation/jquery.foundation.tabs.js"></script>
  <script src="../vendor/assets/javascripts/foundation/jquery.foundation.navigation.js"></script>
  <script src="../vendor/assets/javascripts/foundation/jquery.foundation.reveal.js"></script>
  <script src="../vendor/assets/javascripts/foundation/jquery.foundation.orbit.js"></script>
  <script src="../vendor/assets/javascripts/foundation/app.js"></script>
  <script type="text/javascript">
    // Page-Specific JavaScript Goes Here
  </script>
</body>
</html>
Something went wrong with that request. Please try again.