Visual Guidelines Example

Last updated: August 8, 2012

Quick mockup of what the structure of style guidelines may look like. Included are 4 mockups of the guidelines at work:


Page Frame

Content goes into a vertical-scrolling area that goes up to a width of 1000px. It collapses on smaller screens into 100% width with a padding of 20px below 1000px and a padding of 10px below 500px.

Element Property Usage
#content background Use to set background color or image. Defaults to #fff (white).

For features, set the background to a color or image that complements your lead-image. Use sparingly. Recommended choices: #000, #eee, #f6f6ef.


Title

Holds the title, lede, author, date, and lead-image at the front of article.

Element Property Usage
#title max-width Set width of title area. Defaults to 600px in order to leave room for the sidebar.
h1, h2, #author, #date position, left, top Position elements relative to lead-image. Will need to set position: absolute.
text-align Change alignment to left, right, center.
font Make changes to font attributes: font-family, size, weight, etc.

For panoramic photos, widen the title area between 600px-1000px to make the photos as large as possible, move text elements to the side, and place the title to offset a visual focal point in the photos. You may need to adjust colors to maintain readability.

For small portraits, you may choose to float the image to the right on larger screens.

Titles should not have orphans on the following line. Adjust width and size across all screen sizes. h1 elements can fall between 2.5em-4em, h2 elements can fall between 1em-2em.

Titles, depending on the tone of the article, can be set in Palatino, Minion, Helvetica Neue, Garamond, Optima.


Article Body

All the elements in the main text. This includes titles, paragraphs, blockquotes, images, embedded video, and captions.

Element Property Usage
All elements max-width, margin-left Use to set size and position. All elements default to a width of 600px and a left margin of 0px.
h3, p, blockquote, .caption font Make changes to font attributes: font-family, size, weight, etc.
color Make changes to font colors. Defaults to #000 (black).

Blockquotes should not exceed a height of 600px on large screens, and 300px on small screens. Adjust the font size between 1.2em-1.8em and the width between 15%-30% as needed.

Recommended colors for blockquotes: #000, #E76A8A, #0088D0.


Sidebar

Supplementary content goes into a container to the side. On smaller screens (less than 980px), this container moves to the bottom of the page after the main article.

Element Property Usage
#sidebar border Set border size and border color. Defaults to 1px solid #ddd.
color, background-color Set text color and background color. Defaults to #000 for text and #fff for background.
top, right Change position of sidebar. Defaults to top: 0px and right: 30px.
display Show or hide sidebar. Set to hidden to hide.

For wide title treatments, the sidebar position will have to be adjusted accordingly. Shifting the top position between 0px-900px will work in most cases.


Tailoring Examples

This is the default template: no changes have been made. View


The image-heavy example: View

Lead image is a gorgeous oil painting, so I'm taking it full width. The sidebar is pushed down to fit.


  .example-media #title {
    max-width: 1000px;
  }
  .example-media #sidebar {
    top: 865px;
  }
      

The images of Kessler's house and his sister, Elisabeth, appear at a transition point when the author introduces her life and her influence on Kessler's life. Since the images are of the same proportions, I can double them up on large screens, tying them together into this part.


  @media (min-width:800px) {
    .example-media article .elisabeth, 
    .example-media article .house {
      width: 48%;
      margin-right: 10px;
      float: left;
    }
  }
      

The Munch painting is a very vertical image, so placing it to the right on large screens.


  @media (min-width:800px) {
    .example-media article .munch {
      position: absolute;
      right: 0px;
      width: 30%;
    }
  }
      

I adjust this pullquote treatment in 2 ways: add top border and left padding to provide a pointing line back to the text, and use a soft gray for the pullquote color to suit the tone of the quote.


  @media (min-width:800px) {
    .example-media article .pullquote {
      position: absolute;
      right: 0px;
      max-width: 30%;

      margin: 0px;
      padding: 20px 0 0 70px;
      border-top: 1px solid #ddd;

      font-size: 1.1em;
      color: #aaa;
    }
  }
      

