Skip Navigation
# Getting Started ## Installation There are three ways to use Kraken with your project: 1. [Download Kraken directly from GitHub.](https://github.com/cferdinandi/kraken/archive/master.zip) 2. Clone Kraken from GitHub: `git@github.com:cferdinandi/kraken.git` 3. Install Kraken from GitHub using your favorite package manager: `npm install cferdinandi/kraken`
## Working with Sass Kraken's Sass files are located in the `src/sass` directory. The compiled CSS in the `dist` directory was built using my [Gulp Boilerplate](https://github.com/cferdinandi/gulp-boilerplate), but you can use any Sass-compiler or build process you want. ### File Structure - The `_config.scss` file contains all of the configuration options. - The `components` directory holds the styles for each of the individual component groups (typography, the grid, buttons, forms, etc.). - The `main.scss` file pulls the configurations and components together into a single file. ### `_config.scss` 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. ```scss // Colors $color-primary: #0088cc; $color-black: #272727; $color-white: #ffffff; $color-info: #0088cc; // Blue $color-success: #377f31; // Green $color-danger: #880e14; // Red $color-warning: #dba909; // Yellow $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; // Grid $grid-margins: 1.4%; $grid-sizes: ( // Grid width options // Add/remove grid's as needed // $name: $width // $name - {string} class suffix // $width - {string} width of the grid fourth: 25%, third: 33.33333333333%, half: 50%, two-thirds: 66.666666666667%, three-fourths: 75%, full: 100% ); $grid-breakpoints: ( // Breakpoints at which to activate grid // Add/remove breakpoints as needed // ($breakpoint, $prefix-class, $include-offsets) // $breakpoint - {string|variable} the breakpoint // $prefix-class - {string|optional} class to be used with `.row` to activate grid // $include-offsets - {boolean} if true, include offset classes at this breakpoint ($bp-xsmall, ".row-start-xsmall", false), ($bp-small, ".row-start-small", false), ($bp-medium, null, true), ); $grid-wrap: true; ```
## Working with CSS If you're more comfortable working in CSS, you can modify the `main.css` stylesheet in the `dist/css` 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