Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Possible Pagination Example Improvement #5

Closed
janxious opened this Issue · 2 comments

2 participants

@janxious

There doesn't seem to be a way to submit changes or anything to the Pears example site. I was thinking something like this for pagination:

<nav role="page">
    <ul>
        <li class="page-prev"><a href="#">← Prev</a></li>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
        <li class="current">4</li>
        <li class="page-next"><a href="#">Next →</a></li>
    </ul>
</nav>
nav[role=page] ul {
    text-align: center;
    }
nav[role=page] li {
    display: inline;
    margin: 0 4px 0 0;
    }
nav[role=page] a {
    padding: 3px 8px;
    font-size: 14px;
    font-weight: bold;
    border: 1px solid #ddd;
  background: #fff;
    border-radius: 4px;
    }
nav[role=page] a:hover,
nav[role=page] a:focus {
    background: #f0f0f0;
    border-color: #ccc;
    }
nav[role=page] a:active {
    background: #fff;
    border-color: #ddd;
    }
nav[role=page] .current {
    font-weight: bold;
    padding: 3px 3px;
    }
@replete

I think the idea is that we install this wordpress theme on our own server and start our own pattern library. Dan kindly shared it for this purpose.

Also, there isn't a one-true-way of doing markup, but sharing ideas and patterns is great.

By the way, I'm not sure that role=page is being used correctly. I would suggest role=navigation, which is an ARIA landmark.

@janxious

:star2: The more you know!

Cargo culting the role thing got me in trouble. :)

Sounds like this is not the appropriate place to share patterns and such. I do feel like it would be cool to see a curated list like this, maybe with alternative implementations of the same thing.

Thanks for the feedback, @replete.

@janxious janxious closed this
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.