PurpleLine is a CSS and JavaScript framework for Knight Lab web pages, apps and projects. It is based on Foundation 5 . This page itself is built with PurpleLine and Foundation.

To use PurpleLine in your project, simply include the below links in your project. See the rest of this guide for proper usage of the included components. (To develop on PurpleLine, see the README on GitHub. )

What's included

When you include PurpleLine on your page, you will have access to most of the things listed in the menu to your left. Those features not part of the core library are marked with an icon.

What's not included

In an effort to keep PurpleLine as lightweight as possible, some less-used JavaScript and CSS libraries are factored out of the core PurpleLine library. These are denoted with a icon. The JavaScript components are also available in the "Complete JavaScript" include.

Versions

PurpleLine is available in the following versions. The most recent changes will be in both the highest version number and in latest. You should almost always use the most recent version number, though all of the URLs used throughout this guide reference the latest branch.

CSS
Full version
Minified version
Core JavaScript
Full version
Minified version
Complete JavaScript (not recommended)
Full version
Minified version

Typography

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.

Headline styles

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

h2. Used for section breaks within articles.

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

h3. Used for calls to action.

h4. Used for smaller subheads.

h5. Heading 5
h6. Heading 6
HTML

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

Paragraph styles

Foundation calculates font sizes, margins, padding and other attributes in rems, or root ems. By default, Foundation defines 1 rem as 16px. All attributes calculated as rems are derived from this 16px 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.)

Paragraph styles

Lead paragraphs are used as introductions to projects or other large pages.

By default, body text (like this) is 16px. This 16px base size is what all font sizes are calculated from.

HTML

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


Lists

Unordered lists
  • This is an unordered list.
  • Use it for bullet points in a story.
  • This is still an unordered list.
HTML

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

Ordered lists
  1. This is an ordered list.
  2. Use it for steps in a process.
  3. Please don't make listicles.
HTML

  <ul>
    <li>This is an ordered list.</li>
    <li>Use it for steps in a process.</li>
    <li>Please don't make listicles.</li>
  </ul>


Icons by FontAwesome

CSS

Details on available icons and how to use them can be found on the FontAwesome website . Some of the Knight Lab's commonly used icons are below.

Icon examples
HTML

  <i class="fa fa-chevron-right"></i>
  <i class="fa fa-chevron-left"></i>
  <i class="fa fa-plus"></i>
  <i class="fa fa-minus"></i>

Social media icon grouping
HTML

  <ul class="contact-icons">
    <li><a title="follow @knightlab on Twitter" href="//www.twitter.com/knightlab"><i class="fa fa-twitter"></i></a></li>
    <li><a title="Knight Lab on Facebook" href="//www.facebook.com/knightlab"><i class="fa fa-facebook"></i></a></li>
    <li><a title="email Knight Lab" href="mailto:[email protected]"><i class="fa fa-envelope-o"></i></a></li>
    <li><a title="Knight Lab on GitHub" href="//github.com/NUKnightLab/"><i class="fa fa-github-alt"></i></a></li>
  </ul>


Horizontal rule

Horizontal rule

HTML

  <hr />

Quotes

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

Use q for short quotes less than a paragraph long. This is not necessary when quoting an interview you've done, but should be used to point back to source material that lives elsewhere on the Internet. Note that q will insert quotation marks for you but does not create a link back to the original source.

Inline quote

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

HTML

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

Use blockquote to set apart a long quote. If applicable, include the cite attribute to link back to the original source. Always include the source in the text, whether in the blockquote itself or in the surrounding text.

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

HTML

  <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>
  <p>—Michelle Minkoff</p></blockquote>

Pull quotes

Pull quotes are formed with data attributes. Advantages to this method include no duplicated HTML, and being able to separate the pull quote from its physical location. (You can read more about the advantages of this method here .) Simply paste your pull quote text into a data-pullquote attribute (you can use any element).

Note that pull quotes will not show up on mobile screens.

HTML

  <p data-pullquote="This is some content that will show up as a pull quote.">Pull quotes are formed with data attributes.</p>

Editor's note

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

Editor's note

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.

HTML

  <p class="editors-note">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>


