Getting Started

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.

To use Orangeline in your project, simply include the below links in your project. Orangeline is intended to be used in a somewhat uniform way for official Knight Lab pages. Make sure your follow the Parts of Page section for instructions on how to set up the rest of your page properly. See the rest of this guide for proper usage of the included components.

CSS and Favicons

Include the following in the <head> of your page.

                
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!-- CSS -->
<link rel="stylesheet" href="https://cloud.webtype.com/css/d4767ecb-457a-4677-8761-72f890add836.css"/>
<link rel="stylesheet" href="https://cdn.knightlab.com/libs/orangeline/latest/css/orangeline.min.css"/>
<!-- /CSS -->

<!-- FAVICONS -->
<link rel="apple-touch-icon" sizes="180x180" href="https://cdn.knightlab.com/libs/orangeline/latest/assets/favicons/apple-touch-icon.png">
<link rel="icon" type="image/png" href="https://cdn.knightlab.com/libs/orangeline/latest/assets/favicons/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="https://cdn.knightlab.com/libs/orangeline/latest/assets/favicons/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="https://cdn.knightlab.com/libs/orangeline/latest/assets/favicons/manifest.json">
<link rel="mask-icon" href="https://cdn.knightlab.com/libs/orangeline/latest/assets/favicons/safari-pinned-tab.svg" color="#5bbad5">
<meta name="theme-color" content="#ffffff">
<!-- /FAVICONS -->
                
            

Metadata

You should also make sure you include appropriate metadata in the Include the following in the <head> of your page. Make sure you provide a brief and accurate description of the page, as well as a title and a suitable image. This is the metadata that shows up in places like facebook and twitter when someone shares a link to your page.

                
<title>TITLE OF PAGE</title>
<!-- Meta -->
<meta name="keywords" content="Keywords, separated, by, commas">
<meta name="description" content="DESCRIPTION OF PAGE CONTENT">
<!-- /Meta -->

<!-- Open Graph -->
<meta property="og:type" content="article" />
<meta property="og:title" content="TITLE OF PAGE" />
<meta property="og:description" content="DESCRIPTION OF PAGE CONTENT" />
<meta property="og:image" content="LINK TO THE IMAGE FILE" />
<meta property="og:url" content="PERMALINK" />
<meta property="og:site_name" content="SITE NAME" />
<!-- /Open Graph -->

<!-- Twitter Card -->
<meta name="twitter:title" content="TITLE OF PAGE">
<meta name="twitter:description" content="DESCRIPTION OF PAGE CONTENT">
<meta name="twitter:image" content="LINK TO IMAGE">
<meta name="twitter:site" content="@knightlab">
<meta name="twitter:creator" content="@your_twitter_handle">
<!-- /Twitter Card -->
                
            

JavaScript

At the bottom of your page you should include the Knight Lab footer. This also includes a link to the Orangeline JavaScript file.

If you are not creating a page for the Knight Lab website and don't need the official footer, you can just include the JavaScript file below right before the close of your </body>

            
<script src="https://cdn.knightlab.com/libs/orangeline/latest/js/main.js"></script>
            
        

Parts of a Page

When making a page for the Knight Lab website, each page should not only include the information from Getting Started but it should also have the following pieces:

  • Immediately at the top of the <body> add Product Navbar
  • Add an appropriate header for the page type you are creating.
  • After the header include an <article id="page-body"> and design your page using the grid system and components detailed below.
  • Right before the close of the </body> make sure you've included the <footer> as documented on the Branding page.