Building the Developer Pages: Consistent Styling #3

In the previous post, we redesigned the Overview page. Today, we’ll be tackling the Issues page:

Does the mockup look familiar? If you notice, the structure and the styling between the list in the mockup and the list in the Overview page are pretty much the same:

So having to share the same markup and styles is the way to go here, and to do that we’d have to make the styles reusable. It’s currently mangled in there with the Overview styles, and getting it out of there is the first thing that we have to do. Extracting all the relevant styles for the list, we end up with this:

Now that we got that out of the way, let’s clean up the markup in the Issues page and apply this style.

It looks like we’re close to being done, but we’re not quite there yet. We still have to add back the filtering and add the repository badges on the left of each item.

The repository badges that you see on the left of each <li> element can be added using the :before pseudo-element.

Here’s where Sass shines yet again — we can use the `each` directive to iterate through our list of repositories and have it create the CSS that we need for this to work:

After adding the repo names, all we need to do is to add list filtering. We’ve been dealing with CSS and markup in the past, but now we need to actually write some JS code!

First we add some of the filter buttons and some metadata so that we know:

1. What to do when the filter button is clicked.
2. Which items its allowed to filter out.

We add some styling too, of course:

And then we add the actual functionality. Filtering lists should be as simple as hiding the <li> elements that we don’t need:

And finally, we have the completed page!