Navigation

Static top bar

Static top bar
HTML

   <div data-magellan-expedition="fixed"> <!-- Use this to make the navbar stick to the top. -->
     <!-- Add the class "sticky" to "top-bar" to make the navbar sticky. -->
     <nav class="top-bar" data-topbar role="navigation">
      <ul class="title-area">
        <li class="name">
          <h1><a href="#">PurpleLine</a></h1>
        </li>
         <!-- Remove the class "menu-icon" to get rid of menu icon. Take out "Menu" to just have icon alone -->
        <li class="toggle-topbar menu-icon"><a href="#"><span>Menu</span></a></li>
      </ul>

      <section class="top-bar-section">
        <!-- Right Nav Section -->
        <ul class="right">
          <li><a href="http://knightlab.northwestern.edu/">Northwestern University Knight Lab</a></li>
        </ul>

        <!-- Left Nav Section -->
        <ul class="left">
          <li class="active"><a href="/index.html">Components</a></li>
          <li><a href="/usage.html">Style guide</a></li>
        </ul>
      </section>
    </nav>
  </div>

Sticky top bar
JavaScript

To make the top bar sticky you must first add the class sticky to the nav element. Then enclose the code above in a div data-magellan-expedition="fixed".


Sub nav

Used in conjunction with the navbar to provide in-page navigation or options .

Sub nav
HTML

  <dl id="change-view" class="sub-nav">
    <dt>Preview viewport size:</dt>
    <dd class="small-view">Small</dd>
    <dd class="medium-view">Medium</dd>
    <dd class="large-view">Large</dd>
    <dd class="auto-view">Auto</dd>
  </dl>

Side nav

The side nav panel will take up 100% of the width of its parent.

Side nav
HTML

  <ul class="side-nav">
    <li>TYPOGRAPHY</li>
    <li class="divider"></li>
    <li role="menuitem"><a href="#headlines">Headlines</a></li>
    <li role="menuitem"><a href="#paragraph-styles">Paragraphs</a></li>
    <li role="menuitem"><a href="#lists">Lists</a></li>
    <li role="menuitem"><a href="#icons">Icons</a></li>
  </ul>

Off-canvas nav

CSS
JavaScript

Primarily used for mobile devices, Foundation's off-canvas nav provides a slide-out side panel for navigation. It has yet to be styled for PurpleLine.


Tabs

JavaScript

Assumes that the background of the page they are placed on will be white.

Tabs

This is the first panel of the basic tab example. You can place all sorts of content here including a grid.

This is the second panel of the basic tab example. This is the second panel of the basic tab example.

HTML

  <ul class="tabs" data-tab>
    <li class="tab-title active">
      <a href="#first-panel">Tab 1</a>
    </li>
    <li class="tab-title">
        <a href="#second-panel">Tab 2</a>
    </li>
  </ul>
  <div class="tabs-content">
    <div class="content active" id="first-panel">
      <p>This is the first panel of the basic tab example. You can place all sorts of content here including a grid.</p>
    </div>
    <div class="content" id="second-panel">
      <p>This is the second panel of the basic tab example. This is the second panel of the basic tab example.</p>
    </div>
  </div>


Pagination

CSS

Pagination is useful for building blogs and search.


Icon bar

Primarily used for mobile devices, Foundation's icon bar provides an icon-driven menu with a mobile-native feel. It has yet to be styled for PurpleLine. Guidelines for usage can be found on the "Usage" page.


Joyride

JavaScript

Joyride is tooltip-based page-tour navigation.


Common Design Patterns

Story headings

Story headings on the blog use three components.

Drop heds

A p tag with a class of .drop-hed. Usually used before an h1 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 h1.post-title. Note that the h1 is not italicized, as it is in other cases.

Byline

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

Story headings

Profiles | March 16, 2015

Andrew Golis on launching This.cm and creating a social "magazine experience" on the web

HTML

  <p class="drop-hed"><a href="knightlab.com/profiles">Profiles</a> | March 16, 2015</p>
  <h1 class="post-title">Andrew Golis on launching This.com and creating a social "magazine experience" on the web</h1>
  <p class="byline">Posted by <a href="knightlab.com/nicole-zhu">Nicole Zhu</a></p>


