Skip to main content Accessibility Feedback

Components

Keel is built with Kraken.

Branding Elements

These are the default colors and typefaces in Keel. Update them to suite your project.

Colors

#0088cc
#808080
#e5e5e5
#ffffff
#272727

Font Stacks

Helvetica Neue, Arial, sans-serif

Menlo, Monaco, Courier New, monospace


The Grid

Keel uses a fluid, mobile-first grid system based on simple fractions—halves, thirds, and fourths. It supports nesting, and includes special classes for offsets, content choreography, and dynamic grids.

The Base Grid

The .container class centers content on the page and restricts it to a maximum width. To create a grid, add a <div> with a .row class. You can create grids within a row by creating <div> elements with the .grid-$size class.

.grid-third
.grid-two-thirds
.grid-fourth
.grid-three-fourths
.grid-half
.grid-half
.grid-full
<div class="container">

    <p>Keel uses a fluid, mobile-first grid system...</p>

    <div class="row">
        <div class="grid-third">.grid-third</div>
        <div class="grid-two-thirds">.grid-two-thirds</div>
    </div>

    <div class="row">
        <div class="grid-fourth">.grid-fourth</div>
        <div class="grid-three-fourths">.grid-three-fourths</div>
    </div>

    <div class="row">
        <div class="grid-half">.grid-half</div>
        <div class="grid-half">.grid-half</div>
    </div>

    <div class="row">
        <div class="grid-full">.grid-full</div>
    </div>

</div>

Offsets

Push grids to the right by adding an .offset-$size class. Center grids with the .float-center class.

.grid-three-fourths .offset-fourth
.grid-third
.grid-third .offset-third
.grid-two-thirds .float-center
<div class="row">
    <div class="grid-three-fourths offset-fourth">.grid-three-fourths .offset-fourth</div>
</div>

<div class="row">
    <div class="grid-third">.grid-third</div>
    <div class="grid-third offset-third">.grid-third .offset-third</div>
</div>

<div class="row">
    <div class="grid-two-thirds float-center">.grid-two-thirds .float-center</div>
</div>

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, 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
Extra Small Screens
<div class="row row-start-xsmall">
    <div class="grid-fourth">.grid-fourth</div>
    <div class="grid-fourth">.grid-fourth</div>
    <div class="grid-fourth">.grid-fourth</div>
    <div class="grid-fourth">.grid-fourth</div>
</div>

Small Screens
<div class="row row-start-small">
    <div class="grid-fourth">.grid-fourth</div>
    <div class="grid-fourth">.grid-fourth</div>
    <div class="grid-fourth">.grid-fourth</div>
    <div class="grid-fourth">.grid-fourth</div>
</div>

Content Choreography

Flip the order of a grid on bigger screens by adding the .grid-flip class.

First in HTML
Second in HTML
<div class="row">
    <div class="grid-third grid-flip">First in HTML</div>
    <div class="grid-two-thirds">Second in HTML</div>
</div>

Dynamic Grids

Create grids that vary in size based on screen width using the .grid-dynamic class—great for creating images galleries! For content that may vary in height, you may want to use the Right Height add-on.

If you’re working with the source files, you easily adjust the grid breakpoints and even create additional grids with different layout patterns.

<div class="row">
    <div class="grid-dynamic"><img src="emu.jpg"></div>
    <div class="grid-dynamic"><img src="emu.jpg"></div>
    <div class="grid-dynamic"><img src="emu.jpg"></div>
    <div class="grid-dynamic"><img src="emu.jpg"></div>
    <div class="grid-dynamic"><img src="emu.jpg"></div>
    <div class="grid-dynamic"><img src="emu.jpg"></div>
    <div class="grid-dynamic"><img src="emu.jpg"></div>
    <div class="grid-dynamic"><img src="emu.jpg"></div>
    <div class="grid-dynamic"><img src="emu.jpg"></div>
    <div class="grid-dynamic"><img src="emu.jpg"></div>
    <div class="grid-dynamic"><img src="emu.jpg"></div>
    <div class="grid-dynamic"><img src="emu.jpg"></div>
</div>

Typography

Keel 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.

Text Basics

Default text
Muted text
Small text
Large text
Hyperlinks
Bold and italics

Default text
<span class="text-muted">Muted text</span>
<span class="text-small">Small text</span>
<span class="text-large">Large text</span>
<a href="#">Hyperlinks</a>
<strong>Bold</strong> and <em>italics</em>

Because Keel uses relative sizing, you should always apply .text-tall 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

Keel includes styling for ordered, unordered, unstyled, 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.
Ordered
<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>

Unordered
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

Unstyled
<ul class="list-unstyled">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

Inline
<ul class="list-inline">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>

<dl>
    <dt>Definition List</dt>
    <dd>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).</dd>

    <dt>Here's another term</dt>
    <dd>And here's the definition that would go with it.</dd>
</dl>

For semantic reasons, .list-unstyled and .list-inline should only be applied to unordered lists.


