We have a bit of a Photoshop mockup to work from here as we continue building the template for the individual gallery page.

First up, we styled the Next and Previous links. They are in absolutely positioned box in the gallery bar, so that we could center them on the page despite the other buttons and stuff already in the bar. They take on the same class as the Submit One button so there is constancy there.

Next up we have this very slim left column in which to get text. We start out with a 1/8 7/8 grid, but 1/8 is just a little too slim. We change it to 1/4 3/4 but that's too much. So like the fabled baby bear, 1/6 5/6 was just right.

We do some typography work in that narrow column, adding in the title (in an <h1> tag of course, since it's the most important title on the page), the description, and other sections. Most of the typography just falls into place based on our simple and sturdy typography setup.

The 5/6 grid is all for the image. Nice and big, which is great. It has a light gray background, just like how images have in blog posts (e.g. <figure>).

We think about getting a little fancy with how we style the tags. We look around on CodePen (here's a link to the "tags" tag, META ALERT). We end up thinking that's overkill and leave them as normal links.

We make the "full size" button work in one of the simplest ways we possibly can, open a new window that is the dimensions of the full size image and showing the image in it. It's like a modal box from the early 2000's! But I like it. It's simple, it doesn't need a bunch of code (like a lightbox would), and it's obvious to interact with. It's even better, if you ask me.


  1. User Avatar
    Josh Eaton
    Permalink to comment#

    Chris, in your final code, and in some of the subsequent videos, I see a .gridswitch class, and it’s only used on the grid for the Gallery Single Screenshot template single-screenshot.php.

    Could you explain what you use that class for?

    • User Avatar
      Chris Coyier
      Permalink to comment#

      All that class does is float the columns to the right instead of the left (and adjust padding accordingly). I think the reason it was there is because I was toying around with putting the information column on those single gallery pages on the right instead of the left. By switching the grid around, that means I could still put the information column (that contains the header and description and stuff) FIRST in the source order, where it should be.

Leave a Comment

Posting Code!

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.