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
The classes below work with DIVs and other elements as well as As
Advancing news media innovation through exploration and experimentation
Advancing news media innovation through exploration and experimentation
<link href="../source/assets/logos/favicon.ico" rel="shortcut icon">
We try and use the same logo device when creating new projects. The default size (and smallest it should be) is 60px. Adding the classes xl
(as shown below) will display it at 90px and xxl
will make it 120px. The background color of corner of the blue square is #f3f3f3 by default. The example below has a bg-white
class added to it to blend in with the surrounding background. You may need to override this manually depending on the container background color where it lives.
Note: If you add class compact
to the the hero-unit it will shrink the logo-mark
and h2.intro
font sizes, padding and margins
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.
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)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 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. 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.
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.
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.
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.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
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.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
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.
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.
Three images and headlines to give insight into a product.
The following are examples of Blueline in action, and can be used as a starting point for your project.
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.
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.
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.
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.