Table of Contents

  1. Introduction
    1. What is Winston?
    2. Download
    3. Why?
    4. Usage
    5. Test suite
    6. Thanks!
  2. Conventions
    1. Commenting
    2. Indentation
    3. Handling the default content problem
    4. On presentational markup
  3. Documentation by module
    1. Module: Layout
      1. Grid based columns
      2. Percentage based columns
      3. Center anything (horizontally)
      4. Center anything (vertically)
    2. Module: Reset
    3. Module: Avatars
    4. Module: General
    5. Module: Typography
    6. Module: Links
    7. Module: Buttons
    8. Module: Simple pagination
    9. Module: Forms

Simple pagination

What is simple pagination, one might ask? Pagination in it's purest form is a previous and a next link or button.

Poor example from a well known CMS

Previous - Next

When you're at the last page, it would look this:

It gets even worse

Previous

This is kind of lame. Any kind of navigation should stay in the same place (and not jump around the website or application). An option can't just dissapear. We need to give the pagination more context: where exactly am I? And why can't I go to the next page now?

Here's my proposal:

Example
  • 1/13
Example
Example

And some example code:

				

					
    
						
						
  • 1/13
    •

You HTML purists might wonder why we wrap the text in three different elements. The reasoning behind this is:

  • <a> is for links
  • <strong> is for your current location
  • <span> is used as a generic inline element to mute the unavailable options

Alternatively one could use the select-element coupled with some javascript to quickly skip to a certain page. However, it is very speculative to assume a user wants to be at some page exactly. Pagination is for browsing long lists of generic items and should by no means be used as a navigation.

Example