<commit_before><div class="row">
  <div class="large-9 push-3 columns">

    <% @page_title = "Pagination" %>
    <div class="row">
      <div class="large-12 columns">
        <h1><%= @page_title %></h1>
        <h4 class="subheader">Moving between pages has become less common with the advent of longer pages and AJAX loading, but it can still be useful for long, repetitive listings or content.</h4>
      </div>
    </div>

    <div class="row">
      <div class="large-12 columns">

        <ul class="pagination">
          <li class="arrow unavailable"><a href="">&laquo;</a></li>
          <li class="current"><a href="">1</a></li>
          <li><a href="">2</a></li>
          <li><a href="">3</a></li>
          <li><a href="">4</a></li>
          <li class="unavailable"><a href="">&hellip;</a></li>
          <li><a href="">12</a></li>
          <li><a href="">13</a></li>
          <li class="arrow"><a href="">&raquo;</a></li>
        </ul>

        <hr>

        <h3>Build With Predefined HTML Classes</h3>
        <p>There are two ways to build pagination in Foundation 4: with our predefined HTML or with our mixin. Building pagination using our predefined classes isn't hard at all. You'll start with an unordered list and add a class of <code>.pagination</code> to it. From there, you just need to add list items with links in them. Those list items have a few options you can use:</p>

        <ul class="disc">
          <li>To create the arrows, make sure you have <code>&lt;li class="arrow"&gt;</code> as your first and last list items.</li>
          <li>To mark the current page, use <code>&lt;li class="current"&gt;</code></li>
          <li>Add a class of <code>.inactive</code> to a list item to make it not clickable, like for the ellipsis in the middle.</li>
          <li>The page numbers and symbols are always inside of an anchor that you'll link to the page.</li>
        </ul>

<%= code_example '
<ul class="pagination">
  <li class="arrow unavailable"><a href="">&laquo;</a></li>
  <li class="current"><a href="">1</a></li>
  <li><a href="">2</a></li>
  <li><a href="">3</a></li>
  <li><a href="">4</a></li>
  <li class="unavailable"><a href="">&hellip;</a></li>
  <li><a href="">12</a></li>
  <li><a href="">13</a></li>
  <li class="arrow"><a href="">&raquo;</a></li>
</ul>', :html %>

        <p>For these styles to come across, make sure you have the default Foundation CSS package or that you've selected pagination from a custom package. These should be linked up following our default <a href="#">HTML page structure</a>.</p>

        <h5>Centered Pagination</h5>
        <p>In some instances, you'll want you pagination to be centered within a container. We've got you covered! Just wrap your unordered list in something that has a defined width and add the class, <code>.pagination-centered</code>.</p>

<%= code_example '
<div class="pagination-centered">
  <ul class="pagination">
    <li class="arrow unavailable"><a href="">&laquo;</a></li>
    <li class="current"><a href="">1</a></li>
    <li><a href="">2</a></li>
    <li><a href="">3</a></li>
    <li><a href="">4</a></li>
    <li class="unavailable"><a href="">&hellip;</a></li>
    <li><a href="">12</a></li>
    <li><a href="">13</a></li>
    <li class="arrow"><a href="">&raquo;</a></li>
  </ul>
</div>', :html %>

        <div class="pagination-centered">
          <ul class="pagination">
            <li class="arrow unavailable"><a href="">&laquo;</a></li>
            <li class="current"><a href="">1</a></li>
            <li><a href="">2</a></li>
            <li><a href="">3</a></li>
            <li><a href="">4</a></li>
            <li class="unavailable"><a href="">&hellip;</a></li>
            <li><a href="">12</a></li>
            <li><a href="">13</a></li>
            <li class="arrow"><a href="">&raquo;</a></li>
          </ul>
        </div>

        <hr>

        <h3>Build with a Mixin</h3>
        <p>We've included SCSS mixins used to style pagination. To use the mixin, you'll need to have the <a href="#extention-install">extension installed</a> or grab <a href="#">_foundation-global.scss</a> and <a href="#">_pagination.scss</a> from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>

<%= code_example '
@import "foundation/foundation-global", "foundation/pagination";
', :css %>

        <p>If you are using the mixins, you may include the styles on whatever class or ID you'd like to the unordered list. The interior classes come with the mixin, just make sure you follow our markup structure:</p>

<%= code_example '
<ul class="your-class-name">
  <li class="arrow unavailable"><a href="">&laquo;</a></li>
  <li class="current"><a href="">1</a></li>
  <li><a href="">2</a></li>
  <li><a href="">3</a></li>
  <li><a href="">4</a></li>
  <li class="unavailable"><a href="">&hellip;</a></li>
  <li><a href="">12</a></li>
  <li><a href="">13</a></li>
  <li class="arrow"><a href="">&raquo;</a></li>
