CSS: Documentation

Global CSS settings, design patterns and how our CSS grid system works.

We use a CSS and JavaScript framework for Knight Lab web pages, apps and projects. It is a flexbox based design system. This page itself is built with Orangeline. To use Orangeline in your project, simply include the below links in your project. See the rest of this guide for proper usage of the included components.

Sections

Section Color

Sections that have a different background than the previous section make the page more scannable and can help give a sense of content clarity.

h2's should always be used for section titles. Sections are styled expecting an h2 for proper padding.

Make sure to put a container class inside of the section so that the color fills the width of the screen.

Section Title

This section uses the color-complement color.

Section Title

First paragraph of a section.

				
<section class="section-color section-color-complement">
    <h2>Section Title</h2>
    <p>First paragraph of a section.</p>
</section>

<section class="section-color">
    <h2>Section Title</h2>
    <p>First paragraph of a section.</p>
</section>

Typography

Editorial Headlines

See a blog post page for an example of how to use each heading.

h1. Used for the title of the article.

h2. Used for section breaks within articles.

h3. Used for calls to action.

h4. Used for smaller subheads.

h5. Heading 5

h6. Heading 6

				
<h1>h1. Used on the homepage, no more than two lines long.</h1>
<h2>h2. Used for section breaks within articles. </h2>
<h2 class="intro">h2.intro Catchy intro that's less than ten words.</h2>
<h3>h3. Used for calls to action.</h3>
<h4>h4. Used for smaller subheads.</h4>
<h5>h5. Heading 5</h5>
<h6>h6. Heading 6</h6>

Product Headlines

See the Soundcite project page for an example of how to use each heading.

Use h2.intro in conjunction with the logo mark for project taglines.

h1. Used on the homepage, no more than two lines long.

h2. Used for section titles.

h2.intro Catchy intro that's less than ten words.

h3. Subsection titles.

h4. Typically used for items that have titles within a section.

h5. Heading 5

h6. Heading 6

				
<h1>h1. Used on the homepage, no more than two lines long.</h1>
<h2>h2. Used for section titles. </h2>
<h2 class="intro">h2.intro Catchy intro that's less than ten words.</h2>
<h3>h3. Subsection titles.</h3>
<h4>h4. Typically used for items that have titles within a section.</h4>
<h5>h5. Heading 5</h5>
<h6>h6. Heading 6</h6>

Paragraphs

Orangeline calculates font sizes, margins, padding and other attributes in rems, or root ems. By default, Orangeline defines 1 rem as 18px. All attributes calculated as rems are derived from this 18px base size. Media queries change the base body text size and, by relation, all other sizes of everything sized rems. (This includes not only font sizes, but padding and margin as well.)

Lead paragraphs are used as introductions to projects or other large pages. Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum.

Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.

				
<p class="lead">Lead paragraphs are used as introductions to projects or other large pages.</p>
<p>By default, body text (like this) is 18px. This 16px base size is what all font sizes are calculated from.</p>

Lists

Unordered Lists

Bullet points.

This is an unordered list.
Use it for bullet points in a story. Use it for bullet points in a story. Use it for bullet points in a story.
This is still an unordered list.
Lists can be nested
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at

				
<ul>
    <li>This is an unordered list.</li>
    <li>Use it for bullet points in a story.</li>
    <li>This is still an unordered list.</li>
    <li>
        Lists can be nested
        <ul>
            <li>Phasellus iaculis neque</li>
            <li>Purus sodales ultricies</li>
            <li>Vestibulum laoreet porttitor sem</li>
            <li>Ac tristique libero volutpat at</li>
        </ul>
    </li>
</ul>

Ordered Lists

For use when there are numbered sets or a numbered hierarchy.

This is an ordered list.
Use it for steps in a process. Use it for steps in a process. Use it for steps in a process.
Useful for top 10, etc.
Lists can be nested
- Phasellus iaculis neque
- Purus sodales ultricies
- Vestibulum laoreet porttitor sem
- Ac tristique libero volutpat at
1. Phasellus iaculis neque
2. Purus sodales ultricies
3. Vestibulum laoreet porttitor sem
4. Ac tristique libero volutpat at
Useful for top 10, etc.
Useful for top 10, etc.

				
<ol>
    <li>This is an ordered list.</li>
    <li>Use it for steps in a process.</li>
    <li>Useful for top 10, etc.</li>
</ol>

Definition Lists

A description list, with terms and descriptions.

Coffee: Black hot drink
Milk: White cold drink

				
<dl>
    <dt>Coffee</dt>
    <dd>Black hot drink</dd>
    <dt>Milk</dt>
    <dd>White cold drink</dd>
</dl>

Horizontal Definition List

Make terms and descriptions in <dl> line up side-by-side. Starts off stacked like default <dl>s, but when the navbar expands, so do these.

Coffee: Black hot drink
Milk: White cold drink

				
<dl class="dl-horizontal">
    <dt>Coffee</dt>
    <dd>Black hot drink</dd>
    <dt>Milk</dt>
    <dd>White cold drink</dd>
</dl>

Quotes

Quotes come in two varieties: the inline quote (q)and the blockquote.

Inline Quote

Journalists love learning and sharing, wrote Michelle Minkoff in a blog post about why she develops in a newsroom.

                
<p>
    <q cite="http://michelleminkoff.com/2013/07/17/why-i-develop-in-the-newsroom/">Journalists love learning and sharing,</q> wrote Michelle Minkoff in a blog post about why she develops in a newsroom.
</p>

Blockquote

Journalists love learning and sharing. While, yes, there is a certain extent of sitting quietly and writing at one’s desk, there’s also a lot of fervent collaboration. No detail is too small to merit a second (or hundredth) glance. When you get excited over an intricate problem you solved, you’ll have people to share it with. And you’ll hear interesting stories from them.
Michelle Minkoff

                
<blockquote cite="http://michelleminkoff.com/2013/07/17/why-i-develop-in-the-newsroom/">
    <p>
        Journalists love learning and sharing. While, yes, there is a certain extent of sitting quietly and writing at one’s desk, there’s also a lot of fervent collaboration. No detail is too small to merit a second (or hundredth) glance. When you get excited over an intricate problem you solved, you’ll have people to share it with. And you’ll hear interesting stories from them.
    </p>
    <cite>Michelle Minkoff</cite>
