Skip Navigation
# Components ## The Grid Kraken uses a fluid, mobile-first grid system powered by flexbox and based on simple fractions—halves, thirds, and fourths. It supports nesting, and includes special classes for offsets and content choreography. ### The Base Grid The `.container` class centers content on the page and restricts it to a maximum width. To create a grid, add a `
` with a `.row` class. You can create grids within a row by creating `
` elements with the `.grid-$size` class. The `.grid-auto` class will scale the content to fit whatever space is available.
.grid-auto
.grid-auto
.grid-auto
.grid-auto
.grid-auto
.grid-third
.grid-two-thirds
.grid-fourth
.grid-three-fourths
.grid-half
.grid-half
.grid-full
```html

Kraken uses a fluid, mobile-first grid system...

.grid-auto
.grid-auto
.grid-auto
.grid-auto
.grid-auto
.grid-third
.grid-two-thirds
.grid-fourth
.grid-three-fourths
.grid-half
.grid-half
.grid-full
``` ### Offsets Push grids to the right by adding an `.offset-$size` class.
.grid-three-fourths .offset-fourth
.grid-third
.grid-third .offset-third
```html
.grid-three-fourths .offset-fourth
.grid-third
.grid-third .offset-third
``` ### Alignment Align content at the beginning of the row by adding the `.row-start` class, to the end of the row by adding the `.row-end` class, and in the center by adding the `.row-center` class.
.row-start > .grid-half
.row-center > .grid-half
.row-end > .grid-half
```html
.row-start > .grid-half
.row-center > .grid-half
.row-end > .grid-half
``` Align content at the top by adding the `.row-top` class, in the middle with the `.row-middle` class, and at the bottom with the `.row-bottom` class.

.row-top > .grid-third

.row-top > .grid-third

.row-top > .grid-third


.row-middle > .grid-third

.row-middle > .grid-third

.row-middle > .grid-third


.row-bottom > .grid-third

.row-bottom > .grid-third

.row-bottom > .grid-third

```html

.grid-third

.grid-third

.grid-third


.grid-third

.grid-third

.grid-third


.grid-third

.grid-third

.grid-third

``` ### Grids on Small Screens The grid activates on medium-sized screens by default. You can toggle the grid on smaller screens by adding a simple class-`.row-start-xsmall` or `.row-start-small`-to the desired `.row` element. If you're [working with the source files](setup.html#working-with-the-source-files), you can also easily customize when the grid activates by default and adjust or add additional `.row-start-$size` classes. **Extra Small Screens**
.grid-fourth
.grid-fourth
.grid-fourth
.grid-fourth
**Small Screens**
.grid-fourth
.grid-fourth
.grid-fourth
.grid-fourth
```html Extra Small Screens
.grid-fourth
.grid-fourth
.grid-fourth
.grid-fourth
Small Screens
.grid-fourth
.grid-fourth
.grid-fourth
.grid-fourth
``` ### Content Choreography You can flip the order of grid items on bigger screens with a series of helper classes. Add the `.grid-first` class to move content to the beginning of a row, and the `.grid-last` class to move it to the end. Add the `.row-reverse` class to reverse the entire order of content in a row.
1
2
3
1
2
3
1
2
3
```html
1
2
3
1
2
3
1
2
3
``` ### Wrapping Grids You can create grids that dynamically wrap content based on available spacing by adding the `.row-wrap` class and using the `.grid-auto` class. The content inside each grid also needs to have a `width` or `max-width` assigned to it.

placeholder graphic

placeholder graphic

placeholder graphic

placeholder graphic

placeholder graphic

placeholder graphic

placeholder graphic

placeholder graphic

placeholder graphic

placeholder graphic

placeholder graphic

placeholder graphic

```html

placeholder graphic

placeholder graphic

placeholder graphic

placeholder graphic

placeholder graphic

placeholder graphic

placeholder graphic

placeholder graphic

placeholder graphic

placeholder graphic

placeholder graphic

placeholder graphic

```
## Typography Kraken uses relative sizing (ems and %, not pixels) for everything. The `body` has a base `font-size` of `100%`, which is `16px` on browsers with default font settings. All other sizes are in ems. Changing the `font-size` on the `body` element will adjust the typographical scale for the entire site.

*New to relative sizing? [Learn more.](http://gomakethings.com/working-with-relative-sizing/)* ### Text Basics Default text
Muted text
Small text
Large text
Hyperlinks
Bold, italics, and strikethrough
Highlighted text ```html Default text Muted text Small text Large text Hyperlinks Bold, italics, and strikethrough Highlighted text ``` _Because Kraken uses relative sizing, you should always apply `.text-large` and `.text-small` classes to a `span` element and not directly to a `p`. Otherwise, your spacing will get all messed up. The `.text-*` classes can be found in `_overrides.scss` for better cascade inheritance._
## Lists Kraken includes styling for ordered, unordered, unstyled, inline, and definition lists.
Ordered
  1. Item 1
  2. Item 2
  3. Item 3
Unordered
  • Item 1
  • Item 2
  • Item 3
Unstyled
  • Item 1
  • Item 2
  • Item 3
Inline
  • Item 1
  • Item 2
  • Item 3
Definition List
Encloses a list of pairs of terms and descriptions. Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs).
Here's another term
And here's the definition that would go with it.
```html Ordered
  1. Item 1
  2. Item 2
  3. Item 3
Unordered
  • Item 1
  • Item 2
  • Item 3
Unstyled
  • Item 1
  • Item 2
  • Item 3
Inline
  • Item 1
  • Item 2
  • Item 3