Headings

Keel 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
<h1>h1. Heading 1</h1>
<h2>h2. Heading 2</h2>
<h3>h3. Heading 3</h3>
<h4>h4. Heading 4</h4>
<h5>h5. Heading 5</h5>
<h6>h6. Heading 6</h6>

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

<h1 class="h4 text-left">This is an h1 heading that's styled as an h4 heading</h1>

Quotes and 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.

<blockquote>
    Someone once said something so important, it was deemed worthy of repeating here in the form of a blockquote. This is that blockquote.
    <cite>- Someone Important</cite>
</blockquote>

You can also include superscripts<sup>1</sup> and subscripts<sub>xyz</sub>.

Code

Inline code: .js-example.

/* Preformatted Text */
.js-example {
    color: #272727;
    background: #ffffff;
}
<p>Inline code: <code>.js-example</code></p>

<pre>
    <code>
        /* Preformatted Text */
        .js-example {
            color: #272727;
            background: #ffffff;
        }
    </code>
</pre>

You’ll need to escape brackets contained in code by typing &lt; for < and &gt; for >. The syntax highlighting used in this documentation is provided by Prism by Lea Verou.


Lines

Add lines to your markup using the <hr> 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 <input type="submit"> elements for the best rendering.

Basic Buttons

<button class="btn">Button</button>
<button class="btn btn-ghost">Button Secondary</button>
<button class="btn btn-large">Button Large</button>

<button class="btn btn-block">Button Block</button>
<button class="btn btn-secondary btn-block">Button Block</button>

Active and Disabled Buttons

Use .active and .disabled classes to change the appearance of buttons—useful for creating apps.

<button class="btn active">Active</button>
<button class="btn disabled">Disabled</button>

Tables

Keel includes simple, easy-to-read table styling.

First NameLast NameSuper Hero
PeterParkerSpiderman
BruceWayneBatman
ClarkKentSuperman
<table>
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Super Hero</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Peter</td>
            <td>Parker</td>
            <td>Spiderman</td>
        </tr>
        <tr>
            <td>Bruce</td>
            <td>Wayne</td>
            <td>Batman</td>
        </tr>
        <tr>
            <td>Clark</td>
            <td>Kent</td>
            <td>Superman</td>
        </tr>
    </tbody>
</table>

Condensed Table

Add the .table-condensed class for more compact tables.

First NameLast NameSuper Hero
PeterParkerSpiderman
BruceWayneBatman
ClarkKentSuperman
<table class="table-condensed">
    ...
</table>

Zebra Striping

Add zebra striping for easier readability with the .table-striped class.

First NameLast NameSuper Hero
PeterParkerSpiderman
BruceWayneBatman
ClarkKentSuperman
<table class="table-striped">
    ...
</table>

Responsive Table

Add the .table-responsive class for tables that reformat on smaller viewports. Use the [data-label] data attribute to apply the label that displays on smaller viewports.

First NameLast NameSuper Hero
PeterParkerSpiderman
BruceWayneBatman
ClarkKentSuperman
<table class="table-responsive">
    <thead>
        <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Super Hero</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-label="First Name">Peter</td>
            <td data-label="Last Name">Parker</td>
            <td data-label="Super Hero">Spiderman</td>
        </tr>
        ...
    </tbody>
</table>

Combining Classes

Classes can be combined as needed.

First NameLast NameSuper Hero
PeterParkerSpiderman
BruceWayneBatman
ClarkKentSuperman
<table class="table-condensed table-striped table-responsive">
    ...
</table>

Forms

Labels, legends and inputs are styled as full width block elements (with the exception of checkboxes and radio buttons).

Basic Forms

<form>
    <label>Label</label>
    <input type="text">
    <label>
        <input type="checkbox">
        Option 1
    </label>
    <label>
        <input type="checkbox">
        Option 2
    </label>
    <label>
        <input type="radio" name="radioset">
        Option 1
    </label>
    <label>
        <input type="radio" name="radioset">
        Option 2
    </label>
    <select>
        <option>Select 1</option>
        <option>Select 2</option>
        <option>Select 3</option>
    </select>
    <textarea></textarea>
</form>

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.

<form>
    <div class="row">
        <div class="grid-fourth">
                <label>Name</label>
        </div>
        <div class="grid-three-fourths">
                <input type="text">
        </div>
    </div>
    <div class="row">
        <div class="grid-fourth">
                <label>Message</label>
        </div>
        <div class="grid-three-fourths">
                <textarea></textarea>
        </div>
    </div>
    <div class="row">
        <div class="grid-three-fourths offset-fourth">
            <button class="btn btn-blue">Submit</button>
        </div>
    </div>
</form>

Condensed & Inline Inputs

For smaller forms, add the .input-condensed class to your input fields. For inline form elements, add the .input-inline class.



<form>
    <input type="text" class="input-inline">
    <input type="text" class="input-condensed input-inline">