</blockquote>

Blockquote Extend

Draw attention to blockquotes in an article by applying the .breakout class to them so they break out of the margins of the article.

Before we can discuss accessibility in conversational interfaces, however, it’s important to note where these interfaces excel, especially in comparison to graphical interfaces. Conversational interfaces are very good for doing one thing at a time when you know what you want. It would be difficult for a bot to do something like help you compiling research before writing an article because that typically requires a lot of browsing, listing of multiple sources at once, and cross-referencing between sources. But if you want to book a flight to London for next Tuesday or know who won the primary in your state, however, that’s something a bot could handle gracefully. Like in a real conversation, you ask someone a question, the person you’re talking to responds with an answer, and the two of you may deliberate or go back and forth before you arrive at a mutual answer.

Journalists love learning and sharing. While, yes, there is a certain extent of sitting quietly and writing at one’s desk, there’s also a lot of fervent collaboration. No detail is too small to merit a second (or hundredth) glance. When you get excited over an intricate problem you solved, you’ll have people to share it with. And you’ll hear interesting stories from them.
Michelle Minkoff

Where conversational interfaces really shine, however, and the reason these interfaces have been utilized so much by bots and are so closely related to the field of artificial intelligence, is that If you asked a human being for a recommendation for a place to eat next week, there are a number of facts that would make it easier for a person to answer: where you were, what kinds of food you liked, any allergies you had, how much like to spend, etc.

                
<blockquote class="blockquote-extend" cite="http://michelleminkoff.com/2013/07/17/why-i-develop-in-the-newsroom/">
    <p>
        Journalists love learning and sharing. While, yes, there is a certain extent of sitting quietly and writing at one’s desk, there’s also a lot of fervent collaboration. No detail is too small to merit a second (or hundredth) glance. When you get excited over an intricate problem you solved, you’ll have people to share it with. And you’ll hear interesting stories from them.
    </p>
    <cite>Michelle Minkoff</cite>
</blockquote>

Pullquote

Available in .pullquote for floating right and .pullquote--left for floating left.

Perhaps the most attractive means of communicating with computers, at least at first glance, is by natural language.
Human-Computer Interaction

Before we can discuss accessibility in conversational interfaces, however, it’s important to note where these interfaces excel, especially in comparison to graphical interfaces. Conversational interfaces are very good for doing one thing at a time when you know what you want. It would be difficult for a bot to do something like help you compiling research before writing an article because that typically requires a lot of browsing, listing of multiple sources at once, and cross-referencing between sources. But if you want to book a flight to London for next Tuesday or know who won the primary in your state, however, that’s something a bot could handle gracefully. Like in a real conversation, you ask someone a question, the person you’re talking to responds with an answer, and the two of you may deliberate or go back and forth before you arrive at a mutual answer.

You can get better, more helpful answers the more your bot knows about you and the context of your request.
Human-Computer Interaction

Where conversational interfaces really shine, however, and the reason these interfaces have been utilized so much by bots and are so closely related to the field of artificial intelligence, is that If you asked a human being for a recommendation for a place to eat next week, there are a number of facts that would make it easier for a person to answer: where you were, what kinds of food you liked, any allergies you had, how much like to spend, etc.

Matty Mariansky, co-founder and product designer at Meekan, a Slack bot that schedules meetings across teams, describes the ideal bot as being a search engine that gives you one result.

                
<blockquote class="pullquote" cite="http://michelleminkoff.com/2013/07/17/why-i-develop-in-the-newsroom/">
    <p>	
        Journalists love learning and sharing. While, yes, there is a certain extent of sitting quietly and writing at one’s desk, there’s also a lot of fervent collaboration. No detail is too small to merit a second (or hundredth) glance. When you get excited over an intricate problem you solved, you’ll have people to share it with. And you’ll hear interesting stories from them.
    </p>
    <cite>Michelle Minkoff</cite>
</blockquote>
<blockquote class="pullquote--left" cite="http://michelleminkoff.com/2013/07/17/why-i-develop-in-the-newsroom/">
    <p>	
        Journalists love learning and sharing. While, yes, there is a certain extent of sitting quietly and writing at one’s desk, there’s also a lot of fervent collaboration. No detail is too small to merit a second (or hundredth) glance. When you get excited over an intricate problem you solved, you’ll have people to share it with. And you’ll hear interesting stories from them.
    </p>
    <cite>Michelle Minkoff</cite>
</blockquote>

Bold

For emphasizing a snippet of text with a heavier font-weight.

Normal text leading into text rendered as bold text.

				
<strong>rendered as bold text</strong>

Italic

For emphasizing a snippet of text with italics.

Normal text leading into text rendered as italicized text.

				
<em>rendered as italicized text</em>

Truncate

Use truncate to truncate text (requires setting a width).

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.

				
<p class="truncate" style="width:300px">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.</p>

Small

For de-emphasizing inline or blocks of text, use the <small> tag to set text at 85% the size of the parent. You can also apply the .small class to have the same effect.

This is normal size text to help show the comparison to a smaller line of text. This is normal size text to help show the comparison to a smaller line of text. This is normal size text to help show the comparison to a smaller line of text. This is normal size text to help show the comparison to a smaller line of text. This is normal size text to help show the comparison to a smaller line of text.

This line of text is meant to be treated as fine print. This line of text is meant to be treated as fine print. This line of text is meant to be treated as fine print. This line of text is meant to be treated as fine print. This line of text is meant to be treated as fine print. This line of text is meant to be treated as fine print.

				
<small>This line of text is meant to be treated as fine print.</small>
<p class="small">This line of text is meant to be treated as fine print.</p>

Highlight

For highlighting a run of text due to its relevance in another context, use the <mark> tag.

You can use the mark tag to highlight text.

				
<p>
    You can use the mark tag to <mark>highlight</mark> text.
</p>

Deleted

For indicating blocks of text that have been deleted use the <del> tag.

~~This line of text is meant to be treated as deleted text.~~

				
<p>
    <del>This line of text is meant to be treated as deleted text.</del>
</p>

Links

For providing links to other webpages. You can use .no-link-style for using normal styled links.

Here's an example of a link that goes to the Knight Lab homepage. Here's one without normal link style Knight Lab homepage.

				
<p>
	Here's an example of a link that goes to the <a href = "https://knightlab.northwestern.edu/">Knight Lab homepage</a>.
