w8mngr | styleguide

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>

Inline Messages

A set of classes for showing inline messages and errors.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<div class="message-inline">
  Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>

<div class="message-inline notify">
  Lorem ipsum dolor sit amet, <a href="#">consectetur adipiscing elit</a>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>