</form>

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.

<input type="text" class="input-inline input-search no-margin-bottom" id="search" name="search" placeholder="Search this site..." value="">
<button type="submit" class="btn-search" id="searchsubmit">
    <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 32 32"><path d="M31.008 27.23l-7.58-6.446c-.784-.705-1.622-1.03-2.3-.998C22.92 17.69 24 14.97 24 12 24 5.37 18.627 0 12 0S0 5.37 0 12c0 6.626 5.374 12 12 12 2.973 0 5.692-1.082 7.788-2.87-.03.676.293 1.514.998 2.298l6.447 7.58c1.105 1.226 2.908 1.33 4.008.23s.997-2.903-.23-4.007zM12 20c-4.418 0-8-3.582-8-8s3.582-8 8-8 8 3.582 8 8-3.582 8-8 8z"/></svg>
    <span class="icon-fallback-text">Search</span>
</button>

Keel uses the wp_nav_menu() function to let users generate their own navigation menus.

The header menu is powered by Astro, and can be found in the nav-main.php template file. It uses the following markup structure:

<nav class="nav-wrap-navbar nav-collapse">
    <a class="logo-navbar" href="#">My Brand</a>
    <a class="nav-toggle-navbar" data-nav-toggle="#nav-menu" href="#">Menu</a>
    <div class="nav-menu-navbar" id="nav-menu">
        <ul class="nav-navbar">
            <li><a href="#">Home</a></li>
            <li><a href="#">About</a></li>
        </ul>
    </div>
</nav>

Dropdown menus are powered by Drop, and use the following markup structure:

...
    <li class="menu-item-has-children">
        <a href="#">
            Dropdown 1
        </a>
        <ul class="sub-menu">
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
        </ul>
    </li>

    <li class="menu-item-has-children">
        <a href="#">
            Dropdown 2
        </a>
        <ul class="sub-menu">
            <li><a href="#">Item 1</a></li>
            <li><a href="#">Item 2</a></li>
            <li><a href="#">Item 3</a></li>
        </ul>
    </li>
...

SVGs

Keel includes SVG detection that adds an .svg class to the html element when supported. The build system optimizes SVGs, and can also generate SVG sprites from individual SVG files.

Use the .icon class hide SVGs on unsupported browsers, and the .icon-fallback-text class to display fallback text in it’s place.

Inline SVGs

Open the SVG file in your text editor of choice, and then literally copy and paste the content from the file into your markup.

<svg class="icon">...</svg>
<span class="icon-fallback-text">Descriptive Text</span>

SVG Sprites

Add the contents of your sprite to the markup in a hidden container directly after the opening <body> tag.

<div hidden>
    <svg>...</svg>
</div>

To use an icon, simply reference its ID using the <use> element.

<svg class="icon">
    <use xlink:href="#icon-logo"></use>
</svg>
<span class="icon-fallback-text">My Awesome Website</span>

External SVG sprites

Instead of embedding, you can link to the SVG as an external file. However, this method is not supported in Internet Explorer and requires you to use svg4everybody, a JavaScript polyfill. I’ve also found that inlining the sprite results in faster peceived performance.

While this will gain you some browser caching benefits, I’ve found that perceived load times are better using the inlined sprite approach, as the icons are rendered immediately.

Learn more about using SVGs.


Alignment, Spacing & Visibility

You can adjust text alignment, spacing, and visibility using a few simple CSS classes.

Text Alignment

ClassAlignment
.text-leftLeft
.text-centerCentered
.text-rightRight
.text-right-mediumRight above 40em

Floats

ClassFloat
.float-leftLeft
.float-centerCentered
.float-rightRight

Clear floats by wrapping floated content in a <div> with the .clearfix class.

<div class="clearfix">
    <button class="float-right">Floated to the Right</button>
    <button>Not floated</button>
</div>

Margins

ClassMargin
.no-margin-toptop: 0
.no-margin-bottombottom: 0
.margin-toptop: 1.5625em
.margin-bottombottom: 1.5625em
.margin-bottom-smallbottom: 0.5em
.margin-bottom-largebottom: 2em

Padding

Classpadding
.no-padding-toptop: 0
.no-padding-bottombottom: 0
.padding-toptop: 1.5625em
.padding-top-smalltop: 0.5em
.padding-top-largetop: 2em
.padding-bottombottom: 1.5625em
.padding-bottom-smallbottom: 0.5em
.padding-bottom-largebottom: 2em

Visibility

Hide content using the [hidden] attribute.

<div hidden>This is removed from the markup.</div>

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 .screen-reader class.

<form>
    <label class="screen-reader">Search this site</label>
    <input type="text" placeholder="Search this site...">
    <input type="submit">
</form>

For visually hidden content that should become visible on focus (such as a skip nav link for sighted users navigating by keyboard), add the .screen-reader-focusable class.

<a class="screen-reader screen-reader-focusable" href="#main">Skip to content</a>