Interactive map visualization. View

This interactive needs lots of space, so I widen the title area, adjust the title size to fit, and hide the sidebar.


  .example-interactive #title {
    max-width: 1000px;
  }
  
  .example-interactive #title h1 {
    font-size: 2.2em;
  }
  .example-interactive #sidebar {
    display: none;
  }
      

Set up the the map visualization (fixed-scroll), and for the images to appear in the same place so they can fade into one another by Javascript.


  .example-interactive #succession-map-viz {
    position: fixed;
    width: 55%;
    max-width: 600px;
    opacity: 0;
  }

  .example-interactive #succession-map-viz #wrapper {
    position: relative;
  }

  .example-interactive #succession-map-viz img {
    width: 100%;
    position: absolute;
  }
      

The links that trigger the images get special styling.


  .example-interactive a.clickable {
    border-bottom: 1px solid #ddd;
    background-color: rgba(254,248,182,0.5);
  }
  
  .example-interactive a.clickable:hover {
    border-bottom: 1px solid #ccc;
    background-color: rgba(254,248,182,1);
    cursor: pointer;
  }
      

Set the article text to the right on larger screens, so that the piece scrolls up and down while the map stays fixed.


  .example-interactive article {
    position: static;
    z-index: 0;
  }
  
  .example-interactive article p {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 0.8em;
    margin-bottom: 10px;
  }
  
  .example-interactive article img {
    margin-bottom: 10px;
  }
  
  .example-interactive article blockquote {
    font-style: italic;
    margin-bottom: 10px;
    padding-left: 10px;
    border-left: 1px solid #ddd;
  }
  
  @media (min-width:800px) {
    .example-interactive article p, 
    .example-interactive article h3,
    .example-interactive article img, 
    .example-interactive article blockquote,  
    .example-interactive article .caption {
      width: 40%;
      margin-left: 62%;
    }
  }
      

The map gets a different treatment on screens below 800px, where the image sticks to the upper half and the text scrolls underneath.


  @media (max-width:800px) {
    .example-interactive #title {
      margin-top: 60%;
    }
    .example-interactive #succession-map-viz {
      width: 100%;
      max-width: 800px;
      left: 0px;
      top: 0px;
    }
    .example-interactive #succession-map-viz img {
      box-shadow: 0px 5px 5px rgba(0,0,0,0.4);
    }
  }
      

This example has a bit more extensive set of enhancements. View

This striking photo has a black background, so I can dial up the impact by setting the page background to #000. I also set the text color to #eee so it shows up on the new background color.


  .example-enhanced {
    color: #eee;
    background-color: #000;
  }
      

Adding special treatment to all the elements on the top. Springsteen is facing the left, so the photo works better with him off to the right, facing into the text.


  .example-enhanced #title {
    text-align: right;
    max-width: 1000px;
  }

  @media (min-width:740px) {
    .example-enhanced #title h1 {
      position: absolute;
      left: 0px;
      top: 250px;
      font-size: 4em;
    }

    .example-enhanced #title #lead-caption {
      margin-top: -130px;
      max-width: 500px;
      text-align: left;
    }
  }
      

Changing the pullquote color to suit the new background color and text color. I also decide to embed the quote and let the text wrap around it, since the element works pretty well in a narrow column. The top and bottom borders help set the quote off.


  .example-enhanced article .pullquote {
      color: #fef8b6;
  }
  @media (min-width:740px) {
    .example-enhanced article .pullquote {
      font-size: 1.8em;
  
      float: left;
      max-width: 230px;
      margin: 15px 30px 15px 0;
      padding: 15px 0px 15px 0px;
  
      border-top: 1px solid #fef8b6;
      border-bottom: 1px solid #fef8b6;
    }
  }
      

A small touch: on screens wider than 1400px, the pullquote is moved to the left to add a bit more dynamism. The extra width emphasizes the repetition found in the quote.


  @media (min-width:1400px) {
    .example-enhanced article .pullquote {
      margin-left: -150px;
      max-width: 350px;
    }
  }