</p>

Editor's Note

Mostly used on the blog. Note that the words "Editor's Note:" are prepended to the content.

Occasionally we’ll do a Q&A with an impressive maker or strategist from media and its fringes. Each person brings a unique perspective on journalism, publishing and technology. Catch up and/or follow the series here.

				
<p class="editors-note">
    Occasionally we’ll do a Q&amp;A with an impressive maker or strategist from media and its fringes. Each person brings a unique perspective on journalism, publishing and technology. Catch up and/or follow the series here.
</p>

Note

Note that the words "Note:" are prepended to the content.

Occasionally we’ll do a Q&A with an impressive maker or strategist from media and its fringes. Each person brings a unique perspective on journalism, publishing and technology. Catch up and/or follow the series here.

				
<p class="note">
    Occasionally we’ll do a Q&amp;A with an impressive maker or strategist from media and its fringes. Each person brings a unique perspective on journalism, publishing and technology. Catch up and/or follow the series here.
</p>

Fonts

Orangeline's core fonts

text-fontFamily-sansSerif

.text-fontFamily-sansSerif

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.

text-fontFamily-serif

.text-fontFamily-serif

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.

text-fontFamily-displaySerif

.text-fontFamily-displaySerif

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.

text-fontFamily-monospace

.text-fontFamily-monospace

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien.

Icons

Orangeline's core icons. To use, simply apply the class to a simple <span> with exception of the .icon-loading icon.


<div class="icon-loading"></div>

.icon-bin

.icon-cog

.icon-link

.icon-image

.icon-images

.icon-mic

.icon-folder

.icon-price-tag

.icon-email

.icon-phone

.icon-camera

.icon-zoom-in

.icon-zoom-out

.icon-enlarge

.icon-shrink

.icon-download

.icon-upload

.icon-bubbles

.icon-quotes-left

.icon-quotes-right

.icon-equalizer

.icon-equalizer2

.icon-cloud-download

.icon-attachment

.icon-circle-up

.icon-circle-right

.icon-circle-down

.icon-circle-left

.icon-sort-alpha-asc

.icon-sort-alpha-desc

.icon-text-height

.icon-text-width

.icon-font-size

.icon-bold

.icon-underline

.icon-italic

.icon-strikethrough

.icon-paragraph-left

.icon-paragraph-center

.icon-paragraph-right

.icon-paragraph-justify

.icon-share

.icon-new-tab

.icon-embed

.icon-embed2

.icon-terminal

.icon-share2

.icon-instagram

.icon-flickr2

.icon-amazon

.icon-google-plus

.icon-google-drive

.icon-dropbox

.icon-soundcloud

.icon-facebook

.icon-facebook2

.icon-spotify

.icon-twitter

.icon-rss2

.icon-youtube

.icon-youtube2

.icon-vimeo

.icon-vimeo2

.icon-github

.icon-trello

.icon-wordpress

.icon-tumblr

.icon-tumblr2

.icon-appleinc

.icon-android

.icon-windows8

.icon-skype

.icon-wikipedia

.icon-linkedin

.icon-linkedin2

.icon-pinterest

.icon-pinterest2

.icon-chrome

.icon-firefox

.icon-IE

.icon-edge

.icon-safari

.icon-html-five

.icon-html-five2

Navigation

Navbar

				
<nav class="navbar">
    <ul>
        <li><a class="button" href="">Overview</a></li>
        <li><a class="button" href="">Timeline Creator</a></li>
        <li><a class="button" href="">Examples</a></li>
        <li><a class="button" href="">Help</a></li>
        <li><a class="button" href="">Documentation</a></li>
    </ul>
</nav>

Navbar Subnav

				
<nav class="navbar navbar-subnav">
    <ul>
        <li><a class="button" href="">Overview</a></li>
        <li><a class="button" href="">Timeline Creator</a></li>
        <li><a class="button" href="">Examples</a></li>
        <li><a class="button" href="">Help</a></li>
        <li><a class="button" href="">Documentation</a></li>
    </ul>
</nav>

Product Navbar

Main navigation for the top of Knight Lab pages.

Handlebars

A partial can be used for handlebars called > navbar-product-top.

				
<nav id="navbar-product-top" class="navbar navbar-dark">
    <ul>
        <li class="logo">
            <a href="http://knightlab.com">
                <img src="assets/knightlab-dark.png" />
            </a>
        </li>
    </ul>
    <ul class="nav-right">
        <li><a class="button button-dark" href="#overview">Projects</a></li>
        <li><a class="button button-dark" href="#examples">Class</a></li>
        <li><a class="button button-dark" href="#examples">Blog</a></li>
        <li><a class="button button-dark" href="#make">Community</a></li>
        <li><a class="button button-dark" href="#help">About</a></li>
    </ul>
</nav>

Cards

Card

Cards are a convenient means of displaying content composed of different types of objects. They’re also well-suited for presenting similar objects whose size or supported actions can vary considerably.

Cards should have a <header>, <article> and <footer>. You can help make cards a standard size by using the .card-content-scrollable class on the <article> element.

If you have many cards, you can make a grid of them by putting them in a <div> with the class .cards.

        
<div class="cards">
    <div class="card">...</div>
    <div class="card">...</div>
    <div class="card">...</div>
    <div class="card">...</div>
    <div class="card">...</div>
</div>

Storytelling Layers on 360 Video

Sensor journalism uses sensors to collect information about our environment. It opens new possibilities for journalists enabling them to collect and process data that might not be available or at a level of detail not previously available. Technology for building sensors to collect data on the environment have become affordable and extensible thanks to technology like Arduino and Raspberry Pi. Sensor data can include but is not limited to information about what is in the water, air, temperature, sound level, wind and soil. This project will measure the air quality of different places on campus. Sensors will be built that measure particulate matter in the air and report back their readings at frequent intervals. Using the data collected, students will visualize the air quality on campus as well as how it fluctuates throughout the day. This project is meant to be a prototype of how to execute an end to end reporting process that uses sensors to collect data and then use that data to visualize a synthesis for an audience. Part of this project will include documenting the build process to allow others to be able to replicate our sensors for data reporting.

Environmental Reporting with Sensors