Thumbnail grid

Used to create showcases on product pages (see TimelineJS for an example). Make sure to add .th to each image to create the border.

It is also possible to specify breakpoints at which the number of items per row changes. To learn more, see the Foundation docs .

Block grids for thumbnails
HTML

  <ul class="small-block-grid-3">
    <li><img class="th" src="http://timeline.knightlab.com/static/img/examples/thumbs/thumb_lemonde.jpg"</li>
    <li><img class="th" src="http://timeline.knightlab.com/static/img/examples/thumbs/thumb_mandela.jpg"></li>
    <li><img class="th" src="http://timeline.knightlab.com/static/img/examples/thumbs/thumb_aljazeera.jpg"></li>
  </ul>

The footer used on all Knight Lab pages and products. Usually created as a partial template.

Footer
HTML

  <footer>
    <div class="about-knightlab">
      <div id="knightlab-logo-column">
        <a href="http://knightlab.northwestern.edu" target="_blank"><img src="http://knightlab.northwestern.edu/wp-content/uploads/2014/12/logo_stacked.png" class="img-responsive"></a>
        <ul class="contact-icons">
          <li><a title="follow @knightlab on Twitter" href="http://www.twitter.com/knightlab"><i class="fa fa-twitter"></i></a></li>
          <li><a title="Knight Lab on Facebook" href="//www.facebook.com/knightlab"><i class="fa fa-facebook"></i></a></li>
          <li><a title="email Knight Lab" href="mailto:[email protected]"><i class="fa fa-envelope-o"></i></a></li>
          <li><a title="Knight Lab on GitHub" href="//github.com/NUKnightLab/"><i class="fa fa-github-alt"></i></a></li>
        </ul>
      </div>
      <div id="knightlab-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>
        <p>A joint initiative of the <a href="http://www.mccormick.northwestern.edu/" target="_blank">Robert R. McCormick School of Engineering and Applied Science</a> and the<a href="http://www.medill.northwestern.edu/" target="_blank"> Medill School of Journalism, Media, Integrated Marketing Communications</a>.</p><img src="http://knightlab.northwestern.edu/wp-content/uploads/2014/12/Logos-Horizontal.png" class="img-responsive logos">
      </div>
      <div class="contact">
        <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"><a href="//maps.google.com/maps?q=1845+Sheridan+Road+Evanston+IL+6020&hl=en&ll=42.050942,-87.673511&spn=0.003059,0.004898&sll=42.050647,-87.674246&sspn=0.012237,0.019591&gl=us&hnear=1845+Sheridan+Rd,+Evanston,+Cook,+Illinois+60201&t=m&z=18&iwloc=A" target="_blank">1845 Sheridan Road Fisk #109 & #111</span>, 
            <span itemprop="locality">Evanston,</span> 
            <span itemprop="region">IL</span> 
            <span itemprop="postal-code">60208 |</span> 
            <span itemprop="country-name" class="address-country">United States</span>
          </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">Northwestern University Knight Lab | Advancing media innovation through exploration and experimentation.</a>
        </address>
        <span class="copyright">| Copyright 2015, Northwestern University</span>
      </div>
    </div><!-- end .about-knightlab -->
  </footer>

MEDIA & MODULES

Accordion

Frequently used for FAQ sections. Sections are collapsed by default, but adding the class active to the desired li.accordion-navigation element and the corresponding child div.content will open it on load. (Only one accordion component can be open at a time.)

Accordion
  • Accordion 1
    Panel 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Accordion 2
    Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
  • Accordion 3
    Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
HTML

  <ul class="accordion" data-accordion>
    <li class="accordion-navigation active">
      <a href="#panel1a">Accordion 1</a>
      <div id="panel1a" class="content active">
        Panel 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </div>
    </li>
    <li class="accordion-navigation">
      <a href="#panel2a">Accordion 2</a>
      <div id="panel2a" class="content">
        Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </div>
    </li>
    <li class="accordion-navigation">
      <a href="#panel3a">Accordion 3</a>
      <div id="panel3a" class="content">
        Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
      </div>
    </li>
  </ul>

