Section header

Add .section-header to any heading and wrap the content in a span.

section headline

      
<h2 class="section-header">
  <span>Example section heading</span>
</h2>

Add a publication date

Add a publication date to the section header by wrapping the date in a small element after the span.

section headline Published on a date with a time

      
<h2 class="section-header">
  <span>Example section heading</span>
  <small>Example publication date</small>
</h2>

Chapter headings

Use .chapter-head on any heading, but start with h4 and work from there.

H4 chapter heading

H3 chapter heading

H5 chapter heading

      
<h4 class="chapter-head">...<h4>

Bylines

Add a byline class to a div element and give the authors name(s) a class of author. Add the class organization to a pelement to style the author's organization. Add a pub-date class to a p element to style the publication date and time. Bylines on apps projects will have an increased font-size.

By First Last

Chicago Tribune

September 19, 2013

      
<div class="byline">
  <p class="author">By <span>First Last</span></p>
  <p class="organization">Chicago Tribune</p>
  <p class="pub-date">September 19, 2013</p>
</div>

Source and credits

Source: Where did the information come from?

By First Last, First Last and First Last - Chicago Tribune

      
<div class="credits">
    <p>...</p>
    <p>...</p>
</div>

Project credits box

Use a project credits box at the bottom of the page before the footer when bylines from multiple departments should appear. This style of credit box should be reserved for larger projects.

Reporting by First Last and First Last

Photography by First Last and First Last

Graphics by First Last and First Last

Applications and design by First Last and First Last

      
<div class="credits-wrapper">
  <div class="credits-inner">
    <p>Reporting by <span>First Last and First Last</span></p>
    <p>Photography by <span>First Last and First Last</span></p>
    <p>Graphics by <span>First Last and First Last</span></p>
    <p>Applications and design by <span>First Last and First Last</span></p>
  </div>
</div>

Article copy

Place headlines, decks, bylines, and story copy within an article element. Use the class .narrow-river on an articleto limit p elements and all headings h1 through h6 to a max-width of 680px.

Headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam orci sapien, ullamcorper at blandit vitae, viverra sed diam. Sed id neque purus. Suspendisse potenti. Donec pretium, nunc quis cursus euismod, nibh lectus luctus sapien, vitae viverra tellus est eget enim. Nulla eu porttitor nulla. Maecenas sed dui et elit commodo interdum. Aliquam consequat ipsum ac lacus venenatis at tincidunt nunc aliquam.

        
<article class="narrow-river">
  <h1>...</h1>
  <p>...</p>
</article>

Drop caps

A drop cap can be used at a start of a section or chapter by including .drop-cap on a p element.

      
<article>
  <h1>...</h1>
  <p class="drop-cap">
    ...
  </p> 
</article>

Story intro

Add .lead to a p element to increase font-size for paragraphs and drop caps.

Aliquam ac augue ac nisi ullamcorper vehicula vel eget tellus. Proin venenatis ullamcorper magna, eget rutrum nunc imperdiet nec. Donec et leo mauris. Pellentesque risus felis, mollis id facilisis at, sollicitudin sit amet augue. Phasellus lobortis ullamcorper odio, eget pharetra neque dictum eget. Morbi dignissim dictum posuere. Aliquam erat volutpat. Nam at massa turpis, et aliquet urna.

      
<article>
  <h1>...</h1>
  <p class="drop-cap lead">
    ...
  </p> 
</article>

Breakout/bullet lists within the narrative

To separate sections of the narrative that are lists or bullets, wrap p element(s) in a div with a .left-rule class.

Nunc diam lectus. molestie sit amet ultricies sed, molestie ac quam.

Sed et aliquam eros. Etiam non urna in lorem vehicula interdum eu ac erat.

Sed mauris massa. elementum sit amet imperdiet non, suscipit id magna.

Pellentesque habitant morbi. tristique senectus et netus et malesuada fames ac turpis egestas.

Duis scelerisque, felis in pretium sollicitudin, ligula nibh gravida odio, sit amet pretium lorem justo in lorem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam non magna metus. Sed auctor tristique condimentum. Ut non elit eget tellus vestibulum mattis.

      
<article>
  <p></p>
  <div class="left-rule">
    <p></p>
  </div>
  <p></p> 
</article>

