Getting Started

Scripts

NPM scripts are included for developing and building to production.

CommandDescription
npm run devRuns airframe in development mode: hot reloads scripts and styles and auto-refreshes template changes. After running, open http://localhost:8080 in a browser to view your project.
npm run buildBuilds airframe for production: optimizes the build for best performance, including filename hashing for long-term caching.

Building

Layout

Grid

The airframe grid system consists of 12 columns. The variables that dictate the grid width and column spacing can be found in assets/layout.css.

Configuration Variables

VariableDescriptionDefault
--l--grid-widthGrid Width70rem
--l--gutterGutter width2%

Utility Classes

ClassDescriptionPossible Values
.l--containerContainer element
.l--rowRow element
.l--col-{number}Column element1-12 or "auto"

1/2 column
1/2 column
1/3 column
1/3 column
1/3 column
1/4 column
1/4 column
1/4 column
1/4 column
<div class="l--container t--align-center">
    <div class="l--row l--pad-btm-s">
        <div class="l--col-6 c--bg-gray-lighter">1/2 column</div>
        <div class="l--col-6 c--bg-gray-lighter">1/2 column</div>
    </div>
    <div class="l--row l--pad-btm-s">
        <div class="l--col-4 c--bg-gray-lighter">1/3 column</div>
        <div class="l--col-4 c--bg-gray-lighter">1/3 column</div>
        <div class="l--col-4 c--bg-gray-lighter">1/3 column</div>
    </div>
    <div class="l--row l--pad-btm-s">
        <div class="l--col-3 c--bg-gray-lighter">1/4 column</div>
        <div class="l--col-3 c--bg-gray-lighter">1/4 column</div>
        <div class="l--col-3 c--bg-gray-lighter">1/4 column</div>
        <div class="l--col-3 c--bg-gray-lighter">1/4 column</div>
    </div>
</div>

Responsive utilities

Grid classes can be modified at various breakpoints using responsive utility classes. The breakpoints are set in assets/layout.css.

VariableDescriptionDefault
--mq-lMedia query for large screenswidth > 1024px
--mq-mMedia query for medium screenswidth <= 1024px
--mq-sMedia query for small screenswidth <= 768px

Responsive utilities can be used instead of declaring a default column size, or in addition to a default column size; this allows you to create mobile-first or desktop-first layouts.

ClassPossible Values
.l--col-{number}-at-{size}number: 1-12 or "auto"
size: s, m, or l

1/2 at large and medium sizes, full-width at small sizes.
1/2 at large and medium sizes, full-width at small sizes.
<div class="l--container t--align-center">
    <div class="l--row">
        <div class="l--col-6 l--col-12-at-s c--bg-gray-lighter l--mar-btm-s">
            1/2 at large and medium sizes, full-width at small sizes.
        </div>
        <div class="l--col-6 l--col-12-at-s c--bg-gray-lighter l--mar-btm-s">
            1/2 at large and medium sizes, full-width at small sizes.
        </div>
    </div>
</div>

Spacing

Spacing can be achieved by adding either margin or padding utility classes to an element. The spacing variables can be edited in assets/layout.css.

Configuration Variables

VariableDescriptionDefault
--l--space-lLarge spacing4 rem
--l--space-mMedium spacing2 rem
--l--space-sSmall spacing1 rem

Utility Classes

ClassDescriptionPossible Values
.l--pad-{size}Even paddingl, m, s
.l--mar-{size}Even marginsl, m, s
.l--pad-{side}-{size}Padding on one sideside: top, right, btm, left
size: l, m, s
.l--mar-{side}-{size}Margin on one sideside: top, right, btm, left
size: l, m, s

Typography

Utility Classes

Family

Type comes in three families, set by variables in assets/type.css. By default, the body element is set to sans.

Serif text
Sans text
Monospace text
<div class="t--family-serif">Serif text</div>
<div class="t--family-sans">Sans text</div>
<div class="t--family-mono">Monospace text</div>

Size

Type comes in 4 sizes, set by a modular scale. The variables that dictate each size are set in assets/type.css.

VariableDescriptionDefault
--t--base-sizeBase Font Size16px
--t--base-leadingBase Line Height1.6

XLarge text
Large text
Normal text
Small text
<div class="t--size-xl">XLarge text</div>
<div class="t--size-l">Large text</div>
<div class="t--size-m">Normal text</div>
<div class="t--size-s">Small text</div>

Type utilities also come in a modular scale flavor.

VariableDescriptionDefault
--ms-baseBasis for modular scale1rem
--ms-ratioRatio of modular scale sizes1.5

XLarge text
Large text
Normal text
Small text
<div class="t--size-ms-xl">XLarge text</div>
<div class="t--size-ms-l">Large text</div>
<div class="t--size-ms-m">Normal text</div>
<div class="t--size-ms-s">Small text</div>

Weight

Type comes in 3 weights, set by the variables in assets/type.css.

Bold text
Normal text
Light text
<div class="t--weight-black">Black text</div>
<div class="t--weight-bold">Bold text</div>
<div class="t--weight-normal">Normal text</div>
<div class="t--weight-light">Light text</div>
<div class="t--weight-thin">Thin text</div>

Alignment

Alignment can be set using one of three Utility classes.

Left-aligned text
Center-aligned text
Right-aligned text
<div class="t--align-left">Left-aligned text</div>
<div class="t--align-center">Center-aligned text</div>
<div class="t--align-right">Right-aligned text</div></div>

Elements

Headings

Headings 1-4 are available as shorthand for commonly-used size, weight, and color styles. Feel free to style these as you wish.

Heading 1

Heading 2

Heading 3

Heading 4

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>

Paragraphs