Flex Video

CSS

Responsive video players for your viewing pleasure.


Image Slider

CSS
JavaScript

Foundation's image slider, Orbit, has been deprecated in favor of Slick .


CSS
JavaScript

A responsive media lightbox .


Utility

Alerts

JavaScript

While the CSS for alert boxes is available, you must include the Javascript to enable the dismissable properties of alert boxes.


Alignment Helpers

Foundation includes some nifty helper classes for aligning and sizing text, adding rounded corners, clearing floats, and hiding elements.


Buttons

You can create a button in two ways: with the button element or by adding the .button class to an a tag. With either variation, the button text should be wrapped in span See Foundation's documentation about buttons for more. Especially note the accessibility information.

Buttons
Success Button Alert Button Warning Button Info Button Disabled Button
HTML

   <!-- Button syntax -->
  <button><span>Default Button</span></button>
  <!-- Anchor tag syntax -->
  <a href="#" class="button success" role="button"><span>Success Button</span></a>
  <a href="#" class="button alert" role="button"><span>Alert Button</span></a>
  <a href="#" class="button warning" role="button"><span>Warning Button</span></a>
  <a href="#" class="button info" role="button"><span>Info Button</span></a>
  <a href="#" class="button disabled" role="button"><span>Disabled Button</span></a>

Buttons can also be rendered in different sizes.

Buttons




HTML

  <button class="expand"><span>Full-width Button</span></button>
  <button class="large"><span>Large Button</span></button>
  <button><span>Default Button</span></button>
  <button class="small"><span>Small Button</span></button>
  <button class="tiny"><span>Tiny Button</span></button>

Split and dropdown buttons
JavaScript
Split and dropdown buttons
Split Button

HTML

  <a href="#" class="button split">Split Button <span data-dropdown="drop"></span></a><br>
  <ul id="drop" class="f-dropdown" data-dropdown-content>
    <li><a href="#">This is a link</a></li>
    <li><a href="#">This is another</a></li>
    <li><a href="#">Yet another</a></li>
  </ul>

  <button href="#" data-dropdown="drop1" aria-controls="drop1" aria-expanded="false" class="button dropdown">Dropdown Button</button><br>
  <ul id="drop1" data-dropdown-content class="f-dropdown" aria-hidden="true">
    <li><a href="#">This is a link</a></li>
    <li><a href="#">This is another</a></li>
    <li><a href="#">Yet another</a></li>
  </ul>

Forms

Basic forms are included with PurpleLine. Some modules must be included separately (see below).

Sample fields
.com
HTML

  <form>
    <div class="row">
      <div class="large-12 columns">
        <label>Input Label</label>
        <input type="text" placeholder="large-12.columns" />
      </div>
    </div>
    <div class="row">
      <div class="large-4 medium-4 columns">
        <label>Input Label</label>
        <input type="text" placeholder="large-4.columns" />
      </div>
      <div class="large-4 medium-4 columns">
        <label>Input Label</label>
        <input type="text" placeholder="large-4.columns" />
      </div>
      <div class="large-4 medium-4 columns">
        <div class="row collapse">
          <label>Input Label</label>
          <div class="small-9 columns">
            <input type="text" placeholder="small-9.columns" />
          </div>
          <div class="small-3 columns">
            <span class="postfix">.com</span>
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="large-12 columns">
        <label>Select Box</label>
        <select>
          <option value="husker">Husker</option>
          <option value="starbuck">Starbuck</option>
          <option value="hotdog">Hot Dog</option>
          <option value="apollo">Apollo</option>
        </select>
      </div>
    </div>
    <div class="row">
      <div class="large-6 medium-6 columns">
        <label>Choose Your Favorite</label>
        <input type="radio" name="pokemon" value="Red" id="pokemonRed"><label for="pokemonRed">Radio 1</label>
        <input type="radio" name="pokemon" value="Blue" id="pokemonBlue"><label for="pokemonBlue">Radio 2</label>
      </div>
      <div class="large-6 medium-6 columns">
        <label>Check these out</label>
        <input id="checkbox1" type="checkbox"><label for="checkbox1">Checkbox 1</label>
        <input id="checkbox2" type="checkbox"><label for="checkbox2">Checkbox 2</label>
      </div>
    </div>
    <div class="row">
      <div class="large-12 columns">
        <label>Textarea Label</label>
        <textarea placeholder="small-12.columns"></textarea>
      </div>
    </div>
  </form>
