<commit_before><% @side_nav = "type" %>
<div class="row">
  <div class="large-9 push-3 columns">

    <% @page_title = "Typography" %>
    <div class="row">
      <div class="large-12 columns">
        <h2><%= @page_title %></h2>
        <h4 class="subheader">Foundation 4 typography is built with ems, making it easier to fine-tune your type across different breakpoints. By default, we include a single breakpoint in typography sizes and styles, but you can add more if you'd like.</h4>

        <p>We're no longer depending on modular scale in the core of Foundation. We made an effort with this release to be dependancy free other than Sass. This way people can use whatever framework and gems they want on top of Foundation. We'll still use <a href="http://compass-style.org">Compass</a>.</p>

        <hr>

      </div>
    </div>


    <div class="row">
      <div class="large-12 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 a small header. h1.</h5>
        <h6>h6. This is a tiny header. h1.</h6>

<%= code_example '
<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 a small header. h1.</h5>
<h6>h6. This is a tiny header. h1.</h6>
', :html %>

        <hr>

        <h1 class="subheader">h1.subheader</h1>
        <h2 class="subheader">h2.subheader</h2>
        <h3 class="subheader">h3.subheader</h3>
        <h4 class="subheader">h4.subheader</h4>
        <h5 class="subheader">h5.subheader</h5>
        <h6 class="subheader">h6.subheader</h6>

<%= code_example '
<h1 class="subheader">h1.subheader</h1>
<h2 class="subheader">h2.subheader</h2>
<h3 class="subheader">h3.subheader</h3>
<h4 class="subheader">h4.subheader</h4>
<h5 class="subheader">h5.subheader</h5>
<h6 class="subheader">h6.subheader</h6>
', :html %>

        <hr>

        <h1>h1. <small>Small segment header.</small></h1>
        <h2>h2. <small>Small segment header.</small></h2>
        <h3>h3. <small>Small segment header.</small></h3>
        <h4>h4. <small>Small segment header.</small></h4>
        <h5>h5. <small>Small segment header.</small></h5>
        <h6>h6. <small>Small segment header.</small></h6>

<%= code_example '
<h1>h1. <small>Small segment header.</small></h1>
<h2>h2. <small>Small segment header.</small></h2>
<h3>h3. <small>Small segment header.</small></h3>
<h4>h4. <small>Small segment header.</small></h4>
<h5>h5. <small>Small segment header.</small></h5>
<h6>h6. <small>Small segment header.</small></h6>
', :html %>


        <hr>

        <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, did you know that there are storms occurring on Jupiter that are larger than the Earth? Pretty cool. Wrap <code>&lt;strong&gt;</code> around type to <strong>make it bold!</strong>. You can also you <code>&lt;em&gt;</code> to <em>italicize your words</em>.</p>

<%= code_example '
<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, did you know that there are storms occurring on Jupiter that are larger than the Earth? Pretty cool. Wrap <strong> around type to <strong>make it bold!</strong>. You can also you <em> to <em>italicize your words</em>.</p>
', :html %>

        <hr>

        <h3>Links</h3>
        <p>Links are very standard, and the <a href="http://www.youtube.com/watch?v=oHg5SJYRHA0">color is preset</a> to the Foundation primary color.</p>

<%= code_example '
<p>Links are very standard, and the <a href="#">color is preset</a> to the Foundation primary color.</p>
', :html %>

        <hr>

        <h3>Lists</h3>
        <p>Lists are helpful for, well, lists of things.</p>

        <div class="row">
          <div class="large-4 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>
          </div>

          <div class="large-4 columns">
            <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>
          </div>

          <div class="large-4 columns">
            <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>

        <div class="row">
          <div class="large-4 columns">
            <h6>Ordered Lists</h6>
            <ol>
              <li>List Item 1</li>
              <li>List Item 2
                <ol>
                  <li>Nested List Item</li>
                  <li>Nested List Item</li>
                  <li>Nested List Item</li>
                </ol>
              </li>
              <li>List Item 3</li>
            </ol>
          </div>
          <div class="large-8 columns">
            <h6>Defition Lists</h6>
            <dl>
              <dt>Definition Title</dt>
              <dd>Definition Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.</dd>
            </dl>
          </div>
        </div>

<%= code_example '
<!-- Use .circle or .square to change the style of the bullets -->
<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>

<!-- Ordered lists are great for lists that need order, duh -->
<ol>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
</ol>

<!-- Definition lists are great for small block of copy that describe the header -->
<dl>
  <dt>Definition List</dt>
  <dd>Definition Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.</dd><commit_msg>Update docs with example for ul.no-bullet.<commit_after><% @side_nav = "type" %>