Sensor journalism uses sensors to collect information about our environment. It opens new possibilities for journalists enabling them to collect and process data that might not be available or at a level of detail not previously available. Technology for building sensors to collect data on the environment have become affordable and extensible thanks to technology like Arduino and Raspberry Pi. Sensor data can include but is not limited to information about what is in the water, air, temperature, sound level, wind and soil. This project will measure the air quality of different places on campus. Sensors will be built that measure particulate matter in the air and report back their readings at frequent intervals. Using the data collected, students will visualize the air quality on campus as well as how it fluctuates throughout the day. This project is meant to be a prototype of how to execute an end to end reporting process that uses sensors to collect data and then use that data to visualize a synthesis for an audience. Part of this project will include documenting the build process to allow others to be able to replicate our sensors for data reporting.

Environmental Reporting with Sensors

Sensor journalism uses sensors to collect information about our environment. It opens new possibilities for journalists enabling them to collect and process data that might not be available or at a level of detail not previously available. Technology for building sensors to collect data on the environment have become affordable and extensible thanks to technology like Arduino and Raspberry Pi. Sensor data can include but is not limited to information about what is in the water, air, temperature, sound level, wind and soil. This project will measure the air quality of different places on campus. Sensors will be built that measure particulate matter in the air and report back their readings at frequent intervals. Using the data collected, students will visualize the air quality on campus as well as how it fluctuates throughout the day. This project is meant to be a prototype of how to execute an end to end reporting process that uses sensors to collect data and then use that data to visualize a synthesis for an audience. Part of this project will include documenting the build process to allow others to be able to replicate our sensors for data reporting.

				

<!-- Header with image example -->
<div class="card" id="sensor">
    <header class="header-image">
        <div class="header-image-background" style="background-image: url(http://knightlab.northwestern.edu/wp-content/uploads/2017/01/knight_lab_studio_background.jpg);"></div>
        <div class="header-image-overlay"></div>
        <div class="header-image-content column-10 column-10-phone grid-item-bottom">
            <h4>Storytelling Layers on 360 Video</h4>
        </div>
    </header>
    <article>
        <p class="small">
            Sensor journalism uses sensors to collect information about our environment. It opens new possibilities for journalists enabling them to collect and process data that might not be available or at a level of detail not previously available. Technology for building sensors to collect data on the environment have become affordable and extensible thanks to technology like Arduino and Raspberry Pi. Sensor data can include but is not limited to information about what is in the water, air, temperature, sound level, wind and soil. This project will measure the air quality of different places on campus. Sensors will be built that measure particulate matter in the air and report back their readings at frequent intervals. Using the data collected, students will visualize the air quality on campus as well as how it fluctuates throughout the day. This project is meant to be a prototype of how to execute an end to end reporting process that uses sensors to collect data and then use that data to visualize a synthesis for an audience. Part of this project will include documenting the build process to allow others to be able to replicate our sensors for data reporting.
        </p>
    </article>
    <footer>
        <a class="button" href="https://docs.google.com/document/d/1nAq2y4SKhkrYgvTdW1n_bViNWkJTDygdC_GOuM_1_uI/edit?usp=sharing" target="_blank">Details</a>
        <a class="button" href="https://docs.google.com/document/d/1nAq2y4SKhkrYgvTdW1n_bViNWkJTDygdC_GOuM_1_uI/edit?usp=sharing" target="_blank">Prototype</a>
    </footer>
</div>

<!-- Header with color example -->
<div class="card" id="sensor">
    <header class="fill-color-tertiary--light">
        <h4>Environmental Reporting with Sensors</h4>
    </header>
    <article>
        <p class="small">
            Sensor journalism uses sensors to collect information about our environment. It opens new possibilities for journalists enabling them to collect and process data that might not be available or at a level of detail not previously available. Technology for building sensors to collect data on the environment have become affordable and extensible thanks to technology like Arduino and Raspberry Pi. Sensor data can include but is not limited to information about what is in the water, air, temperature, sound level, wind and soil. This project will measure the air quality of different places on campus. Sensors will be built that measure particulate matter in the air and report back their readings at frequent intervals. Using the data collected, students will visualize the air quality on campus as well as how it fluctuates throughout the day. This project is meant to be a prototype of how to execute an end to end reporting process that uses sensors to collect data and then use that data to visualize a synthesis for an audience. Part of this project will include documenting the build process to allow others to be able to replicate our sensors for data reporting.
        </p>
    </article>
    <footer>
        <a class="button" href="https://docs.google.com/document/d/1nAq2y4SKhkrYgvTdW1n_bViNWkJTDygdC_GOuM_1_uI/edit?usp=sharing" target="_blank">Details</a>
        <a class="button" href="https://docs.google.com/document/d/1nAq2y4SKhkrYgvTdW1n_bViNWkJTDygdC_GOuM_1_uI/edit?usp=sharing" target="_blank">Prototype</a>
    </footer>
</div>

<!-- Full background image example -->
<div class="card card-image" id="sensor" style="background-image: url(http://knightlab.northwestern.edu/wp-content/uploads/2017/01/knight_lab_studio_background.jpg);">
    <header>
        <h4>Environmental Reporting with Sensors</h4>
    </header>
    <article>
        <p class="small">
            Sensor journalism uses sensors to collect information about our environment. It opens new possibilities for journalists enabling them to collect and process data that might not be available or at a level of detail not previously available. Technology for building sensors to collect data on the environment have become affordable and extensible thanks to technology like Arduino and Raspberry Pi. Sensor data can include but is not limited to information about what is in the water, air, temperature, sound level, wind and soil. This project will measure the air quality of different places on campus. Sensors will be built that measure particulate matter in the air and report back their readings at frequent intervals. Using the data collected, students will visualize the air quality on campus as well as how it fluctuates throughout the day. This project is meant to be a prototype of how to execute an end to end reporting process that uses sensors to collect data and then use that data to visualize a synthesis for an audience. Part of this project will include documenting the build process to allow others to be able to replicate our sensors for data reporting.
        </p>
    </article>
    <footer>
        <a class="button" href="https://docs.google.com/document/d/1nAq2y4SKhkrYgvTdW1n_bViNWkJTDygdC_GOuM_1_uI/edit?usp=sharing" target="_blank">Details</a>
        <a class="button" href="https://docs.google.com/document/d/1nAq2y4SKhkrYgvTdW1n_bViNWkJTDygdC_GOuM_1_uI/edit?usp=sharing" target="_blank">Prototype</a>
    </footer>