</ul>
', :html %>

        <h5>Quick Mixin</h5>
        <p>You can build your pagination using our global mixin by including it on your own custom class. The mixin contains all the necessary styles for positioning and styling the unordered full list of items, the code looks like this:</p><commit_msg>pagination links<commit_after><div class="row">
  <div class="large-9 push-3 columns">

    <% @page_title = "Pagination" %>
    <div class="row">
      <div class="large-12 columns">
        <h1><%= @page_title %></h1>
        <h4 class="subheader">Moving between pages has become less common with the advent of longer pages and AJAX loading, but it can still be useful for long, repetitive listings or content.</h4>
      </div>
    </div>

    <div class="row">
      <div class="large-12 columns">

        <ul class="pagination">
          <li class="arrow unavailable"><a href="">&laquo;</a></li>
          <li class="current"><a href="">1</a></li>
          <li><a href="">2</a></li>
          <li><a href="">3</a></li>
          <li><a href="">4</a></li>
          <li class="unavailable"><a href="">&hellip;</a></li>
          <li><a href="">12</a></li>
          <li><a href="">13</a></li>
          <li class="arrow"><a href="">&raquo;</a></li>
        </ul>

        <hr>

        <h3>Build With Predefined HTML Classes</h3>
        <p>There are two ways to build pagination in Foundation 4: with our predefined HTML or with our mixin. Building pagination using our predefined classes isn't hard at all. You'll start with an unordered list and add a class of <code>.pagination</code> to it. From there, you just need to add list items with links in them. Those list items have a few options you can use:</p>

        <ul class="disc">
          <li>To create the arrows, make sure you have <code>&lt;li class="arrow"&gt;</code> as your first and last list items.</li>
          <li>To mark the current page, use <code>&lt;li class="current"&gt;</code></li>
          <li>Add a class of <code>.inactive</code> to a list item to make it not clickable, like for the ellipsis in the middle.</li>
          <li>The page numbers and symbols are always inside of an anchor that you'll link to the page.</li>
        </ul>

<%= code_example '
<ul class="pagination">
  <li class="arrow unavailable"><a href="">&laquo;</a></li>
  <li class="current"><a href="">1</a></li>
  <li><a href="">2</a></li>
  <li><a href="">3</a></li>
  <li><a href="">4</a></li>
  <li class="unavailable"><a href="">&hellip;</a></li>
  <li><a href="">12</a></li>
  <li><a href="">13</a></li>
  <li class="arrow"><a href="">&raquo;</a></li>
</ul>', :html %>

        <p>For these styles to come across, make sure you have the default Foundation CSS package or that you've selected pagination from a custom package. These should be linked up following our default <a href="../index.html">HTML page structure</a>.</p>

        <h5>Centered Pagination</h5>
        <p>In some instances, you'll want you pagination to be centered within a container. We've got you covered! Just wrap your unordered list in something that has a defined width and add the class, <code>.pagination-centered</code>.</p>

<%= code_example '
<div class="pagination-centered">
  <ul class="pagination">
    <li class="arrow unavailable"><a href="">&laquo;</a></li>
    <li class="current"><a href="">1</a></li>
    <li><a href="">2</a></li>
    <li><a href="">3</a></li>
    <li><a href="">4</a></li>
    <li class="unavailable"><a href="">&hellip;</a></li>
    <li><a href="">12</a></li>
    <li><a href="">13</a></li>
    <li class="arrow"><a href="">&raquo;</a></li>
  </ul>
</div>', :html %>

        <div class="pagination-centered">
          <ul class="pagination">
            <li class="arrow unavailable"><a href="">&laquo;</a></li>
            <li class="current"><a href="">1</a></li>
            <li><a href="">2</a></li>
            <li><a href="">3</a></li>
            <li><a href="">4</a></li>
            <li class="unavailable"><a href="">&hellip;</a></li>
            <li><a href="">12</a></li>
            <li><a href="">13</a></li>
            <li class="arrow"><a href="">&raquo;</a></li>
          </ul>
        </div>

        <hr>

        <h3>Build with a Mixin</h3>
        <p>We've included SCSS mixins used to style pagination. To use the mixin, you'll need to have the <a href="../sass.html">extension installed</a> or grab <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/_foundation-global.scss">_foundation-global.scss</a> and <a href="https://github.com/zurb/foundation/blob/master/scss/foundation/components/_pagination.scss">_pagination.scss</a> from Github and throw them into a Foundation folder in your project directory. From there, you can import the files at the top of your own SCSS stylesheet, like so:</p>

<%= code_example '
@import "foundation/foundation-global", "foundation/pagination";
', :css %>

        <p>If you are using the mixins, you may include the styles on whatever class or ID you'd like to the unordered list. The interior classes come with the mixin, just make sure you follow our markup structure:</p>

<%= code_example '
<ul class="your-class-name">
  <li class="arrow unavailable"><a href="">&laquo;</a></li>
  <li class="current"><a href="">1</a></li>
  <li><a href="">2</a></li>
  <li><a href="">3</a></li>
  <li><a href="">4</a></li>
  <li class="unavailable"><a href="">&hellip;</a></li>
  <li><a href="">12</a></li>
  <li><a href="">13</a></li>
  <li class="arrow"><a href="">&raquo;</a></li>
</ul>
', :html %>

        <h5>Quick Mixin</h5>
        <p>You can build your pagination using our global mixin by including it on your own custom class. The mixin contains all the necessary styles for positioning and styling the unordered full list of items, the code looks like this:</p>
{'fraction_non_alphanumeric': 0.19797701149425287, 'fraction_numerical': 0.010850574712643678, 'mean_word_length': 3.2236893203883494, 'pattern_counts': {'":': 0, '<': 527, '<?xml version=': 0, '>': 527, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, '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': '2958636', 'n_tokens_mistral': 3651, 'n_tokens_neox': 3439, 'n_words': 1096}