Pagination

Pagination

A mobile-friendly pagination component, that can be easily customized using CSS or Sass.

Nucleo icons

Sponsored by Nucleo, a free application to collect, customize and export all your icons as icon font and SVG symbols. Made by the CodyHouse folks!

All the resources available on CodyHouse are released under the BSD-3-Clause license. You can support our project with a Paypal donation 🙌

Pagination links simply allow users to surf through your content. A valid alternative is infinite scrolling, although it has strengths and weaknesses to be aware of.

I know frameworks like Bootstrap let you create a pagination in seconds, however 1) not everybody uses frameworks or can use them for every project and 2) I created a snippet a bit more easy to customize, with a preset of time-saving CSS classes.

Creating the structure

The HTML structure is the same for each pagination example: a <nav> element that wraps an unordered list (.cd-pagination). The list items containing the previous and next links have the .button class. The optional ready-to-use classes have to be applied to the <ul> element (.no-space class in the example below).

<nav role="navigation">
   <ul class="cd-pagination no-space">
      <li class="button"><a href="#0">Prev</a></li>
      <li><a href="#0">1</a></li>
      <li><a href="#0">2</a></li>
      <li><a class="current" href="#0">3</a></li>
      <li><a href="#0">4</a></li>
      <li><span>...</span></li>
      <li><a href="#0">20</a></li>
      <li class="button"><a href="#0">Next</a></li>
   </ul>
</nav> <!-- cd-pagination-wrapper -->

Adding style

The easiest way to modify the "theme" is through Sass, where you can take advantage of variables. Here is the partials > _variables.scss file:

// colors

$color-1: #2E4057; // Pickled Bluewood
$color-2: #64a281; // Aqua Forest
$color-3: #ffffff; // White

// fonts 

$primary-font: 'PT Sans', sans-serif;

// border-radius

$border-radius: .25em;

By changing the color variables, you can create infinite theme variations. If Sass is not your cup of tea, just jump into the style.css file and update the colors from there.

The snippet comes with a set of (optional) classes that change the pagination style. All these classes are applied to the <ul> element. The class .cd-pagination is the one that gives the basic style, therefore it shouldn't be removed.

The easiest way to check what these classes are and do, is to check the source file and the demo that comes with it. Here is an example from the style.css file (class .custom-icons).

/* -------------------------------- 

custom icons - customize the small arrow inside the next and prev buttons 

-------------------------------- */

.cd-pagination.custom-icons .button a {
  position: relative;
}
.cd-pagination.custom-icons .button:first-of-type a {
  padding-left: 2.4em;
}
.cd-pagination.custom-icons .button:last-of-type a {
  padding-right: 2.4em;
}
.cd-pagination.custom-icons .button:first-of-type a::before,
.cd-pagination.custom-icons .button:last-of-type a::after {
  content: '';
  position: absolute;
  display: inline-block;
  /* set size for custom icons */
  width: 16px;
  height: 16px;
  top: 50%;
  /* set margin-top = icon height/2 */
  margin-top: -8px;
  background: transparent url("../img/cd-icon-arrow-1.svg") no-repeat center center;
}
.cd-pagination.custom-icons .button:first-of-type a::before {
  left: .8em;
}
.cd-pagination.custom-icons .button:last-of-type a::after {
  right: .8em;
  transform: rotate(180deg);
}

Just some guidelines:

How to remove the space between inline-block elements

Here's a handy trick! When you set the display of list items to inline-block, because you want to align them horizontally, you'll notice a default margin. Setting margin: 0; won't fix it.

Your options are:

  1. Setting a negative margin for the list items (not a fan of this solution).
  2. Let them float (i.e. float: left; applied to each <li> element); just remember to apply the clearfix hack to the <ul> element or its parent.
  3. Removing the closing </li> tags from the HTML. It may sounds rude, but it's a nice trick to have up your sleeve. You can see it in action in Pagination number 4.
<nav role="navigation">
   <ul class="cd-pagination no-space move-buttons custom-icons">
      <li class="button"><a href="#0">Prev</a>
      <li><a href="#0">1</a>
      <li><a href="#0">2</a>
      <li><a class="current" href="#0">3</a>
      <li><a href="#0">4</a>
      <li><span>...</span>
      <li><a href="#0">20</a>
      <li class="button"><a href="#0">Next</a>
   </ul>
</nav> <!-- cd-pagination-wrapper -->

Join our newsletter

Get our monthly recap with the latest CodyHouse news