Hello World!

Welcome to the Texas Tribune News Apps Style Guide — a constant work-in-progress.

Base HTML Styles

The basic html styles can be found in in the base_theme file. For full effect, this section of the News Apps Style Guide doesn't have any other styles.

This is an H1

This is an H2

This is an H3

This is an H4

This is an H5
This is an H6

This is a paragraph.

Div.Button

Here are examples of HR tags. The basic HR tag is 2px wide and gray. Add the class "thin" to make it 1px wide and the class "yellow" to make it classic Tribune yellow. It includes 2rem white-space.

Grid Specs

The grid layout files are located in base/scaffold.

To include an element in a responsive grid design, add the class .container to the parent-most element. You can also use "@extend %container" to add an outer-grid to any element that needs it.

Content-Block

Content-blocks are used to ensure that an element does not bump against the edge of the screen on smaller devices or window-sizes. Add the class .content-block to add a 20px left/right margin at all times, or add "@extend %content-block" to the parent-most element's styles.

Masthead

Here is the code for the Masthead that links back to the Tribune homepage.

     
<header class="masthead">
  <div class="container">
<div class="branding">
 <a href="http://www.texastribune.org/">
   <img class="trib-logo" alt="The Texas Tribune" src="//s3.amazonaws.com/apps.texastribune.org/branding/TxTrib-logo-white500x55.png">
 </a>
</div>
  </div>
</header>

Project Header, Lead Art

These styles can be found in theme/lead-banner.scss. To assign the URL for the lead art, go to helpers/variables. The default height of the banner is 225px, and it can also be changed in helpers/variables.

Basic Banner

      
<div class="banner">
 <div class="grand-header-image"></div>
 <header class="grand-header">
  <h1><a href="/">Project Title</a></h1>
  <p>Short descriptive subtitle</p>
 </header>
</div>

Banner with Navigation Buttons

Preferred height for this banner style is 448px. Styles located at layout/headers/banner/nav-bar.

      
<div class="banner">
  <div class="grand-header-image"></div>
  <header class="grand-header">
    <h1><a href="/">Project Title</a></h1>
    <p>Zingy subtitle to hook 'em in</p>
    <!-- Static navigation bar -->
    <div class="wrapper">
      <div id="nav-bar" class="nav-bar">
        <ul>
         <li>
          <a href="">
            <div class="nav-link">
                       Story 1
            </div>
          </a>
         </li>
         <li>
          <a href="">
            <div class="nav-link">
                       Story 2
            </div>
          </a>
         </li>
         <li>
          <a href="">
            <div class="nav-link">
                       Story 3
            </div>
          </a>
         </li>
         <li class="selected">
          <a href="">
            <div class="nav-link">
                       Story 4
            </div>
          </a>
         </li>
        </ul>
      </div>
    </div>
  </header>
</div>
      
    
      
<footer class="footer">
  <div class="container">
    <div class="content-block">
    <nav class="first-nav">
      <ul>
        <li>© 2014 <a href="http://www.texastribune.org/">The Texas Tribune</a></li>
      </ul>
    </nav>
    <nav class="last-nav">
      <ul>
        <li><a href="http://www.texastribune.org/about/">About Us</a></li>
        <li><a href="http://www.texastribune.org/contact/">Contact Us</a></li>
        <li><a href="http://www.texastribune.org/support-us/donors-and-members/">Who Funds Us?</a></li>
        <li><a href="http://www.texastribune.org/terms-of-service/">Terms of Service</a></li>
        <li><a href="http://www.texastribune.org/ethics/">Code of Ethics</a></li>
        <li><a href="http://www.texastribune.org/privacy/">Privacy Policy</a></li>
        <li class="donor-item"><a href="https://www.texastribune.org/join/">Donate</a></li>
      </ul>
    </nav>
    </div>
  </div>
</footer>

News Apps

Don't forget to add FontAwesome to your header! <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"></p>

      
<footer class="footer">
  <div class="footer-container">
    <div>
      <a href="https://twitter.com/newsapps"><img class="logo" src="//s3.amazonaws.com/apps.texastribune.org/branding/TxTrib-NewsApps-yellow.svg" alt="Texas Tribune News Apps logo, links to News Apps' Twitter account"></a>
    </div>
    <div>
      <ul>
        <li><a href="http://www.facebook.com/texastribune"><i class="icon fa-facebook-square"></i>Facebook</a></li>
        <li><a href="http://twitter.com/TexasTribune"><i class="icon fa-twitter-square"></i>Twitter</a></li>
        <li><a href="http://www.youtube.com/user/thetexastribune"><i class="icon fa-youtube-play"></i>YouTube</a></li>
        <li><a href="http://instagram.com/texas_tribune"><i class="icon fa-instagram"></i>Instagram</a></li>
        <li><a href="http://www.linkedin.com/company/texas-tribune"><i class="icon fa-linkedin-square"></i>LinkedIn</a></li>
      </ul>
    </div>
    <div class="internal-links">
      <ul>
      <li><a href="http://www.texastribune.org/about/">About Us</a></li>
      <li><a href="http://www.texastribune.org/support-us/donors-and-members/">Who Funds Us?</a></li>
      <li><a href="http://www.texastribune.org/terms-of-service/">Terms of Service</a></li>
      <li><a href="http://www.texastribune.org/ethics/">Code of Ethics</a></li>
      <li><a href="http://www.texastribune.org/privacy/">Privacy Policy</a></li>
      <li><a href="http://www.texastribune.org/corrections/">Corrections</a></li>
      <li><a href="https://www.texastribune.org/join/" class="donate-link">Donate</a></li>
    </ul>
    </div>
    <div class="donate">
      <ul>
        <li>Nonpartisan.</li>
        <li>Nonprofit.</li>
        <li>Statewide.</li>
        <a href="https://www.texastribune.org/join/"><li>Join Us</li></a>
      </ul>
    </div>
  </div>
