w8mngr | styleguide

Application Form Buttons

Buttons that show on our primary-colored application forms. This includes different colors for icon buttons.

<div class="app-form food-entries grid">
  <div class="row">
    <div class="col full">
      <input type="text" placeholder="Description" autofocus="autofocus" id="description-input" class="large">
    </div>
  </div>
  <div class="row macros">
    <div class="col" title="Calories">
      <input type="text" placeholder="Calories">
    </div>
    <div class="col" title="Fat">
      <input type="text" placeholder="Fat">
    </div>
    <div class="col" title="Carbs">
      <input type="text" placeholder="Carbs">
    </div>
    <div class="col" title="Protein">
      <input type="text" placeholder="Protein">
    </div>
  </div>
  <div class="row">
    <div class="col full">
      <div class="btn-bar">
        <div class="left">
          <a class="btn-icon" alt="Make this day a Faturday!" title="Make this day a Faturday!">
            <i class="fa fa-birthday-cake" aria-hidden="true"></i>
            <span class="screen-reader-text">Faturday</span>
          </a>

        </div>
        <div class="right">
          <a class="btn-icon" alt="Scan Barcode" title="Scan Barcode" href="/search/foods?food_log_referrer=true">
            <i class="fa fa-barcode"></i>
            <span class="screen-reader-text">Scan Barcode</span>
          </a>
          <a class="btn-icon" alt="Search for Foods" title="Search for Foods" href="/search/foods?food_log_referrer=true">
            <i class="fa fa-search"></i>
            <span class="screen-reader-text">Search for Foods</span>
          </a>
          <button name="button" type="submit" class="btn btn-submit">
            <i class="fa fa-plus"></i>
            <strong>New Entry</strong>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

Button (Regular)

<a class="btn" href="#">Button</a>

<a class="btn" href="#">
    <i class="fa fa-cloud-download" aria-hidden="true"></i>
    Icon Button
</a>

<a class="btn disabled" href="#">Disabled Button</a>

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>

Giant Icon Buttons

Large icons for using in grids on mobile to show a large list of available logs to go to, primarily from the user dashboard.

<div class="grid arbitrary dashboard-buttons">
    <div class="row">

        <div class="col">
            <a class="btn-icon giant" href="/foodlog">
                <i class="fa fa-cutlery" aria-hidden="true"></i>
                <span class="text">Food Log</span>
            </a>
        </div>

        <div class="col">
            <a class="btn-icon giant" href="/foodlog">
                <i class="fa fa-balance-scale" aria-hidden="true"></i>
                <span class="text">Weight Log</span>
            </a>
        </div>

        <div class="col">
            <a class="btn-icon giant" href="/activities">
                <i class="fa fa-bolt" aria-hidden="true"></i>
                <span class="text">Activities</span>
            </a>
        </div>

        <div class="col">
            <a class="btn-icon giant" href="/routines">
                <i class="fa fa-retweet" aria-hidden="true"></i>
                <span class="text">Routines</span>
            </a>
        </div>

    </div>
</div>

Hero Button

A "hero" button for very large, typically promotional, action buttons.

<a class="btn hero" href="#">
    <i class="fa fa-cloud-download" aria-hidden="true"></i>
    Hero Button
</a>

Icon Button

Please keep in mind that you always need screen reader text on icon buttons. In addition, use verbose link titles!

<a class="btn-icon" href="#" title="Download your weight data">
    <i class="fa fa-cloud-download" aria-hidden="true"></i>
    <span class="screen-reader-text">Download your weight data</a>
</a>

<a class="btn-icon primary" href="#" title="Download your weight data">
    <i class="fa fa-cloud-download" aria-hidden="true"></i>
    <span class="screen-reader-text">Download your weight data</a>
</a>

<a class="btn-icon disabled" href="#" title="Download your weight data">
    <i class="fa fa-cloud-download" aria-hidden="true"></i>
    <span class="screen-reader-text">Download your weight data</a>
</a>

<a class="btn-icon delete" href="#" title="Delete weight 145lbs">
    <i class="fa fa-times" aria-hidden="true"></i>
    <span class="screen-reader-text">Delete weight 145lbs</a>
</a>

Meta Buttons

Meta buttons are displayed next to other buttons, but without borders, indicating certain drastic (yet explicity) actions, such as deletion.

<a href="#" class="btn-meta">Default Meta Button</a>

<a href="#" class="btn-meta delete">Delete Button</a>

Pagination Buttons

<div class="pagination btn-bar">
  <div class="left">
    <a class="btn prev" href="#" title="See the previous page of foods">
      <i class="fa fa-chevron-circle-left"></i> Back
      <span class="screen-reader-text">to Previous Foods</span>
    </a>
  </div>
  <div class="right">
    <a class="btn next" href="#" title="See more foods">
      More <i class="fa fa-chevron-circle-right"></i>
      <span class="screen-reader-text">Foods</span>
    </a>
  </div>
</div>

Pills

Pills are a list of very small buttons that have some sort of interaction. A classic example is tags.

Free-Standing Pill



And they can be used on dark backgrounds: Free-Standing Pill
<a href="#" class="pill">Free-Standing Pill</a>

<br><br>

<ul class="pill-list">
<li><a href="#" class="pill">Or</a></li>
<li><a href="#" class="pill">They</a></li>
<li><a href="#" class="pill">Can</a></li>
<li><a href="#" class="pill">Come</a></li>
<li><a href="#" class="pill">As</a></li>
<li><a href="#" class="pill">Lists</a></li>
</ul>

<br><br>

<div style="background:#222;padding:2rem;">
    <span style="color: white">And they can be used on dark backgrounds:</span>
    <a href="#" class="pill white">Free-Standing Pill</a>
</div>

Secondary Button

<a class="btn secondary" href="#">Button</a>
<a class="btn secondary" href="#">
    <i class="fa fa-cloud-download" aria-hidden="true"></i>
    Icon Button
</a>
<a class="btn secondary small" href="#">Small Secondary Button</a>

Small Button

<a class="btn small" href="#">Button</a>
<a class="btn small" href="#">
    <i class="fa fa-cloud-download" aria-hidden="true"></i>
    Icon Button
</a>
<a class="btn secondary small" href="#">Small Secondary Button</a>