Scripts

NPM scripts are included for developing and building to production.

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

Utility Classes

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

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.

<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

Utility Classes

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.

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

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

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

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

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

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

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

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

<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

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

Colors

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