</footer>

Prose

The basic prose styles outlined below can be found in theme/prose. The class .prose includes an extension of content-block, and its elements are given a margin to prevent them from bumping up against the edges of small screens. Full-screen media elements should not be contained within a .prose tag.

The majority of this Style Guide is styled with .prose. These paragraphs, for example, are just simple .prose <p> tags. If you want to apply these paragraph settings to an element, and don't want to use a .prose class, you can @extend %prose to a specific element in your stylesheet.

Headline, Byline

Use the <h1> tag in .prose for Headlines, and <p class="byline"> for bylines.

Cat Saves Planet from Apocolypse, Dies in Action

By Captain Planet | July 0, 2084

        
<div class="prose">
  <h1>Headline, Byline</h1>
  <h1>Cat Saves Planet from Apocolypse, Dies in Action</h1>
  <p class="byline">By <a href="http://www.texastribune.org/about/staff/captain-planet/">Captain Planet</a> | July 0, 2084</p>
</div>

Paragraph Headers

That ^ is an example of a .prose h3 paragraph header. Notice it will automatically transform the text to uppercase. You can also use these styles on other elements using @extend %paragraph-header.

        
<h3>Paragraph Headers</h3>

Data Headers

That ^ is an example of a .prose .data-header. It's used for data-related headers, such as legend titles, or for explainer text.

        
<h3 class="data-header">Data Headers</h3>

Captions

Captions for photos and other media elements are styled using prose p.caption. Images within .prose will fill 100% of the available width, unless otherwise specified.

This is a picture of a kitten. 

        
<img src="http://placekitten.com/800/400" style="width: 50%;">
<p class="caption">This is a picture of a kitten. </p>

Lists

  • Are often used to call out important points.
  • They typically begin with an h3 paragraph header.
  • Exciting stuff.
        
<h3>List Header</h3>
<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
</ul>

Block Text

Add a div.block-text around elements that you want to highlight with a yellow border on top and bottom, such as block-quotes or embedded lists.

Use the <h2> tag for block quote quotes, and p.source for the attribution. Also, make sure to use HTML special characters for your quote marks! They won't be styled correctly if you forget. **Warning: The example code below is converting the special characters, so make sure to change it if you copy/paste.**

“You know what’s awesome? Cats. Cats are awesome.”

— Becca Aaronson, cat enthusiast

        
<div class="block-text">
  <h2>“You know what’s awesome? Cats. Cats are awesome.”</h2>
  <p class="source">— Becca Aaronson, cat enthusiast</p>
</div>

Explainer Text

Use the class explainer-text when you're explaining something, such as how to use the Hospitals Explorer or to define a glossary definition.

        
<p class="explainer-text">Text goes here</p>

Components

Social Media

Styles are located in layout/components/social-media. There are a couple of options, most of which require you to include FontAwesome in the header.

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

Share Buttons

      
<div class="row share-row">
  <a target="_blank" title="share on Twitter" href="http://twitter.com/share?text=Check out the Texas Hospitals Explorer and learn more about quality of care at Texas' 377 hospitals&url=http://hospitals.texastribune.org/&hashtags=txhospitals">
    <div class="share-cell first-share">
      <i class="fa fa-twitter"></i> Tweet
    </div>
  </a>
  <a target="_blank" title="share on Facebook" href="http://www.facebook.com/sharer.php?u=http://hospitals.texastribune.org/">
    <div class="share-cell">
      <i class="fa fa-facebook"></i> Recommend
    </div>
  </a>
</div>

Sharelines

For that little sumthin' extra...

You'll need to encode the URLs, which you can easily do on the console using encodeURI('http...');

Sharelines

  • The Politics of Prevention: How Texas lawmakers have changed women's access to care

  • Check out Texas Tribune's series on how state politics have affected women's access to care in Texas

      