Bullet lists

For bullet lists, simply use the standard ul and li elements.

Nunc diam lectus. molestie sit amet ultricies sed, molestie ac quam.
Sed et aliquam eros. Etiam non urna in lorem vehicula interdum eu ac erat.
Sed mauris massa. elementum sit amet imperdiet non, suscipit id magna.
Pellentesque habitant morbi. tristique senectus et netus et malesuada fames ac turpis egestas.

      
<article>
  <p></p>
  <div class="left-rule">
    <p></p>
  </div>
  <p></p> 
</article>

Notched media

To notch related media items into the main narrative, use div.media-holder to contain each item's figure. The story's p elements and .media-holder content should be within an article with a class of .narrow-river.

Morbi iaculis erat egestas turpis rhoncus pharetra. Suspendisse potenti. Nunc bibendum fringilla mi, sed suscipit mi feugiat a. Vestibulum tincidunt congue ornare. Proin sit amet mi nunc. Quisque tellus quam, faucibus vitae sagittis sit amet, consequat ut quam. Vestibulum sodales lacus in ligula aliquet congue. Ut dictum, enim at consectetur ullamcorper, tellus leo convallis odio, ut tempor sem nisi at ante.

This is a caption. Morbi iaculis erat egestas turpis rhoncus pharetra.

      
<article>
  <h1>...</h1>
  <p class="byline">...</p>
    <p></p>
    <div class="media-holder">
      <figure class="small-photo">
        <img src="...">
        <figcaption>...</figcaption>
        <figcaption class="media-credit">...</figcaption>
      </figure>
    </div>
    <p>...</p>
</article>

Edge-to-edge images

To display an image the full width of the page, use the .wide-photo class on a figure element. You will need to include the picturefill JavaScript library in your page's footer. This will allow the page to load smaller images on mobile devices.

There are several image sources specified in the code below. The first is the image that is loaded on small screens. The second is the default large image, with a data-media attribute allowing a min-width to be set. Any screen over the specified min-width will load this image. The third image, surrounded by noscript tags, is the image that will load when JavaScript is disabled.

Headline

This is a caption. Morbi iaculis erat egestas turpis rhoncus pharetra.

      
<figure class="wide-photo">
  <span data-picture>
    <span data-src="http://fillmurray.com/g/620/450"></span>
    <span data-src="http://fillmurray.com/g/1148/651" data-media="(min-width: 600px)">
</span>
    <noscript>
      <img src="http://fillmurray.com/g/1148/651"/>
    </noscript>
  </span>
  <figcaption>This is a caption. Morbi iaculis erat egestas turpis rhoncus pharetra.</figcaption>
</figure>

Wrap the embedded video with .video-wrapper to apply a responsive container to the video. To adjust aspect ratio, increase or decrease the padding-bottom applied to the video's containing iframe, object or embed. By default, the wrapper will fit a video with an aspect ratio of 16:9. Use the class .four-three for video with an aspect ratio of 4:3.

For video with a custom aspect ratio, you'll need to calculate the amount of padding to apply to the bottom. Turn the ratio into a fraction and divide the numerator by the denominator and set padding-bottom to the resulting percentage. For instance, for the 4:3 aspect ratio, divide 4 by 3 and set padding-bottom: 75%.

      
<div class="video-wrapper">
  <iframe>...</iframe>
</div>

Photo, caption, credit layout

A figure element with an img, a caption figcaption and a credit line .media-credit. Photos are available in three sizes, outlined below.

`.small-photo`

320 x 200

      
<figure class="small-photo">
...
</figure>

`.medium-photo`

500 x 325

      
<figure class="medium-photo">
  ...
</figure>

`.large-photo`

620 x 450

      
<figure class="large-photo">
  ...
</figure>

The `figure` element

Not just for photos and videos, figure elements will apply top and bottom rules to any self-contained content.

This is media content

      
<figure>
  <h4>...</h4>
</figure>

Pull quotes

Use blockquote tags to denote pull quotes.

This is a pull quote. Morbi iaculis erat egestas turpis rhoncus pharetra.
First Name Last Name, Title and Organization

      
<blockquote>
  <p>...<p>
  <small>...<small>
</blockquote>

Sidebars and other related content

