Meet Airframe

Airframe allows you to rapidly prototype sites by providing a lightweight scaffold. It makes suggestions without being too prescriptive.

Download Files
$ git clone git@github.com:planetary/airframe
$ cd airframe
$ npm install
$ npm run dev
1. Download Files
2. Install Dependencies
3. Start Building

Grid System

1/2
1/2
1/3
1/3
1/3
<div class="l--container">
    <div class="l--row">
        <div class="l--col-6">1/2</div>
        <div class="l--col-6">1/2</div>
    </row>
    <div class="l--row">
        <div class="l--col-4">1/3</div>
        <div class="l--col-4">1/3</div>
        <div class="l--col-4">1/3</div>
    </div>
</div>

Form Reset

<div class="docs--example">
    <label>Text input
        <input type="text" placeholder="Text input">
    </label>
    <label>Select Input
        <div class="form--select">
            <select>
                <option>One</option>
                <option>Two</option>
                <option>Three</option>
            </select>
        </div>
    </label>
    <label>Textarea input
        <textarea></textarea>
    </label>
    <div class="form--checkbox">
        <label>
            <input type="checkbox">Checkbox Option 1
        </label>
    </div>
    <div class="form--checkbox">
        <label>
            <input type="checkbox">Checkbox Option 2
        </label>
    </div>
    <div class="form--radio">
        <label>
            <input type="radio">Radio Option 1
        </label>
    </div>
    <div class="form--radio">
        <label>
            <input type="radio">Radio Option 2
        </label>
    </div>
</div>

Type utilities

Both fickle dwarves
The wizard quickly jinxed the gnomes
Quilt frenzy jackdaw gave them best pox
Jim quickly realized that the beautiful gowns are expensive.
<div class="t--size-xl">
    Both fickle dwarves
</div>
<div class="t--size-l">
    The wizard quickly jinxed the gnomes
</div>
<div class="t--size-m">
    Quilt frenzy jackdaw gave them best pox
</div>
<div class="t--size-s">
    Jim quickly realized that the beautiful
    gowns are expensive.
</div>