<div class="shareline">
  <h3>Sharelines</h3>
  <ul>
    <li>
      <a href="https://twitter.com/home?status=The%20Politics%20of%20Prevention:%20How%20Texas%20lawmakers%20have%20changed%20women's%20access%20to%20care%20http%3A//trib.it/1p0ZgHb" title="share on Twitter" class="social-share" target="_blank">
      <i class="fa fa-twitter"></i>
      </a>
      <a href="http://www.facebook.com/sharer.php?u=http%3A//trib.it/1p0ZgHb" title="share on Facebook" class="social-share" target="_blank">
      <i class="fa fa-facebook"></i>
      </a>
      <p>The Politics of Prevention: How Texas lawmakers have changed women's access to care
      </p>
    </li>
    <li>
      <a href="https://twitter.com/home?status=Check%20out%20@TexasTribune's%20series%20on%20how%20state%20politics%20have%20affected%20women's%20access%20to%20care%20in%20Texas%20http%3A//trib.it/1p0ZgHb" title="share on Twitter" class="social-share" target="_blank">
      <i class="fa fa-twitter"></i>
      </a>
      <a href="http://www.facebook.com/sharer.php?u=http%3A//trib.it/1p0ZgHb" title="share on Facebook" class="social-share" target="_blank">
      <i class="fa fa-facebook"></i>
      </a>
      <p>Check out Texas Tribune's series on how state politics have affected women's access to care in Texas</p>
    </li>
  </ul>
</div>

About, Contributors

Give yourself (and your teammates!) some credit. Styles for the About section are located in layout/components/about.

The .about class includes @extend %prose, %content-block and %paragraph-header. Even though the styles look similar to .prose, don't put your About section in a .prose tag. It also includes two grid mixins: features-layout ($bp-about, 12, 8) to add whitespace on the sides of large screens, and list-grid ($bp-about, 12, 2) to allow two contributors per row on large screens.

ABOUT

The Tribune's intrepid News Apps developers and designers worked for months — through sweat, blood, tears and maniacal laughter — to bring you this amazing style guide. Use it carefully, for our mascot, The Unicorn Head, has been known to stealthily attack people with bad style. Just ask the foam buffalo.

Contributors

Art & Design

        
<div class="about">
  <h3>ABOUT</h3>
  <p class="about-desc">The Tribune's intrepid News Apps developers and designers worked for months — through sweat, blood, tears and maniacal laughter — to bring you this amazing style guide. Use it carefully, for our mascot, The Unicorn Head, has been known to stealthily attack people with bad style. Just ask the foam buffalo.</p>
  <h3>Contributors</h3>
  <ul>
    <li>
      <p class="contributor"><a href="http://www.texastribune.org/about/staff/becca-aaronson/">Becca Aaronson</a></p>
      <p class="handle">News Apps Developer | <a href="https://twitter.com/becca_aa" target="_blank">@becca_aa</a></p>
    </li>
    <li>
      <p class="contributor"><a href="http://www.texastribune.org/about/staff/ryan-murphy/">Ryan Murphy</a></p>
      <p class="handle">News Apps Team Lead | <a href="https://twitter.com/rdmurphy" target="_blank">@rdmurphy</a></p>
    </li>
    <li>
      <p class="contributor"><a href="mailto:mvanetta@texastribune.org">Marcos Vanetta</a></p>
      <p class="handle">Knight/Mozilla Fellow | <a href="https://twitter.com/malev" target="_blank">@malev</a></p>
    </li>
  </ul>
  <h3>Art & Design</h3>
  <ul>
    <li>
      <p class="contributor"><a href="mailto:bhasson@texastribune.org">Ben Hasson</a></p>
      <p class="handle">Web Designer | <a href="https://twitter.com/been_hussln" target="_blank">@been_hussln</a></p>
    </li>
    <li>
      <p class="contributor"><a href="http://www.texastribune.org/about/staff/jacob-villanueva/">Jacob Villanueva</a></p>
      <p class="handle">Art Director | <a href="https://twitter.com/jacovillanueva" target="_blank">@jacovillanueva</a></p>
    </li>
    <li>
      <p class="contributor"><a href="mailto:twiseman@texastribune.org">Todd Wiseman</a></p>
      <p class="handle">Multimedia Producer | <a href="https://twitter.com/wisemeister" target="_blank">@Wisemeister</a></p>
    </li>
  </ul>
</div>

Tables

Table styles are located in layout/components/tables. You must define which header is related to each data point, in order to have headers on Mobile. To do this, set the "data-title" inside the <td> tag, i.e. <td data-title="blank">.

Title One Two
Big Bird A B
Bert C D
Ernie E F 
    
<table>
  <thead>
    <tr>
      <th>Title</th>
      <th>One</th>
      <th>Two</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-title="Title">Big Bird</td>
      <td data-title="One">A</td>
      <td data-title="Two">B</td>
    </tr>
    <tr>
      <td data-title="Title">Bert</td>
      <td data-title="One">C</td>
      <td data-title="Two">D</td>
    </tr>
    <tr>
      <td data-title="Title">Ernie</td>
      <td data-title="One">E</td>
      <td data-title="Two">F</td>
    </tr>
  </tbody>
</table>