Paragraph text is styled at the body level, with the exception of the addition of margin-bottom: 1rem for <p> tags.

Paragraph Text. We work with clients as partners and collaborators on the way to a shared goal. While projects vary and methods evolve, our work is always characterized by a commitment to a few fundamentals.

<p>
Paragraph Text. We work with clients as partners and collaborators 
on the way to a shared goal. While projects vary and methods evolve, 
our work is always characterized by a commitment to a few fundamentals.
</p>

Lists

By default, <ul> is styled with bullets and <ol> is styled with numerals. Additionally, there is a t--list-unstyled Utility class to remove styling from any list.

  • Unordered list
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
    • Nested list
    • Consectetur adipiscing elit
    • Integer molestie lorem at massa
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  1. Ordered List
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  • Unstyled List
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
<ul>
    <li>Unordered list</li>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Consectetur adipiscing elit</li>
    <ul>
        <li>Nested list</li>
        <li>Consectetur adipiscing elit</li>
        <li>Integer molestie lorem at massa</li>
    </ul>
    <li>Lorem ipsum dolor sit amet</li>
    <li>Consectetur adipiscing elit</li>
    <li>Integer molestie lorem at massa</li>
</ul>
<ol>
    <li>Ordered List</li>
    <li>Consectetur adipiscing elit</li>
    <li>Integer molestie lorem at massa</li>
</ol>
<ul class="t--list-unstyled">
    <li>Unstyled List</li>
    <li>Consectetur adipiscing elit</li>
    <li>Integer molestie lorem at massa</li>
</ul>

Block Quotes

The <blockquote> element is styled simply to provide differentiation from text.

Planetary helps us design, counsel, and build products for our and our clients' future.
<blockquote>
    Planetary helps us design, counsel, and build
    products for our and our clients' future.
</blockquote>

Code

Preformated text and code can be styled using the <pre> and <code> tags.

Preformatted text
Code text
<pre>Preformatted text</pre>
<code>Code text</code>

Colors

6 colors are provided. Each has two variants: lighter, light, dark, and darker.

Lighter Blue
Light Blue
Blue
Dark Blue
Darker Blue
Lighter Green
Light Green
Green
Dark Green
Darker Green
Lighter Yellow
Light Yellow
Yellow
Dark Yellow
Darker Yellow
Lighter Orange
Light Orange
Orange
Dark Orange
Darker Orange
Lighter Red
Light Red
Red
Dark Red
Darker Red
Lighter Purple
Light Purple
Purple
Dark Purple
Darker Purple

Utility Classes

Text Color

Text color can be set using the c--{color} Utility classes.

Red Text
Light Blue Text
Dark Green Text
<div class="c--red">Red Text</div>
<div class="c--blue-light">Light Blue Text</div>
<div class="c--green-dark">Dark Green Text</div>

Background Color

Background color can be set using the c--bg-{color} Utility classes.

Yellow Background
Light Orange Background
Dark Purple Background
<div class="c--bg-yellow">Yellow Background</div>
<div class="c--bg-orange-light">Light Orange Background</div>
<div class="c--bg-purple-dark c--white">Dark Purple Background</div>

Tables

Tables are styled with the fewest elements possible. For more styling, including text alignment and color, use Utility classes. For guidelines on how to style tables, read Design Better Data Tables.

FlavorInventorySales
Vanilla120$300.23
Chocolate20203.39
Pistachio139192.29
<table>
    <thead>
        <tr>
            <th>Flavor</th>
            <th class="t--align-right">Inventory</th>
            <th class="t--align-right">Sales</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Vanilla</td>
            <td class="t--align-right">120</td>
            <td class="t--align-right">$300.23</td>
        </tr>
        <tr>
            <td>Chocolate</td>
            <td class="t--align-right">20</td>
            <td class="t--align-right">203.39</td>
        </tr>
        <tr>
            <td>Pistachio</td>
            <td class="t--align-right">139</td>
            <td class="t--align-right">192.29</td>
        </tr>
    </tbody>
</table>

Forms

Base Elements

Most form elements have been normalized and can be used without the need for additional classes. This includes text-based inputs, such as search, password, textarea, number, and date fields.

<form>
    <label>
        <span>Name</span>
        <input type="text" placeholder="Enter your full name">
    </label>
    <label>
        <span>Birthday</span>
        <input type="date">
    </label>
    <label>
        <span>Password</span>
        <input type="password">
    </label>
    <label>
        <span>Search</span>
        <input type="search" placeholder="e.g. 'Puppies'">
    </label>
</form>

Styled Elements

Elements with differing browser chrome can be re-styled using classes. This includes radio buttons (.form--radio) and check boxes (.form--checkbox).

Flavor:
Toppings:
<form>
    <span class="l--mar-btm-s">Flavor:</span>
    <div class="form--radio">
        <label>
            <input type="radio" name="flavor" value="vanilla">
             Vanilla
        </label>
    </div>
    <div class="form--radio">
        <label>
            <input type="radio" name="flavor" value="chocolate">
             Chocolate
        </label>
    </div>
    <div class="form--radio">
        <label>
            <input type="radio" name="flavor" value="pistachio">
             Pistachio
        </label>
    </div>
    <span class="l--mar-btm-s">Toppings:</span>
    <div class="form--checkbox">
        <label>
            <input type="checkbox" value="sprinkles">
             Sprinkles
        </label>
    </div>
    <div class="form--checkbox">
        <label>
            <input type="checkbox" value="hot fudge">
             Hot Fudge
        </label>
    </div>
    <div class="form--checkbox">
        <label>
            <input type="checkbox" value="cherry on top">
             Cherry on Top
        </label>
    </div>
</form>