Blueline is no longer under active development. New Knight Lab projects should be built based on the Purpleline style guide.

Unless specified here, assume that all Twitter Bootstrap components and styles are supported, and that iconography is provided by Font Awesome.

CSS

JS

We have a suite of brand colors to use in your designs. To envoke them as background colors you can use the following classes below on any html element. The hex values are also provided.

Lighter Orange Background (kl-orange-lighter-bg or #f7ccb2)
Light Orange Background (kl-orange-light-bg or #e35a25)
Orange Background (kl-orange-bg or #ce4d28)
Dark Orange Background (kl-orange-dark-bg or #c34528)
Light Green Background (kl-green-light-bg or #eae34a)
Light Blue Background (kl-blue-light-bg or #1dacd6)
Medium Blue Background (kl-blue-med-bg or #0f9bd1)

When we bring our orange branding into the type we have a slightly different color variation (#ca4d1d) we use for better legibility.

Orange Type (kl-orange-type or #ca4d1d)

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6
Horizontal Rule

Paragraph style

Paragraph text. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Paragraph "lead" style

Paragraph text. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Blockquote

Blockquote. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Pull Quote

Just add a data-pullquote="content" to any element and that content will show up floated before it. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Cociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies.

Editor's note

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.

Lists
  • Lions
  • Tigers
  • Bears
  • Oh, my!
  1. Lions
  2. Tigers
  3. Bears
  4. Oh, my!
h2 intro

This is something rather important - possibly a project introduction. It has a subtle gradient in webkit.

Utilities

Pre-heading

Pre-heading is displayed above H1-3 to provide an intro or additional context to the headline. The most common useage is the date above blog headlines.

May 18th, 2001

Sample Header

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

byline

byline is used under a block of text to frame the call to action or supporting information. The most common useage of this is to show author name under a blog headline.

Sample Header

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Round "cropped" image

We frequently use round images on our project sites. If you add the class round to an img tag it will add 100% border radius to all sides.

Button class="" Description
btn Standard gray button with gradient
btn btn-primary Provides extra visual weight and identifies the primary action in a set of buttons
btn btn-info Used as an alternative to the default styles
btn btn-success Indicates a successful or positive action
btn btn-warning Indicates caution should be taken with this action
btn btn-danger Indicates a dangerous or potentially negative action
btn btn-inverse Alternate dark gray button, not tied to a semantic action or use
btn btn-link Deemphasize a button by making it look like a link while maintaining button behavior

Blueline uses Font Awesome, a replacement icon font for Bootstrap. Details on available icons can be found on the Font Awesome website.

Using standard Bootstrap accordion functionality, blueline will change the styling to add icons and shading as shown below.

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Three images and headlines to give insight into a product.

Search Twitter in 12 different languages

View popular terms, hashtags and links.

Save snapshots for later viewing.

The following are examples of Blueline in action, and can be used as a starting point for your project.

  • Project page - epic

  • This is for large and in charge designs - Project homepages that have long taglines and extensive walkthroughs below the intro header. One thiing to note is that the hero-unit block is outside of the main content div. This allows that block to span the entire width of the window.

  • Project home page - compact

    This is for projects that don't have much instruction or instructional steps. The compact header is good for shorter taglines and logo-marks that don't have the blue superscript icons as well. In this version the hero-unit is inside the main content block and has a compact class on it.

  • Interior page

    This is a generic interior page.

As shown on the example static page, the preheader is a popdown area of content used to show more information about The Knight Lab ecosystem.

How it works

You Just need a link on the page iwith add data-toggle="preheader" on any element on the page. The javascript does the rest by inserting the knight lab top tab to the page in the appropriate place. It also automatically takes into account if you are using bootstrap nav or not and if that nav is fixed or not.