Definition List
Encloses a list of pairs of terms and descriptions. Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs).
Here's another term
And here's the definition that would go with it.
``` *For semantic reasons, `.list-unstyled` and `.list-inline` should only be applied to unordered lists.*
## Headings Kraken includes styling for `h1` through `h6` headings.

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6
```html

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5
h6. Heading 6
``` ### Semantic Heading Classes All heading values can also be applied as classes. For example, if a heading should be an `h1` element semantically, but you would like it to be styled as an `h4` element, you can apply `class="h4"` to the `h1` element.

This is an h1 heading that's styled as an h4 heading

```html

This is an h1 heading that's styled as an h4 heading

```
## Quotes & Citations
Someone once said something so important, it was deemed worthy of repeating here in the form of a blockquote. This is that blockquote. - Someone Important
You can also include superscripts1 and subscriptsxyz. ```html
Someone once said something so important, it was deemed worthy of repeating here in the form of a blockquote. This is that blockquote. - Someone Important
You can also include superscripts1 and subscriptsxyz. ```
## Code Inline code: `.js-example`. ``` /* Preformatted Text */ .js-example { color: #272727; background: #ffffff; } ``` ```html

Inline code: .js-example

/* Preformatted Text */
.js-example {
	color: #272727;
	background: #ffffff;
}
``` You'll need to escape brackets contained in code by typing `<` for `<` and `>` for `>`. The syntax highlighting used in this documentation is provided by [Prism](http://prismjs.com/) by Lea Verou.
## Lines Add lines to your markup using the `
` element.
## Buttons Button styles can be applied to anything with the `.btn` class applied. However, typically you'll want to apply these to only `a`, `button`, and `` elements for the best rendering. ### Basic Buttons ```html ``` ### Active and Disabled Buttons Use the `.active` class and `[disabled]` attribute to change the appearance of buttons—useful for creating apps. ```html ```
## Tables Kraken includes simple, easy-to-read table styling.
First Name Last Name Super Hero
Peter Parker Spiderman
Bruce Wayne Batman
Clark Kent Superman
```html
First Name Last Name Super Hero
Peter Parker Spiderman
Bruce Wayne Batman
Clark Kent Superman
``` ### Condensed Table Add the `.table-condensed` class for more compact tables.
First Name Last Name Super Hero
Peter Parker Spiderman
Bruce Wayne Batman
Clark Kent Superman
```html
``` ### Zebra Striping Add zebra striping for easier readability with the `.table-striped` class.
First Name Last Name Super Hero
Peter Parker Spiderman
Bruce Wayne Batman
Clark Kent Superman
```html
``` ### Combining Classes Classes can be combined as needed.
First Name Last Name Super Hero
Peter Parker Spiderman
Bruce Wayne Batman
Clark Kent Superman
```html
```
## Forms Labels, legends and inputs are styled as full width block elements (with the exception of checkboxes and radio buttons). ### Basic Forms
```html
``` *Wrap checkboxes and radio buttons inside a `label` to make them easier to click.* ### Form Layouts Use the grid system to add structure to your forms.
```html
``` ### Condensed & Inline Inputs For smaller forms, add the `.input-condensed` class to your input fields. For inline form elements, add the `.input-inline` class.
```html
``` ### Search Forms Apply special styling to search form elements using the `.input-search` and `.btn-search` classes. You'll also need to use the `.input-inline` class.
```html
```
## Alignment, Spacing & Visibility You can adjust text alignment, spacing, and visibility using a few simple CSS classes. ### Text Alignment | Class | Alignment | |-----------------------|------------------| | `.text-left` | Left | | `.text-center` | Centered | | `.text-right` | Right | | `.text-right-medium` | Right above 40em | ### Floats | Class | Float | |-----------------|----------| | `.float-left` | Left | | `.float-center` | Centered | | `.float-right` | Right | *Clear floats by wrapping floated content in a `div` with the `.clearfix` class.* ```html
``` ### Margins | Class | Margin | |------------------------|--------------------| | `.no-margin-top` | top: `0` | | `.no-margin-bottom` | bottom: `0` | | `.margin-top` | top: `1.5625em` | | `.margin-bottom` | bottom: `1.5625em` | | `.margin-bottom-small` | bottom: `0.5em` | | `.margin-bottom-large` | bottom: `2em` | ### Padding | Class | padding | |-------------------------|--------------------| | `.no-padding-top` | top: `0` | | `.no-padding-bottom` | bottom: `0` | | `.padding-top` | top: `1.5625em` | | `.padding-top-small` | top: `0.5em` | | `.padding-top-large` | top: `2em` | | `.padding-bottom` | bottom: `1.5625em` | | `.padding-bottom-small` | bottom: `0.5em` | | `.padding-bottom-large` | bottom: `2em` | ### Visibility Hide content using the `[hidden]` attribute. ```html ``` If you have text that you don't want displayed on screen, but that should still be in the markup for screen readers (for example, a search form label), simply apply the `.visually-hidden` class.

```html
``` For visually hidden content that should become visible on focus (such as a [skip nav link](http://webaim.org/techniques/skipnav/) for sighted users navigating by keyboard), add the `.focusable` class. ```html Skip to content ``` ## Tabindex & Focus Styles Focusable elements should *always* have `:focus` styles on them. You can customize them, but don't remove them altogether. If you need to programmatically add focus to an element that's not normally focusable (like a `div`), you need to give it a `tabindex` attribute of `-1`. However, this also applies `:focus` styles, which are likely not desired or needed in these rare edge cases. Kraken removes the default outline from items with `[tabindex="-1"]`. ```html Skip to content ...
...
```