Secondary

The most important aspect of these pages is beautiful spacing and layout. That's why the width is capped at 700px. Below you'll find examples of many of the most common content types.

First of all, use em/rems to space content. For example, we can add 1em to the bottom of h5, h4, and h3 tags. 0.75em is recommended for headings h2 and h1. What about <p>? I find that 2em below works best. 

Here's an h2

Notice how there's more space above this heading than below? That's exactly what we want. Making sure <p> tags only have margin-bottoms is an important component.

Now an h3

See how paragraphs look like they belong to their headings? It's super important!

This is an h4. At this point, we can start to use a lot less margin-bottom.

We don't want smaller headings to float aimlessly. Make sure they're a bit snugger to the content below them (especially if that content is a large heading!)

h5 wants very little margin bottom

Since it's more of a pre-title than a heading.

Here's a tip: if the very first element of the secondary-page div is an image, remove all margin-top. Otherwise it will make the empty space up top feel HUGE. Another tip: add slightly more margin-bottom than margin-top to compensate for the margin-bottom from text elements. This will help the image feel centered. Also, be sure there's a decent amount of margin so the image can breathe. Finally, if the very last element on the page is an image, let's remove the margin-bottom for the same reasons we removed margin-top from the first image.

Lists

  1. Lists are easy. Just make sure the spacing feels good.
  2. See how there's enough space to distinguish lines, but not so much that the list items float apart?
  • Make sure that <ol> and <ul> can stack with enough white space to separate them!
  • If a list item includes a photo, be sure to add some margin-bottom to that image.
  • FYI, multi line lists items should maintain text-indent. In other words, there should be a big old left gutter, and the only thing living in it are numbers/bullets.

 Smaller Images

Make sure images have a max-width of 100% so large pics fill up the space, but also let smaller images exist. And center all images.

We can't let large images get out of hand either. Be sure to set a max height of calc(100vh - 90px) or calc(100vh - [whatever margin-top/bottom you use added together]).  If you haven't figured out by now, images are centered no matter what!