</div>

Panels

Panel

While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.

This is a panel

Sensor journalism uses sensors to collect information about our environment. It opens new possibilities for journalists enabling them to collect and process data that might not be available or at a level of detail not previously available. Technology

				
<div class="panel">
    <h4>This is a panel</h4>
    <p>
        Sensor journalism uses sensors to collect information about our environment. It opens new possibilities for journalists enabling them to collect and process data that might not be available or at a level of detail not previously available. Technology

    </p>
</div>

Images

Figure

Figures should include a credit and a caption as two seperate elements. We recommend using the lazy load feature to save viewer's loading in images they might not see. To use lazy loading, add the .lazyload class and change src to data-src like the example below.

				
<figure>
    <img data-src="http://knightlab.northwestern.edu/wp-content/uploads/2015/03/students.jpg" class="lazyload" alt="A generic square placeholder image">
    <figcaption class="credit">John Doe</figcaption>
    <figcaption>
        A caption for the above image. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat.
    </figcaption>
</figure>

Images

Add classes to an <img> element to easily style images in any project.

				

<img src="https://c2.staticflickr.com/8/7281/27370659520_911432c69e_z.jpg" class="img-rounded" alt="A generic square placeholder image">
<img src="https://c2.staticflickr.com/8/7281/27370659520_911432c69e_z.jpg" class="img-circle" alt="A generic square placeholder image">
<img src="https://c2.staticflickr.com/8/7281/27370659520_911432c69e_z.jpg" class="img-thumbnail" alt="A generic square placeholder image">
<img src="https://c2.staticflickr.com/8/7281/27370659520_911432c69e_z.jpg" class="img-shadow" alt="A generic square placeholder image">

Embed

Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device. Options for both 16x9 ratio embed embed16by9 and 4x3 ratio embed embed4by3. It is best to include embeds in a <figure> element with a credit <figcaption class="credit"> and a caption <figcaption>. We recommend using the lazy load feature to save viewer's loading in embeds they might not see. To use lazy loading, add the .lazyload class and change src to data-src like the example below.

Northwestern University Knight Lab

This is a step-by-step video tutorial on how to use TimelineJS.

				
<figure>
    <div class="embed embed-16by9">
        <iframe class="embed-item lazyload" class="lazyload" frameborder="0" allowfullscreen data-src="https://player.vimeo.com/video/143407878"></iframe>
    </div>
    <figcaption class="credit">
        Northwestern University Knight Lab
    </figcaption>
    <figcaption>
        This is a step-by-step video tutorial on how to use TimelineJS.
    </figcaption>
</figure>

Logo

Videos

Figure

Videos should also be placed under a figure tag, and it should include a credit and a caption as two seperate elements. Under figure tags, videos will automatically expand to 100% of the container's width. We recommend using the lazy load feature to save viewer's loading in videos they might not see. To use lazy loading, add the .lazyload class and change src to data-src like the example below.

John Doe

A caption for the above video. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat.

				
<figure>
	<video controls poster="poster.png">
		<source src="videofile.webm" />
		<source src="videofile.mp4" />
	</video>
	<figcaption class="credit">John Doe</figcaption>
	<figcaption>Description of video content.</figcaption>
</figure>

Branding

Product Logo

The product logo mark is used on Knight Lab software, such as TimelineJS. It can be rendered in four sizes.

Timeline JS

				
<h1 class="product-logo product-logo-smallest">Timeline <span>JS</span></h1>
<h1 class="product-logo product-logo-smaller">Timeline <span>JS</span></h1>
<h1 class="product-logo product-logo-small">Timeline <span>JS</span></h1>
<h1 class="product-logo">Timeline <span>JS</span></h1>
<h1 class="product-logo product-logo-large">Timeline <span>JS</span></h1>

Logos

Available with and without taglines, padding (useful for colored backgrounds or crowded layouts), and transparent backgrounds.

Horizontal Logos

Transparent background, no padding, 400px by 120px
Transparent background, no padding, 691px by 206px
Transparent background, no padding, 400px by 120px
Transparent background, no padding, 400px by 120px

Patterns

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

Keep it short. We recommend not having more than 20 slides for a reader to click through.
Pick stories that have a strong chronological narrative. It does not work well for stories that need to jump around in the timeline.
Write each event as a part of a larger narrative.
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>

Moth (Middle of the homepage)

Available in .moth--article for articles and .moth--product for products.

Before we can discuss accessibility in conversational interfaces, however, it’s important to note where these interfaces excel, especially in comparison to graphical interfaces. Conversational interfaces are very good for doing one thing at a time when you know what you want. It would be difficult for a bot to do something like help you compiling research before writing an article because that typically requires a lot of browsing, listing of multiple sources at once, and cross-referencing between sources. But if you want to book a flight to London for next Tuesday or know who won the primary in your state, however, that’s something a bot could handle gracefully. Like in a real conversation, you ask someone a question, the person you’re talking to responds with an answer, and the two of you may deliberate or go back and forth before you arrive at a mutual answer.

Where conversational interfaces really shine, however, and the reason these interfaces have been utilized so much by bots and are so closely related to the field of artificial intelligence, is that If you asked a human being for a recommendation for a place to eat next week, there are a number of facts that would make it easier for a person to answer: where you were, what kinds of food you liked, any allergies you had, how much like to spend, etc.

Matty Mariansky, co-founder and product designer at Meekan, a Slack bot that schedules meetings across teams, describes the ideal bot as being a search engine that gives you one result.

Buttons

Buttons Styles

You can create a button in two ways: with the button element or by adding the .button class to an a tag.

Default Button Light Button Dark Button Ghost Button Disabled Primary Button Complement Button Tetrad Button Secondary Button Tertiary Button Button Link

				
<a class="button">Default Button</a>
<a class="button button-light">Light Button</a>
<a class="button button-dark">Dark Button</a>
<a class="button button-ghost">Ghost Button</a>
<a class="button button-disabled">Disabled</a>
<a class="button button-primary">Primary Button</a>
<a class="button button-complement">Complement Button</a>
<a class="button button-tetrad">Tetrad Button</a>
<a class="button button-secondary">Secondary Button</a>
<a class="button button-tertiary">Tertiary Button</a>
<a class="button button-link">Button Link</a>