Form validation
JavaScript

Prevent submission of invalid forms with form validation .

Sliders and switches
CSS
JavaScript

Foundation's range slider and switch (or toggle) styles must be included separately. Use of switches should be carefully considered, as they are often considered less usable than checkboxes.


Grid system

Foundation's grid system is based on rows and columns. *PurpleLine's rows have a max-width of 1200px. If you want to allow your content to be wider than 1200px, simply omit the use of the row div and use only the column classes. You do not need to use columns within rows. *However, you may find it helpful to use .row.full-width if you are having difficulty aligning columns.

Grid system

This is a twelve column section in a row. Each of these includes a div.panel element so you can see where the columns are - it's not required at all for the grid.

Six columns

Six columns

Four columns

Four columns

Four columns

HTML

  <div class="row">
    <div class="large-12 columns">
      <div class="callout panel">
        <p><strong>This is a twelve column section in a row.</strong> Each of these includes a div.panel element so you can see where the columns are - it's not required at all for the grid.</p>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="large-6 medium-6 columns">
      <div class="callout panel">
        <p>Six columns</p>
      </div>
    </div>
    <div class="large-6 medium-6 columns">
      <div class="callout panel">
        <p>Six columns</p>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="large-4 medium-4 small-4 columns">
      <div class="callout panel">
        <p>Four columns</p>
      </div>
    </div>
    <div class="large-4 medium-4 small-4 columns">
      <div class="callout panel">
        <p>Four columns</p>
      </div>
    </div>
    <div class="large-4 medium-4 small-4 columns">
      <div class="callout panel">
        <p>Four columns</p>
      </div>
    </div>
  </div>

Brand

Colors

This is the Knight Lab palette. Each color is available as a CSS class. Use the suffix -bg to create an element with a select background color, or -text to create an element with that color text. (E.g., .orange-bg or .orange-text.)

When used for text, dark orange yields best readability. Links are dark blue by default and become light blue when hovered over. Yellow is best used sparingly as an accent color.

Dark blue

.dark-blue-bg

#147693

Medium blue

.medium-blue-bg

#0f9bd1

Light blue

.light-blue-bg

#1dacd6

Yellow

.yellow-bg

#eae34a

Dark orange

.dark-orange-bg

#c34528

Orange

.orange-bg

#ce4d28

Light orange

.light-orange-bg

#e35a25

Lightest orange

.lightest-orange-bg

#f7ccb2


Favicon

Image SRC

The favicon is the small icon that appears in the browser tab containing your website. Include it in the head of your document as shown below.

Favicon
HTML

   <link rel="icon" type="image/png" href="//cdn.knightlab.com/libs/purpleline/latest/img/favicon.ico">

Horizontal logos

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

With tagline

Image SRC
Image SRC
Image SRC
Image SRC
Image SRC
Without tagline

Image SRC
Image SRC
Image SRC
Image SRC
Image SRC

Vertical logos

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

With tagline

Image SRC
Image SRC
Image SRC
Image SRC
Without tagline

Image SRC
Image SRC
Image SRC

Diamond logo

Available in one size, 256px square. This logo has a transparent background.

Image SRC

Product logo mark

The product logo mark is used on Knight Lab software, such as TimelineJS . It is usually used in conjunction with the h2.intro and can be rendered in three size. The default size (and smallest it should be) is 60px. Adding a class of .xl to .logo-mark increases the size to 90px, and adding a class of .xxl increases it to 120px.

Logo mark

Timeline JS

Timeline JS

Timeline JS

HTML

  <h1 class="logo-mark">Timeline <span><em>JS</em></span></h1>
  <h1 class="logo-mark xl">Timeline <span><em>JS</em></span></h1>
  <h1 class="logo-mark xxl">Timeline <span><em>JS</em></span></h1>