Use aside for content that is related to the main article, such as a sidebar. This will display notched in the article. The .subhead class can be used for additional description of the sidebar copy block.

      
<aside>
  <h3>Related headline<h3>
  <p class="subhead">Optional subject description sublabel</p>
  <p>This is information ...</p>
  <p class="text-right"><a href="#" class="media-link digital-plus-icon">THIS LINK GOES ELSEWHERE</a></p>
</aside>

For a list of related headlines, apply a .nav-related class to a ul element.

      
<ul class="nav nav-related">
  <li><a href="">...</a></li>
  <li><a href="">...</a></li>
  <li><a href="">...</a></li>
  <li><a href="">...</a></li>
  <li><a href="">...</a></li>
</ul>

Add a descriptions and image

      
<ul class="nav nav-related">
  <li>
    <a href="">
      Related content
      <p>Content description</p>
      <img src="..." />
    </a>
  </li>
  <li><a href="..."></a></li>
</ul>

Standalone links

Add the .media-link class to a a element to apply the link styles.

This link goes elsewhere

      
<a href="..." class="media-link">...</a>

When linking to a gallery from an image caption, use the language "See more of [topic]."

SEE MORE OF THE HELLO KITTY HOTEL

      
<a href="..." class="media-link">...</a>

Digital Plus icon

If the content is part of Digital Plus, use the digital-plus-icon class to add the plus icon to the end of the link.

This link goes elsewhere

      
<a href="..." class="media-link digital-plus-icon">...</a>

nguxicon-edit
nguxicon-pintrest
nguxicon-comment
nguxicon-refresh
nguxicon-back
nguxicon-facebook
nguxicon-gplus
nguxicon-linkedin
nguxicon-gear
nguxicon-check
nguxicon-link
nguxicon-mail
nguxicon-starburst
nguxicon-print
nguxicon-plusone
nguxicon-rss
nguxicon-share
nguxicon-twitter
nguxicon-stumble
nguxicon-user
nguxicon-flag
nguxicon-grid
nguxicon-linkout
nguxicon-fullscreen
nguxicon-video
nguxicon-gallery
nguxicon-file
nguxicon-broadcast
nguxicon-camera
nguxicon-reddit
nguxicon-digg
nguxicon-menu
nguxicon-lock
nguxicon-bull
nguxicon-chevron-left
nguxicon-chevron-right
nguxicon-chevron-med-left
nguxicon-chevron-med-right
nguxicon-chevron-hair-left
nguxicon-chevron-hair-right
nguxicon-left
nguxicon-right
nguxicon-up
nguxicon-down
nguxicon-search
nguxicon-search-med
nguxicon-search-hair
nguxicon-close
nguxicon-close-med
nguxicon-close-hair
nguxicon-triangle-down
nguxicon-triangle-up
nguxicon-triangle-left
nguxicon-triangle-right
nguxicon-thumbs-up
nguxicon-thumbs-down
nguxicon-circle-left
nguxicon-circle-right

First, make sure Font Awesome is included in your project by adding a link in the head to //cdnjs.cloudflare.com/ajax/libs/font-awesome/3.0.2/css/font-awesome.min.css. (Font Awesome is included by default with the base Tribune template.) Put a ul within a div with class .social-wrapper. Use a small element for the buttons label and .text-center on the wrapping div to center the label and buttons.

      
<div class="social-wrapper text-center">
  <small>...</small>
  <ul>
    <li>
      <a target="_blank" href="">
        <i class="icon-twitter-sign"></i><span class="hidden">Twitter</span>
      </a>  
    </li>
    <li>
      <a target="_blank" href="">
        <i class="icon-facebook-sign"></i><span class="hidden">Facebook</span>
      </a>  
    </li>
    <li>
      <a target="_blank" href="">
        <i class="icon-google-plus-sign"></i><span class="hidden">Google+</span>
      </a>  
    </li>
    <li>
      <a target="_blank" href="">
        <i class="icon-pinterest-sign"></i><span class="hidden">Pinterest</span>
      </a>  
    </li>
  </ul>
</div>