Buttons Sizes

Buttons can be rendered in different sizes.

They also support responsive states similar to the grid system. .button-large-phone

Full-width Button

Largest Button

Large Button

Default Button

Small Button

Smallest Button

				
<div class="button button-light button-full-width">Full-width Button</div>
<div class="button button-light button-largest">Largest Button</div>
<div class="button button-light button-large">Large Button</div>
<div class="button button-light">Default Button</div>
<div class="button button-light button-small">Small Button</div>
<div class="button button-light button-smallest">Smallest Button</div>

Colors

Fill Colors

Background Fills

color-primary

.fill-color-primary

color-primary--light

.fill-color-primary--light

color-primary--dark

.fill-color-primary--dark

color-complement

.fill-color-complement

color-complement--light

.fill-color-complement--light

color-complement--dark

.fill-color-complement--dark

color-tetrad

.fill-color-tetrad

color-tetrad--light

.fill-color-tetrad--light

color-tetrad--dark

.fill-color-tetrad--dark

color-secondary

.fill-color-secondary

color-secondary--light

.fill-color-secondary--light

color-secondary--dark

.fill-color-secondary--dark

color-tertiary

.fill-color-tertiary

color-tertiary--light

.fill-color-tertiary--light

color-tertiary--dark

.fill-color-tertiary--dark

color-grey--light

.fill-color-grey--light

color-grey--lighter

.fill-color-grey--lighter

color-grey--lightest

.fill-color-grey--lightest

color-grey--dark

.fill-color-grey--dark

color-grey--darker

.fill-color-grey--darker

color-grey--darkest

.fill-color-grey--darkest

color-text-default

.fill-color-text-default

color-bg-default

.fill-color-bg-default

color-dark

.fill-color-dark

				
<div class="fill-color-primary"></div>

Text Colors

Text colors

color-primary

.text-color-primary #147693

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.

color-primary--light

.text-color-primary--light #147693

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.

color-primary--dark

.text-color-primary--dark #147693

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.

color-complement

.text-color-complement #147693

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.

color-complement--light

.text-color-complement--light #147693

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.

color-complement--dark

.text-color-complement--dark #147693

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.

color-tetrad

.text-color-tetrad #147693

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.

color-tetrad--light

.text-color-tetrad--light #147693

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.

color-tetrad--dark

.text-color-tetrad--dark #147693

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.

color-secondary

.text-color-secondary #147693

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.

color-secondary--light

.text-color-secondary--light #147693

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.

color-secondary--dark

.text-color-secondary--dark #147693

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.

color-tertiary

.text-color-tertiary #147693

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.

color-tertiary--light

.text-color-tertiary--light #147693

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.

color-tertiary--dark

.text-color-tertiary--dark #147693

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.

color-grey--light

.text-color-grey--light #147693

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.

color-grey--lighter

.text-color-grey--lighter #147693

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.

color-grey--lightest

.text-color-grey--lightest #147693

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.

color-grey--dark

.text-color-grey--dark #147693

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.

color-grey--darker

.text-color-grey--darker #147693

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.

color-grey--darkest

.text-color-grey--darkest #147693

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.

color-text-default

.text-color-text-default #147693

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.

color-bg-default

.text-color-bg-default #147693

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.

color-dark

.text-color-dark #147693

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.

				
<div class="fill-color-primary"></div>

Tables

Basic Tables

The HTML <table> element represents tabular data — that is, information expressed via a two-dimensional data table.

#	First Name	Last Name	Username
1	Zach	Wise	@zlwise
2	Joe	Germuska	@joegermuska
3	Emily	Withrow	@emilywithrow

				
<table>
    <thead>
        <tr>
            <th>#</th>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Username</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Zach</td>
            <td>Wise</td>
            <td>@zlwise</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Joe</td>
            <td>Germuska</td>
            <td>@joegermuska</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Emily</td>
            <td>Withrow</td>
            <td>@emilywithrow</td>
        </tr>
    </tbody>
</table>

Form

				
<form>
	<label for="text">Text Input</label>
	<input type="text" name="text">
	<label for="textplaceholder">Text Input with Placeholder</label>
	<input type="text" name="textplaceholder" placeholder="Example Input">
	<label for="textdefault">Text Input with Default Input</label>
	<input type="text" name="textdefault" value="Default Input">
	<label for="required">Required Text Input</label>
	<input type="text" name="required" required>
	<label for="password">Password</label>
	<input type="password" name="password">
	<label for="textarea">Text Area</label>
	<textarea name="textarea" cols="50" rows="4"></textarea>
	<label for="radio">Radio</label>
	<input type="radio" name="radio" value="option1"> Option 1
	<input type="radio" name="radio" value="option2"> Option 2
	<input type="radio" name="radio" value="option3"> Option 3
	<input type="radio" name="radio" value="option4"> Option 4
	<label for="checkbox">Checkbox</label>
	<input type="checkbox" name="checkbox"> Option 1
	<input type="checkbox" name="checkbox"> Option 2
	<input type="checkbox" name="checkbox"> Option 3
	<input type="checkbox" name="checkbox"> Option 4
	<div class="input-group-label">
		<label for="inlinelabel">Inline label</label>
		<input type="text" placeholder="Input with inline label" name="inlinelabel">
	</div>
	<div class="input-group-label">
		<label class='input-group-addon' for="inlinelabel">Inline label</label>
		<input type="text" placeholder="Input with inline label" name="inlinelabel">
	</div>
	<div class="input-group-label">
		<input type="text" placeholder="Input with inline label" name="inlinelabel">
		<div class='input-group-addon'>Inline Add-On</div>
	</div>
	<div class="input-group-button">
		<input type="text" placeholder="Input with attached submit button">
		<input type="submit" name="">
	</div>
	<select>
		<option value="option1">Option 1</option>
		<option value="option1">Option 2</option>
		<option value="option1">Option 3</option>
		<option value="option1">Option 4</option>
	</select>
	<input type="submit">
</form>
<form class="form-horizontal">
	<div class="input-group">
		<label>Horizontal Input</label>
		<input type="text" name="">
	</div>
	<div class="input-group">
		<label>Form Input</label>
		<input type="text" name="">
	</div>
</form>

Example Grid

Examples

