w8mngr | styleguide

Application Panels

Used to indicate some information that can be added to, subtracted from, or otherwise manipulated in the course of using our application. They are typically forms, but not always. They differ from cards in that they are always full-width.

A Simple Example

This is an example that's not much different from a card.

Complicated Example

<div class="app-panel">
  <div class="full meta">
    <a href="#" class="btn-icon delete" title="Delete Entry">
      <i class="fa fa-times"></i>
      <span class="screen-reader-text">Delete Entry</span>
    </a>
  </div>
  <h2>A Simple Example</h2>
  <p>This is an example that's not much different from a card.</p>
</div>

<h2>Complicated Example</h2>

<div class="foodlog app-panel app-panel-form">
  <div class="grid entry fl-fade-transition">
    <div class="full meta">
      <a href="#" class="btn-icon delete" title="Delete Entry">
        <i class="fa fa-times"></i>
        <span class="screen-reader-text">Delete Entry</span>
      </a>
    </div>
    <div class="row">
      <div class="col full">
        <input type="text" value="A food entry">
      </div>
    </div>
    <div class="row macros">
      <div class="col short" title="Calories">
        <input type="text" value="1">
      </div>
      <div class="col short" title="Fat">
        <input type="text" value="2">
      </div>
      <div class="col short" title="Carbs">
        <input type="text" value="3">
      </div>
      <div class="col short" title="Protein">
        <input type="text" value="4">
      </div>
    </div>
  </div><div class="grid entry fl-fade-transition">
    <div class="full meta">
      <a href="#" class="btn-icon delete" title="Delete Entry">
        <i class="fa fa-times"></i>
        <span class="screen-reader-text">Delete Entry</span>
      </a>
    </div>
    <div class="row">
      <div class="col full">
        <input type="text" value="Another Food Entry">
      </div>
    </div>
    <div class="row macros">
      <div class="col short" title="Calories">
        <input type="text" value="1">
      </div>
      <div class="col short" title="Fat">
        <input type="text" value="2">
      </div>
      <div class="col short" title="Carbs">
        <input type="text" value="3">
      </div>
      <div class="col short" title="Protein">
        <input type="text" value="4">
      </div>
    </div>
  </div>
</div>

Button Bar (for Layout)

Layout element for positioning buttons on the same horizontal line, but with some buttons arranged on the left side, the others on the right.

It can also be used to align buttons in the center if you skip the left and right divs.

<div class="btn-bar">
    <div class="left">
        <a href="" class="btn">Button</a>
        <a href="" class="btn secondary">on the Left</a>
    </div>
    <div class="right">
        <a href="" class="btn">Button</a>
        <a href="" class="btn secondary">on the Right</a>
    </div>
</div>

<p>Or...</p>

<div class="btn-bar">
    <a href="" class="btn">Buttons</a>
    <a href="" class="btn secondary">in the middle</a>
</div>

Grid

A very simple grid used for showing elements that need to be aligned in a specific way on desktop screens, but where the columns don't really need to be aligned in relation to one another (like a table).

By default, this grid is three-columns, but we can do things to make it slightly different with ease.

We don't include default breakfpoints here because grids are intended strictly for telling us how the default behavior should be on larger screens. Use breakpoints in custom page sheets and components to make these more fluid.

NB: This grid looks small because of the styleguide, but on a full screen, the spacing is more even. (We use a standard spacing for our column separations.)

Column 1
Column 2
Column 3
A full column
Column
A double column!
A half-length column!
And another!
1/4
1/4
1/4
1/4
1/4
Half!
1/4
a
Even Arbitrary/No-Width Columns!
a
a
a
a
a
a
a
a
<style>
  .example-grid { border: 1px solid red }
  .example-grid .row { border: 1px solid blue }
  .example-grid .col { border: 1px solid green; padding: .5rem; }
</style>

<div class="example-grid grid">

  <div class="row">
    <div class="col">
      Column 1
    </div>
    <div class="col">
      Column 2
    </div>
    <div class="col">
      Column 3
    </div>
  </div>

  <div class="row">
    <div class="col full">
      A full column
    </div>
  </div>

  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col double">
      A double column!
    </div>
  </div>

  <div class="row">
    <div class="col half">
      A half-length column!
    </div>
    <div class="col half">
      And another!
    </div>
  </div>

  <div class="row quarters">
    <div class="col">
      1/4
    </div>
    <div class="col">
      1/4
    </div>
    <div class="col">
      1/4
    </div>
    <div class="col">
      1/4
    </div>
  </div>

  <div class="row quarters">
    <div class="col">
      1/4
    </div>
    <div class="col half">
      Half!
    </div>
    <div class="col">
      1/4
    </div>
  </div>

  <div class="row arbitrary">
    <div class="col">a</div>
    <div class="col">Even Arbitrary/No-Width Columns!</div>
    <div class="col">a</div>
  </div>

  <div class="row arbitrary">
    <div class="col">a</div>
    <div class="col">a</div>
    <div class="col">a</div>
    <div class="col">a</div>
    <div class="col">a</div>
    <div class="col">a</div>
    <div class="col">a</div>
  </div>

</div>

Helper Inputs

We use helper inputs to toggle things on and off using only CSS.

These are fully screen-reader-compatible, so should be widely accessible. They don't display:none, but instead position it absolutely using a max-height of 0px. Then, when shown, it reverts the element to static positioning and fades it in.

Here I am!
<label for="toggle">Click to Toggle</label>
<input type="checkbox" class="helper-input" id="toggle">
<span class="helper-panel">
  Here I am!
</span>

Tabs

Here, we use our helper inputs to create tabs. In the future, we'll use Javascript to make sure our tabs display corresponding to the selected tab.

This is Tab One

This is Tab Two

<div class="helper-tabs">
  <ul>
    <li><label for="tab-one">Tab One</label></li>
    <li><label for="tab-two">Tab Two</label></li>
  </ul>
</div>

<input type="radio" class="helper-input" name="tabs" id="tab-one" checked>
<div class="helper-panel">
  <h1>This is Tab One</h1>
</div>

<input type="radio" class="helper-input" name="tabs" id="tab-two">
<div class="helper-panel">
  <h1>This is Tab Two</h1>
</div>