Add .social-wrapper-vertical to the wrapping div to align the buttons vertically and center the text. Shorten the label to "Share" so it fits neatly above the buttons.

      
<div class="social-wrapper social-wrapper-vertical">
  <small>...</small>
  <ul>
    <li>
      <a target="_blank" href="">
        <i class="icon-twitter-sign"></i><span class="hidden">Twitter</span>
      </a>  
    </li>
    <li>
      <a target="_blank" href="">
        <i class="icon-facebook-sign"></i><span class="hidden">Facebook</span>
      </a>  
    </li>
    <li>
      <a target="_blank" href="">
        <i class="icon-google-plus-sign"></i><span class="hidden">Google+</span>
      </a>  
    </li>
    <li>
      <a target="_blank" href="">
        <i class="icon-pinterest-sign"></i><span class="hidden">Pinterest</span>
      </a>  
    </li>
  </ul>
</div>

NGUX blues and grays

#0D1123	Darkest blue
#12182D	Darker blue
#17274A	Dark blue
#0D3058	Trib Blue
#144A7C	Light blue
#549ac4	Lighter blue
#C7D9E9	Lightest blue

#1A1A1A	Black
#2b2b2b	Darker Gray
#333333	Dark Gray
#666666	Gray
#999999	Light Gray
#D0D0D0	Lighter Gray
#EEEEEE	Very Light Gray
#fbfcfc	White

For information

Use these color ramps for displaying/keying data or other information

Blues

#144a7c	Dark Blue
#549ac4	Blue
#C7D9E9	Light Blue

Greens

#285014	Dark Green
#347235	Green
#8BB381	Light Green

Reds

#8c001a	Dark red
#c11b17	Red
#E8adaa	Light Red

Other

#eac117	Yellow
#ffdb58	Light Yellow
#7E587E	Purple

Starting a Chicago Tribune Tarbell project

Comprehensive documentation for Tarbell, including a getting-started tutorial, is available here. This section will outline what you need to know that's specific to the Chicago Tribune, but it's a good idea to familiarize yourself with the above documentation if you haven't already.

Begin by installing Tarbell, as outlined here. For most users, it's as simple as running pip install tarbell. Once Tarbell is installed, install the Tribune Tarbell templates: tarbell install-template https://github.com/newsapps/tarbell-template.git. Finally, to create the project itself, run tarbell newproject and follow the prompts, as described in more detail here.

Most of the process involved in setting up a Chicago Tribune Tarbell project is exactly the same as a normal Tarbell project, with only a few key differences:

Publishing location: You still want to publish to S3, but the buckets to use depend on the specific project. For most projects, apps.beta.tribapps.com is the staging bucket, and apps.chicagotribune.com is the production bucket, but this varies widely from project to project. Read more about setting up your S3 buckets here.
Templates: When running the newproject command, you almost certainly want to use the Tribune templates, as described in more detail in the next section. They should have been installed when you ran tarbell install-template https://github.com/newsapps/tarbell-template.git above.

Style Guide

Headings

Section header

section headline

Add a publication date

section headline Published on a date with a time

Chapter headings

H4 chapter heading

H3 chapter heading

H5 chapter heading

Bylines, credits and sourcing

Bylines

Source and credits

Project credits box

Body copy

Article copy

Headline

Drop caps

Story intro

Breakout/bullet lists within the narrative

Bullet lists

Layout of stories and media

Notched media

Edge-to-edge images

Headline

Responsive video container

Iconography

Colors

NGUX blues and grays

For information

Blues

Greens

Reds

Other

Tarbell

Style Guide

Headings

Section header

section headline

Add a publication date

section headline Published on a date with a time

Chapter headings

H4 chapter heading

H3 chapter heading

H5 chapter heading

Bylines, credits and sourcing

Bylines

Source and credits

Project credits box

Body copy

Article copy

Headline

Drop caps

Story intro

Breakout/bullet lists within the narrative

Bullet lists

Layout of stories and media

Notched media

Edge-to-edge images

Headline

Responsive video container

Related items

Photo, caption, credit layout

.small-photo

.medium-photo

.large-photo

The figure element

This is media content

Pull quotes

Sidebars and other related content

Related headlines

Add a descriptions and image

Standalone links

Digital Plus icon

Iconography

Social media buttons

Horizontal social media group

Vertical social media group

Colors

NGUX blues and grays

For information

Blues

Greens

Reds

Other

Tarbell

`.small-photo`

`.medium-photo`

`.large-photo`

The `figure` element