w8mngr | styleguide

Application Form

Forms for entering new data. Specifically-colored to ensure a consistent flow.

<div class="app-form">
  <form class="new_weight_entry" id="new_weight_entry" action="/weight_entries" accept-charset="UTF-8" method="post">
    <input type="hidden" value="20160802" name="weight_entry[day]" id="weight_entry_day">
    <div class="grid">
      <div class="row">
        <div class="col full">
          <input placeholder="e.g., 165 lbs, 83.9kg, 12 stone, etc." class="large" type="text" name="weight_entry[value]" id="weight_entry_value">
        </div>
      </div>
    </div>
    <div class="btn-bar">
      <div class="left"></div>
      <div class="right">
        <button name="button" type="submit" class="btn submit">
            <i class="fa fa-plus"></i>
            <strong>New Entry</strong>
        </button>
      </div>
    </div>
  </form>
</div>

Application Panel Form

Forms for editing data entered via the Application Form. We style this a different color than the entry form for two reasons:

  1. To deter editing, but not preclude it. It's easy to view in the format we want, but may not immediately indicate editing.

  2. To make it easy to understand that this data exists as a list, just like any other card and application panel.

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

Basic Inputs

<input type="text" value="An input form">

<input type="text" value="A large input form" class="large">

<input type="email" placeholder="And a placeholder">

<input type="password" placeholder="Password field">

<label for="number-field">With a Label</label>
<input type="number" value="24" placeholder="Number Field" id="number-field">

<textarea>This is a text area that allows...
...
..
/...
Multiline text!</textarea>

<select>
  <option>Select Box</option>
  <option>With Options!</option>
</select>

Checkbox List

A set of classes for creating a grouped list of checkboxes.

NB: To layout the ticks on your range slider, you must use inline styles.

Automatic Faturdays

These days will automagically be considered faturdays if you don't log calories by the end of the day. You can always go back and delete the faturday and log calories if you'd rather be specific.

<h3>Automatic Faturdays</h3>

<p>These days will automagically be considered faturdays if you don't log
calories by the end of the day. You can always go back and delete the
faturday and log calories if you'd rather be specific.</p>

<div class="faturday-days check-list">

  <input type="checkbox" name="faturday[]" id="f-mo" value="mo" checked="checked">
  <label for="f-mo">Monday</label>

  <input type="checkbox" name="faturday[]" id="f-tu" value="tu" checked="checked">
  <label for="f-tu">Tuesday</label>

  <input type="checkbox" name="faturday[]" id="f-we" value="we" checked="checked">
  <label for="f-we">Wednesday</label>

  <input type="checkbox" name="faturday[]" id="f-th" value="th" checked="checked">
  <label for="f-th">Thursday</label>

  <input type="checkbox" name="faturday[]" id="f-fr" value="fr" checked="checked">
  <label for="f-fr">Friday</label>

  <input type="checkbox" name="faturday[]" id="f-sa" value="sa" checked="checked">
  <label for="f-sa">Saturday</label>

  <input type="checkbox" name="faturday[]" id="f-su" value="su" checked="checked">
  <label for="f-su">Sunday</label>

</div>

Form Error Explanation

A set of classes for showing errors attached to certain forms.

Make an Account

  • Email can't be blank
  • Email is invalid
  • Password can't be blank

  • Value must be greater than 1359
<h1>Make an Account</h1>

<div class="error-explanation">
    <ul>
        <li>Email can't be blank</li>
        <li>Email is invalid</li>
        <li>Password can't be blank</li>
    </ul>
</div>

<label for="email">Email</label>
<input type="email" name="email" id="email">

<label for="password">Password</label>
<input type="password" name="password" id="password">

<label for="password_confirmation">Confirmation</label>
<input type="password" name="password_confirmation" id="password_confirmation">

<button name="button" type="submit" class="btn">
    Step 2: Calculate Your TDEE
</button>


<hr>


<div class="app-form">
  <div class="error-explanation">
    <ul>
      <li>Value must be greater than 1359</li>
    </ul>
  </div>
  <div class="field_with_errors">
    <input placeholder="e.g., 165 lbs, 83.9kg, 12 stone, etc." class="large" type="text" value="" name="weight_entry[value]" id="weight_entry_value">
  </div>
  <div class="btn-bar">
    <div class="left"></div>
    <div class="right">
      <button name="button" type="submit" class="btn submit">
          <i class="fa fa-plus"></i>
          <strong>New Entry</strong>
      </button>
    </div>
  </div>
</div>

Form Group

A divider made to specify groups of form items (really, just uses our spacing well).

Personal Info

For sending you personalized reminders...

Health

<div class="form-group">
  <h2>Personal Info</h2>
  <label>Email</label>
  <input type="text" placeholder="Email address">
  <label>Phone Number</label>
  <input type="text" placeholder="Phone number">
  <p class="form-info">For sending you personalized reminders...</p>
</div>
<div class="form-group">
  <h2>Health</h2>
  <label>Height</label>
  <input type="text" placeholder="Height">
  <label>Weight</label>
  <input type="text" placeholder="Weight">
</div>

Form Info

A block-level class for giving users information about the preceding form element.

Personal Info

For sending you personalized reminders...

<h2>Personal Info</h2>
<label>Email</label>
<input type="text" placeholder="Email address">
<label>Phone Number</label>
<input type="text" placeholder="Phone number">
<p class="form-info">For sending you personalized reminders...</p>

Form Well

A well made to indicate configuration of a specific form option or field group.

Ingredients

<div class="form-well">
  <h3>Ingredients</h3>
  <input type="text" placeholder="Ingredient name">
  <input type="text" placeholder="Ingredient name">
  <input type="text" placeholder="Ingredient name">
  <button class="btn small">Save Ingredients</button>
</div>

Radio Lists

Sex
<div class="radio-list">
    <span class="header">Sex</span>

    <input type="radio" name="sex" id="sex-f" value="f">
    <label for="sex-f">Female</label>

    <input type="radio" name="sex" id="sex-m" value="m" checked="checked">
    <label for="sex-m">Male</label>

    <input type="radio" name="sex" id="sex-na" value="na">
    <label for="sex-na">Other / Prefer Not to Disclose</label>
</div>

Range/Slider Group

A block-level set of classes for laying out sliders and providing description labels for certain points on the range.

NB: To layout the ticks on your range slider, you must use inline styles.

Light Walking
Weightlifting
Sprints
<div class="range-group">
  <label for="activity_intensity">Intensity</label>
  <input min="0" max="10" type="range" value="4" name="activity[intensity]" id="activity_intensity">
  <div class="locations">
    <div class="location-tick" style="left: 0">Light Walking</div>
    <div class="location-tick" style="left: 50%; transform: translateX(-50%);">Weightlifting</div>
    <div class="location-tick" style="right: 0">Sprints</div>
  </div>
</div>

Toggle Switch

A set of classes for creating a toggle switch. Can also be used to show otherwise-hidden panels when the toggle is activated.


And here I am!

<input type="checkbox" name="faturday_enabled" id="ep-faturday-enabled" value="true" class="helper-input toggle-switch" checked="checked">
<label for="ep-faturday-enabled">Toggle Faturdays</label>

<br>

<input type="checkbox" name="toggle_2" id="toggle-2" value="true" class="helper-input toggle-switch">
<label for="toggle-2">Toggle Me to Show a Panel</label>
<div class="helper-panel">
  <h2>And here I am!</h2>
</div>