Used to show examples of how publications our using the Knight Lab's tools. Grid for examples is responsive.

Handlebars

A partial can be used for handlebars called > examples it takes an array of objects:

            
examples: [
    {
        title: "Mandela: A Life of Purpose",
        link: "http://world.time.com/2013/12/05/nelson-mandelas-extraordinary-life-an-interactive-timeline/",
        image: "https://timeline.knightlab.com/static/img/examples/thumbs/thumb_mandela.jpg",
        logo: "https://timeline.knightlab.com/static/img/examples/logos/logo_time.png"
    },
]

            
<div class="example-grid">

    <div class="grid-item">
        <a href="http://world.time.com/2013/12/05/nelson-mandelas-extraordinary-life-an-interactive-timeline/" class="button">
            <figure class="examples">
                <img src="https://timeline.knightlab.com/static/img/examples/thumbs/thumb_mandela.jpg" alt="A generic square placeholder image">
            </figure>
            <img src="https://timeline.knightlab.com/static/img/examples/logos/logo_time.png" class="logo-inline">
            <h4>Mandela: A Life of Purpose</h4>
        </a>
    </div>

    <div class="grid-item">
        <a href="http://www.lemonde.fr/election-presidentielle-2012/visuel/2012/04/21/chronologie-une-si-longue-campagne-presidentielle_1681661_1471069.html#meter_toaster" class="button">
            <figure class="examples">
                <img src="https://timeline.knightlab.com/static/img/examples/thumbs/thumb_lemonde.jpg" alt="A generic square placeholder image">
            </figure>
            <img src="https://timeline.knightlab.com/static/img/examples/logos/logo_lemonde.png" class="logo-inline">
            <h4>Chronology of the French Presidential Race</h4>
        </a>
    </div>

    <div class="grid-item">
        <a href="http://www.themaneater.com/special-sections/mu-fall-2015/" class="button">
            <figure class="examples">
                <img src="https://timeline.knightlab.com/static/img/examples/thumbs/thumb_univofmissouri.jpg" alt="A generic square placeholder image">
            </figure>
            <img src="https://timeline.knightlab.com/static/img/examples/logos/logo_maneater.png" class="logo-inline">
            <h4>Historic Fall at University of Missouri</h4>
        </a>
    </div>

</div>

Accordion

Useful for FAQ and help sections.

Handlebars

A partial can be used for handlebars called > faq it takes an array:

            
faq: [
    {
        question: "How do I edit my timeline?",
        answer: "Once you've created a timeline, you can make changes by going back to your Google spreadsheet. Changes you make to the spreadsheet are automatically available to your Timeline—you don't need to repeat the 'publish to the web' step (step #2). If you want to make changes to the optional settings, you will need to update your embed code, but if you are only changing content in the spreadsheet, then there's nothing else to do.",
        link: ""
    }
]

How do I edit my timeline?

