pagination
January 22, 2015 | 11 Feedbacks

Pagination

A mobile-friendly pagination component, that can be easily customized using CSS or Sass.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera
9+

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).

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:

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).

 

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.

Changelog

Jan 22, 2015
  • Resource released by CodyHouse

Sebastiano Guerriero

UI/UX designer, with a huge passion for Nutella. Co-Founder of CodyHouse. You can follow him on Twitter or Dribbble.

  • Andrew Dotson

    Nice work!

    • gfhfghgfhf

      yeah

  • http://freedesign.in/ Siva

    Awesome!

    • gfhfghgfhf

      ohhh

  • http://www.dreamten.com Philip L

    You guys keep rollin out the hits… this is awesome. Really appreciate what you’re offering for free for the community!!

  • http://maxim-kaminsky.com Максим Каминский

    Look great!

  • http://kaberco.com/ Ali Master

    very nice, thanks

  • Abraham Tugalov

    Where is licensing info? Can i use this in commercial projects? Thanks.

    • http://codyhouse.co Claudia Romano

      Hi Abraham,
      give a look at our Terms page:
      http://codyhouse.co/terms/

      • Abraham Tugalov

        Hey, Claudia.
        Thanks for answer, that is awesome :)

  • Karen Liddy

    Hi these look great but how can i integrate into a mysql recordset? there should be four pages in my recordset. thanks