Grid

You're set with this 2 unit grid for mobile and 12 unit grid for desktop.

Simple structure

Creating a simple grid is easy. For mobile grids, use .units-* to specify the number of units that make up your column. If you want to take advantage of the twelve unit grid on desktops, use .lg-units-*. Wrapping your columns in the .column-group class guarantees clearing.

For mobile, each row is composed of a total of two units. For desktops, each row is made up of twelve units.

<!-- Mobile: Two single unit columns -->
<!-- Desktop: A five unit column and a seven unit column -->

<div class="container">
  <div class="column-group">
    <div class="column units-1 lg-units-5">…</div>
    <div class="column units-1 lg-units-7">…</div>
  </div>
</div>

You can also offset columns using .offset-1 on mobile and .lg-offset-* on desktop screens.

<!-- Mobile: One single unit column offset by one-->
<!-- Desktop: Ten unit column offset by two -->

<div class="container">
  <div class="column-group">
    <div class="column units-1 lg-units-10 offset-1 lg-offset-2">…</div>
  </div>
</div>

Typography

Chassis sets you up with basic headings, paragraphs, and blockquotes.

Headings

Use headings to title and give hierarchy to your content. Chassis gives you six heading sizes to choose from. <h1> through <h6>.

<h1>Heading 1</h1> <!-- 50px -->
<h2>Heading 2</h2> <!-- 40px -->
<h3>Heading 3</h3> <!-- 32px -->
<h4>Heading 4</h4> <!-- 22px -->
<h5>Heading 5</h5> <!-- 18px -->
<h6>Heading 6</h6> <!-- 14px -->

Body copy

The default paragraph font-size for body copy is 18px with a unit-less line-height of 1.5.

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo.</p>

Block quotes

Use a <blockquote> to call out quoted text and give credit to the author.

Example

This is my block quote. There are many like it, but this one is mine.

Connor Sears, Creator of Chassis

<blockquote>
  <p>This is my block quote. There are many like it, but this one is mine.</p>
  <small>Connor Sears, Creator of Chassis</small>
</blockquote>

Buttons

If a button is what you need, Chassis has you covered.

Basic buttons

Use a <button> when you want your users to take action on something. Remember, you can also add the button class to any <a> to style it as a button.

Example

Large button
Normal button
Small button

<button class="button button-large">Large button</button>
<button class="button">Normal button</button>
<button class="button button-small">Small button</button>

Block buttons

Add button-block to any button to make it span the full width of its parent element.

Example

Block button

<button class="button button-block">Block button</button>

Buttons with icons

Placing <i class="icon"> inside of a button allows you to add an icon. See icons to learn more.

Example

Large button
Normal button
Small button

<button class="button button-large"><i class="icon icon-export"></i> Large button</button>
<button class="button"><i class="icon icon-export"></i> Normal button</button>
<button class="button button-small"><i class="icon icon-export"></i> Small button</button>

Forms

Adding a <form> allows you to gather data directly from your users.

Example

<form>
  <input type="text" placeholder="Your name">
  <input type="search" placeholder="Search">

  <textarea rows="5"></textarea>

  <select>
    <option>…</option>
    <option>…</option>
    <option>…</option>
  </select>

  <label>
    <input type="checkbox" value="Check 1">
    <span>Here's a checkbox</span>
  </label>
  …
  <label>
    <input type="radio" name="radio-group" value="Radio 1">
    <span>Choose this option</span>
  </label>
  …
  <button type="submit" class="button">Submit</button>
</form>

Tables

If you need to display tabular data, using a <table> is your best option.

Example

<table>
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Comapany</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Connor</td>
      <td>Sears</td>
      <td>Pinterest</td>
    </tr>
  …
  </tbody>
</table>

Icons

The Entypo icon font by Daniel Bruce is included as the default icon set for Chassis. There are over 200 icons to choose from.

Use an icon by adding the corresponding class to <i class="icon icon-phone"></i>. The icon's size is determined by the parent element.

Example layouts

Take a look at these example layouts to get a feel for how Chassis works.