Once you've created a timeline, you can make changes by going back to your Google spreadsheet. Changes you make to the spreadsheet are automatically available to your Timeline—you don't need to repeat the "publish to the web" step (step #2). If you want to make changes to the optional settings, you will need to update your embed code, but if you are only changing content in the spreadsheet, then there's nothing else to do.
What web browsers does TimelineJS work with?

Our primary development and testing browser is Google Chrome. We adhere closely to web standards, so we believe that TimelineJS should work effectively in all modern web browsers. TimelineJS is known to not work with Internet Explorer versions before IE10.
What are my options for changing how my Timeline looks?

First, make sure you know everything you can do in the spreadsheet configuration, like background colors and images. Also, check out the optional settings part of "step 3" of the authoring tool. You can change the fonts, the position of the timeline navigation, and the initial zoom level. If you still want to do more, there are some configuration options available. Most of those are for fine tuning, but some of them may be helpful.

				
<ul class="accordion">
    <li>
        <input type="checkbox" checked>
        <i></i>
        <h3>How do I edit my timeline?</h3>
        <div class="accordion-content">
            Once you've created a timeline, you can make changes by going back to your Google spreadsheet. Changes you make to the spreadsheet are automatically available to your Timeline—you don't need to repeat the "publish to the web" step (step #2). If you want to make changes to the optional settings, you will need to update your embed code, but if you are only changing content in the spreadsheet, then there's nothing else to do.
        </div>
    </li>
    <li>
        <input type="checkbox" checked>
        <i></i>
        <h3>What web browsers does TimelineJS work with?</h3>
        <div class="accordion-content">
            Our primary development and testing browser is Google Chrome. We adhere closely to web standards, so we believe that TimelineJS should work effectively in all modern web browsers. TimelineJS is known to not work with Internet Explorer versions before IE10.
        </div>
    </li>
    <li>
        <input type="checkbox" checked>
        <i></i>
        <h3>What are my options for changing how my Timeline looks?</h3>
        <div class="accordion-content">
            First, make sure you know everything you can do in the spreadsheet configuration, like background colors and images. Also, check out the optional settings part of "step 3" of the authoring tool. You can change the fonts, the position of the timeline navigation, and the initial zoom level. If you still want to do more, there are some configuration options available. Most of those are for fine tuning, but some of them may be helpful.
        </div>
    </li>
</ul>

Instructional Steps

Instructional steps are best displayed using a <section> with section-color section-color-complement styles applied to it.

Create your spreadsheet

Build a new Google Spreadsheet using our template. You'll need to copy the template to your own Google Drive account by clicking the "Use this template" button.

Drop dates, text and links to media into the appropriate columns. For more about working with our template, see our help docs.

Note: Don't change the column headers, don't remove any columns, and don't leave any blank rows in your spreadsheet.
Publish to the web

Under the File menu, select “Publish to the Web.”

In the next window, click the blue "publish" button. When asked, "Are you sure…?" click OK.

Now, copy the URL that appears in the center of the window. You'll use this in the next step.
Generate your timeline

Copy/paste spreadsheet URL into the box below to generate your timeline. (Make sure you've published the spreadsheet.)

<section class="section-color section-color-complement">
    <ol class="instructional-steps">
        <li class="step grid">
            <div class="step-number column-2">
                <h6>Create your spreadsheet</h6>
            </div>
            <div class="step-details column-10">
                <p>Build a new Google Spreadsheet using our template. You'll need to copy the template to your own Google Drive account by clicking the "Use this template" button.</p>
                <p>Drop dates, text and links to media into the appropriate columns. For more about working with our template, see our help docs.</p>
                <p><b>Note:</b> Don't change the column headers, don't remove any columns, and don't leave any blank rows in your spreadsheet.</p>
            </div>
        </li>
        <li class="step grid">
            <div class="step-number column-2">
                <h6>Publish to the web</h6>
            </div>
            <div class="step-details column-10">
                <p>Under the File menu, select “Publish to the Web.”</p>
                <p>In the next window, click the blue "publish" button. When asked, "Are you sure…?" click OK.</p>
                <p>Now, copy the URL that appears in the center of the window. You'll use this in the next step.</p>
            </div>
        </li>
        <li class="step grid">
            <div class="step-number column-2">
                <h6>Generate your timeline</h6>
            </div>
            <div class="step-details column-10">
                <p>Copy/paste spreadsheet URL into the box below to generate your timeline. (Make sure you've published the spreadsheet.)</p>
            </div>
        </li>
    </ol>
</section>

Footer

Standard footer for the bottom of most Knight Lab pages.

Handlebars

A partial can be used for handlebars called > footer.

                
<footer class="footer-knightlab--dark">
    <div class="container">
        <div class='grid grid-center'>
            <div class='column-2 column-4-phone column-4-tablet'>
                <a href="http://knightlab.northwestern.edu" target="_blank">
                    <img src="https://cdn.knightlab.com/libs/orangeline/latest/assets/logo-knightlab-stacked-dark-small.png" style="margin-left:auto;">
                </a>
                <ul class="list--social text-align-center">
                    <li><a class="link--no-style" href="http://www.twitter.com/knightlab" target="_blank" title="Knight Lab on Twitter"><span class="icon-twitter"></span></a></li>
                    <li><a class="link--no-style" href="https://www.facebook.com/knightlab" target="_blank" title="Knight Lab on Facebook"><span class="icon-facebook"></span></a></li>
                    <li><a class="link--no-style" href="https://github.com/NUKnightLab/" target="_blank" title="Knight Lab on GitHub"><span class="icon-github"></span></a></li>
                </ul>
            </div>
            <div class='column-4 column-5-tablet column-6-phone footer-description'>
                <p>
                    The <a title="Northwestern University" href="http://www.northwestern.edu/" target="_blank">Northwestern University</a> Knight Lab is a team of technologists and journalists working at advancing news media innovation through exploration and experimentation.
                </p>
                <div class="grid-size-2 grid-size-2-phone">
                    <div class="grid-item">
                        <a title="Medill School of Journalism, Media, Integrated Marketing Communications" href="http://www.medill.northwestern.edu/" target="_blank">
                            <img src="https://cdn.knightlab.com/libs/orangeline/latest/assets/logo-medill-dark.png">
                        </a>
                    </div>

                    <div class="grid-item">
                        <a title="McCormick School of Engineering" href="http://www.mccormick.northwestern.edu/" target="_blank">
                            <img src="https://cdn.knightlab.com/libs/orangeline/latest/assets/logo-mccormick-dark.png">
                        </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="grid grid-center">
            <div class="grid-item">
            <address itemscope="" itemtype="http://data-vocabulary.org/Organization">
                <span style="display:none;" itemprop="name" title="Knight Lab | Advancing news media innovation through exploration and experimentation." class="address-name">Knight Lab</span>
                <span itemprop="tel" class="tel">(847) 467-4971</span>
                <span itemprop="address" itemscope="" itemtype="http://data-vocabulary.org/Address" class="address">
                    <span itemprop="street-address" class="street-address">1845 Sheridan Road</span>
                    <span class="room-num">Fisk #109 &amp; #111</span>
                    <div class="address-group">
                        <span itemprop="locality">Evanston,</span> <span itemprop="region">IL</span> <span itemprop="postal-code">60208 </span>
                        <span style="display:none;" itemprop="geo" itemscope="" itemtype="http://www.data-vocabulary.org/Geo/" class="geo">
                            Latitude: <span itemprop="latitude">42.056893</span><br>Longitude:
                            <span itemprop="longitude">-87.676735</span>
                        </span>
                        <a style="display:none;" href="http://knightlab.northwestern.edu" itemprop="url" class="url">Northwesten University Knight Lab | Advancing media innovation through exploration and experimentation.</a>
                    </div>
                </span>
            </address>
            <span class="copyright">© Copyright 2017 Northwestern University</span>
            </div>
        </div>
    </div>
</footer>

<script src="../../js/main.js"></script>

CSS: Documentation

Grids

Basic Grids

Grid Sizes

Column Layout

Responsive Column Layout

Grid Options

Alignment per grid

Pull Left and Pull Right

Sections

Section Color

Section Title

Section Title

Typography

Editorial Headlines

h1. Used for the title of the article.

h2. Used for section breaks within articles.

h3. Used for calls to action.

h4. Used for smaller subheads.

h5. Heading 5

h6. Heading 6

Product Headlines

h1. Used on the homepage, no more than two lines long.

h2. Used for section titles.

h2.intro Catchy intro that's less than ten words.

h3. Subsection titles.

h4. Typically used for items that have titles within a section.

h5. Heading 5

h6. Heading 6

Paragraphs

Lists

Unordered Lists

Ordered Lists

Definition Lists

Horizontal Definition List

Quotes

Inline Quote

Blockquote

Blockquote Extend

Pullquote

Bold

Italic

Truncate

Small

Highlight

Deleted

Links

Editor's Note

Note

Fonts

text-fontFamily-sansSerif

text-fontFamily-sansSerif

text-fontFamily-sansSerif

text-fontFamily-sansSerif

text-fontFamily-sansSerif

text-fontFamily-serif

text-fontFamily-serif

text-fontFamily-serif

text-fontFamily-serif

text-fontFamily-serif

text-fontFamily-displaySerif

text-fontFamily-displaySerif

text-fontFamily-displaySerif

text-fontFamily-displaySerif

text-fontFamily-displaySerif

text-fontFamily-monospace

text-fontFamily-monospace

text-fontFamily-monospace

text-fontFamily-monospace

text-fontFamily-monospace

Icons

Navigation

Navbar

Navbar Subnav

Product Navbar

Handlebars

Cards

Card

Panels

Panel