<div class="row">
  <div class="large-9 push-3 columns">

    <% @page_title = "Typography" %>
    <div class="row">
      <div class="large-12 columns">
        <h2><%= @page_title %></h2>
        <h4 class="subheader">Foundation 4 typography is built with ems, making it easier to fine-tune your type across different breakpoints. By default, we include a single breakpoint in typography sizes and styles, but you can add more if you'd like.</h4>

        <p>We're no longer depending on modular scale in the core of Foundation. We made an effort with this release to be dependancy free other than Sass. This way people can use whatever framework and gems they want on top of Foundation. We'll still use <a href="http://compass-style.org">Compass</a>.</p>

        <hr>

      </div>
    </div>


    <div class="row">
      <div class="large-12 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 a small header. h1.</h5>
        <h6>h6. This is a tiny header. h1.</h6>

<%= code_example '
<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 a small header. h1.</h5>
<h6>h6. This is a tiny header. h1.</h6>
', :html %>

        <hr>

        <h1 class="subheader">h1.subheader</h1>
        <h2 class="subheader">h2.subheader</h2>
        <h3 class="subheader">h3.subheader</h3>
        <h4 class="subheader">h4.subheader</h4>
        <h5 class="subheader">h5.subheader</h5>
        <h6 class="subheader">h6.subheader</h6>

<%= code_example '
<h1 class="subheader">h1.subheader</h1>
<h2 class="subheader">h2.subheader</h2>
<h3 class="subheader">h3.subheader</h3>
<h4 class="subheader">h4.subheader</h4>
<h5 class="subheader">h5.subheader</h5>
<h6 class="subheader">h6.subheader</h6>
', :html %>

        <hr>

        <h1>h1. <small>Small segment header.</small></h1>
        <h2>h2. <small>Small segment header.</small></h2>
        <h3>h3. <small>Small segment header.</small></h3>
        <h4>h4. <small>Small segment header.</small></h4>
        <h5>h5. <small>Small segment header.</small></h5>
        <h6>h6. <small>Small segment header.</small></h6>

<%= code_example '
<h1>h1. <small>Small segment header.</small></h1>
<h2>h2. <small>Small segment header.</small></h2>
<h3>h3. <small>Small segment header.</small></h3>
<h4>h4. <small>Small segment header.</small></h4>
<h5>h5. <small>Small segment header.</small></h5>
<h6>h6. <small>Small segment header.</small></h6>
', :html %>


        <hr>

        <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, did you know that there are storms occurring on Jupiter that are larger than the Earth? Pretty cool. Wrap <code>&lt;strong&gt;</code> around type to <strong>make it bold!</strong>. You can also you <code>&lt;em&gt;</code> to <em>italicize your words</em>.</p>

<%= code_example '
<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, did you know that there are storms occurring on Jupiter that are larger than the Earth? Pretty cool. Wrap <strong> around type to <strong>make it bold!</strong>. You can also you <em> to <em>italicize your words</em>.</p>
', :html %>

        <hr>

        <h3>Links</h3>
        <p>Links are very standard, and the <a href="http://www.youtube.com/watch?v=oHg5SJYRHA0">color is preset</a> to the Foundation primary color.</p>

<%= code_example '
<p>Links are very standard, and the <a href="#">color is preset</a> to the Foundation primary color.</p>
', :html %>

        <hr>

        <h3>Lists</h3>
        <p>Lists are helpful for, well, lists of things.</p>

        <div class="row">
          <div class="large-4 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>
          </div>

          <div class="large-4 columns">
            <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>
          </div>

          <div class="large-4 columns">
            <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>

        <div class="row">
          <div class="large-4 columns">
            <h6>ul.no-bullet</h6>
            <ul class="no-bullet">
              <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>
            </ul>
          </div>
          <div class="large-4 columns">
            <h6>Ordered Lists</h6>
            <ol>
              <li>List Item 1</li>
              <li>List Item 2
                <ol>
                  <li>Nested List Item</li>
                  <li>Nested List Item</li>
                  <li>Nested List Item</li>
                </ol>
              </li>
              <li>List Item 3</li>
            </ol>
          </div>
          <div class="large-4 columns">
            <h6>Defition Lists</h6>
            <dl>
              <dt>Definition Title</dt>
              <dd>Definition Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.</dd>
            </dl>
          </div>
        </div>

<%= code_example '
<!-- Use .circle or .square to change the style of the bullets -->
<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>

<!-- Sometimes you don\'t want bullets at all -->
<ul class="no-bullet">
  <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>
</ul>

<!-- Ordered lists are great for lists that need order, duh -->
<ol>
  <li>List Item 1</li>
  <li>List Item 2</li>
  <li>List Item 3</li>
</ol>

<!-- Definition lists are great for small block of copy that describe the header -->
<dl>
  <dt>Definition List</dt>
  <dd>Definition Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nullam id dolor id nibh ultricies vehicula ut id elit.</dd>
{'fraction_non_alphanumeric': 0.14522163738981547, 'fraction_numerical': 0.01921491534022449, 'mean_word_length': 1.9901403109594236, 'pattern_counts': {'":': 0, '<': 662, '<?xml version=': 0, '>': 660, 'https://': 0, 'lorem ipsum': 0, 'www.': 2, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5873942', 'n_tokens_mistral': 5274, 'n_tokens_neox': 5086, 'n_words': 1572}