Skip Navigation

Getting Started


There are three ways to use Kraken with your project:

  1. Download Kraken directly from GitHub.
  2. Clone Kraken from GitHub:
  3. Install Kraken from GitHub using your favorite package manager: npm install kraken-css

Working with Sass

Kraken's Sass files are located in the src/scss directory.

The compiled CSS in the dist directory can be built from the command line by running npm install, then npm run css, or using your favorite Sass compiler.

File Structure


The _config.scss file contains variables for all of the colors, font stacks, breakpoints, and sizing used in Kraken. It also contains settings for the grid.

// Colors
$color-primary: #0088cc;
$color-black: #272727;
$color-white: #ffffff;

$color-info: #0088cc;
$color-success: #377f31;
$color-danger: #880e14;
$color-warning: #dba909;
$color-code: #dd1144;

$color-gray-dark: #808080;
$color-gray-light: #e5e5e5;
$color-gray-lighter: #f7f7f7;

// Font Stacks
$font-primary: "Helvetica Neue", Arial, sans-serif;
$font-monospace: Menlo, Monaco, "Courier New", monospace;

// Breakpoints
$bp-xsmall: 20em;
$bp-small: 30em;
$bp-medium: 40em;
$bp-large: 60em;
$bp-xlarge: 80em;

// Sizing
$font-size: 100%;
$spacing: 1.5625em;
$container-width: 88%;
$container-max-width: 80em;

Working with CSS

If you're more comfortable working in CSS, you can modify the main.css stylesheet in the dist directory.

Page Width
The .container class sets the width for page content. Adjust the max-width property to set the maximum width of the page.
Font Stack
The body element sets the typeface for the entire set. By default, the font stack is Helvetica Neue, Arial, and sans-serif. The two exceptions are pre and code elements, which use a monospace stack. Adjust as desired.
Typographic Scale
Kraken uses a fluid typographic scale. You can scale the size of all site elements proportionately by adjusting the font-size property on the body element, which is set to 100% by default.
Colors (used throughout)
Primary: #0088cc
Black: #272727
White: #ffffff
Dark Gray: #808080
Light Gray: #e5e5e5
Lighter Gray: #f7f7f7
Breakpoints (used throughout)
Extra Small: 20em
Small: 30em
Medium: 40em
Large: 60em
Extra Large: 80em