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.

      
<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.

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>
  <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.

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.

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.

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.

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.

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.

  • 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>
      
    

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.
First Last - Organization

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.

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>
  <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

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.

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

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.

      
<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>
      
    
  • 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

Horizontal social media group

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>
      
    

Vertical social media group

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.