Super Awesome Pagination

Have you ever wanted to design some beautiful pagination? We do all the time!

In, pagination is generated by kaminari so any kaminari theme will work just fine. The trouble is, if you are starting to code your pagination designs, you will need either to add a lot of items, or, you can create an item that has some sample HTML markup that simulates generated navigation.

To help you out, here is the sample HTML I use to work on my pagination design …

We love the new Google themes and wanted a pagination scheme that worked like the pagination they used on YouTube. In that scheme, each link looks like a button and the current page looks like a depressed button. So here is the scss we used to generate that theme. You will notice that it uses scss and compass which is supported in

All you need now is to replace the existing pagination css file in your account with your new theme.

*Pro tip: deactivate your old pagination file and create a new css file with your new pagination scheme. That way, if things go wrong, you can always re-activate your old css file.

Sample Code

by Craig Sullivan

20 Mar 2012