Design Patterns

The top of the page.

Product Headers

Page headings for products use up to four components and should be wrapped in a <header> element. Make sure that the <body> has the .product-page class applied to it.

Logo

The product logo mark is used on Knight Lab software, such as TimelineJS.

Product tagline.

Use <h2 class="intro"> to include a short product tagline.

Call to action

Draw attention to the main thing a user should do.

Handlebars

A partial can be used for handlebars called > header-product it takes:

            
title: Timeline
intro: Easy-to-make, beautiful timelines.
button: Make a Timeline
subnav:
    -
        title: "Overview"
        link: "#overview"
    -
        title: "Examples"
        link: "#examples"
    -
        title: "Make a Timeline"
        link: "#make"
    -
        title: "Help"
        link: "#help"

Timeline JS

Easy-to-make, beautiful timelines.

Make a Timeline

TimelineJS is an open-source tool that enables anyone to build visually rich, interactive timelines. Beginners can create a timeline using nothing more than a Google spreadsheet, like the one we used for the Timeline above. Experts can use their JSON skills to create custom installations, while keeping TimelineJS's core functionality.

Tips & tricks

  1. Keep it short. We recommend not having more than 20 slides for a reader to click through.
  2. Pick stories that have a strong chronological narrative. It does not work well for stories that need to jump around in the timeline.
  3. Write each event as a part of a larger narrative.
  4. Include events that build up to major occurrences — not just the major events.

Media sources

TimelineJS can pull in media from a variety of sources. Twitter, Flickr, YouTube, Vimeo, Vine, Dailymotion, Google Maps, Wikipedia, SoundCloud, Document Cloud and more! 

				
<header class="header-product">
	<h1 class="product-logo product-logo-large">Timeline <span>JS</span></h1>
	<h2 class="intro">Easy-to-make, beautiful timelines.</h2>
	<a class="button button-secondary button-large">Make a Timeline</a>
</header>
<p>
	TimelineJS is an open-source tool that enables anyone to build visually rich, interactive timelines. Beginners can create a timeline using nothing more than a Google spreadsheet, like the one we used for the Timeline above. Experts can use their JSON skills to create custom installations, while keeping TimelineJS's core functionality.
</p>
<h2>Tips &amp; tricks</h2>
<ol>
	<li>Keep it short. We recommend not having more than 20 slides for a reader to click through.</li>
	<li>Pick stories that have a strong chronological narrative. It does not work well for stories that need to jump around in the timeline.</li>
	<li>Write each event as a part of a larger narrative.</li>
	<li>Include events that build up to major occurrences — not just the major events.</li>
</ol>
<h3>Media sources</h3>
<p>
	TimelineJS can pull in media from a variety of sources.
	Twitter, Flickr, YouTube, Vimeo, Vine, Dailymotion, Google Maps, Wikipedia, SoundCloud, Document Cloud and more!
</p>

Story Header

Story headings for stories use up to four components and should be wrapped in a <header> element

Dateline

A <p> with a class of .dateline. Usually used before an story heading to display the date and/or blog category. Outside of story headings, use above <h1>, <h2> or <h3> to provide context.

Hed

Create story headlines with .hed preferably on a <h2> element.

Deck

The short, catchy summary of an article that accompanied a headline is referred to as a dek in old newspaper lingo. In traditional print publications, it does not matter if the dek is super short, just a phrase, a sentence, a blurb or a even a full paragraph, as long as it helps readers get an idea of the story and make a decision about whether they should continue on to read the full article. Create a dek with .deck preferably on a <p> element.

Byline

The author, designated with .byline. If possible, the name should link to the author's personal page.

Profiles | July 20, 2016

The Erdogan Loyalists and the Syrian Refugees

Faced with an influx of new Arab neighbors, a conservative neighborhood in Istanbul struggles with the question of what it means to be a Turk.

by Suzy Hansen

In an old part of Istanbul, in a district named Fatih for the Muslim conqueror, tucked inside ancient Byzantine walls in a neighborhood known as Karagumruk, there is a narrow barbershop with pistachio green and glittery countertops called Golden Scissors. When I visited one evening in late June, during Ramadan, every chair was occupied. The religious holiday this year required 17 straight hours of daily abstinence from eating, drinking, smoking or having sex, so just before breaking fast, at the sunset hour, a happy madness set in. 

				
<header>
	<p class="dateline"><a href="http://www.nytimes.com/2016/07/24/magazine/erdogans-people.html">Profiles</a> | July 20, 2016</p>
	<h2 class="hed">The Erdogan Loyalists and the Syrian Refugees</h2>
	<p class="dek">Faced with an influx of new Arab neighbors, a conservative neighborhood in Istanbul struggles with the question of what it means to be a Turk.</p>
	<p class="byline">by <a href="knightlab.com/nicole-zhu">Suzy Hansen</a></p>
</header>

Image Headers

Page headings for products use up to four components and should be wrapped in a <header> element.

There are several options for how the header displays. .header-image-small will display a smaller vertical height version. .header-image-light will use a light background.

Handlebars

A partial can be used for handlebars called > header-image it takes:

            
title: "Open Lab"
intro: "Community and Events"
image_top_small: "true" //optional
image_top_light: "true" //optional
image_top: "http://knightlab.northwestern.edu/wp-content/uploads/2016/06/front-page-image-v2.jpg"
logo: "assets/logo-openlab.png" //optional

Explore new technology.
Form big ideas.

The Device Lab provides the Northwestern community with a playground to experience and experiment with the new technologies shaping the future of storytelling.

Why? We believe innovation happens only when immersed in a problem. It’s no secret that media continues to evolve —the question is how and where we choose to lead.

The path forward begins with access. The lab welcomes any NU faculty, students, or staff who want to try something new. Over time, those who want to develop more expertise can use the lab as an incubator for creative projects that test the limits of new platforms. 

				
<header class="header-image" style="background-image: url(http://knightlab.northwestern.edu/assets/img/devicelab_wide_2.jpg);">
    <div class="column-4 column-6-tablet column-8-phone grid-item-bottom">
        <img class="logo" src="http://knightlab.northwestern.edu/assets/img/devicelab_logo_stacked_dark.png" />
        <p class="lead text-style-italic text-fontFamily-sansSerif text-align-center text-weight-normal" style="line-height:1.3; font-size:1.3em;">
            Explore new technology. <br>Form big ideas.
        </p>
    </div>
</header>