forms

Forms

Forms are inline by default and pretty much ready-to-go. There's a few ways to extend a form or input to make life easier.

Default form
<form>
  <fieldset>
    <input placeholder="Email" type="text" /><input placeholder="Password" type="password" />
    <label class="line3">
      <input type="checkbox" class="checkbox" />Remember me
    </label>
    <button class="btn btn-primary" type="submit">Sign in</button>
  </fieldset>
</form>
Stacked form
<form class="form-stacked">
  <fieldset>
    <div class="mb1">
      <label>E-Mail</label>
      <input required=true type="email"></input>
      <aside>
        <em class="light">This is a required field.</em>
      </aside>
    </div>
    <div class="mb1">
      <label>State</label>
      <select>
        <option>Option Number 1</option>
        <option>2nd opt</option>
        <option>This is long option three</option>
        <option>Something 4</option>
        <option>five</option>
      </select>
    </div>
    <div class="mb1">
      <label>
        <input type="checkbox" class="checkbox"></input>
        I've read the terms and conditions
      </label>
    </div>
    <div class="mb1">
      <label>
        <input type="radio" class="radio"></input>
        I've read the terms and conditions
      </label>
    </div>
    <button class="btn btn-primary" type="submit">Submit</button>
    <button class="btn btn-link" type="reset">Reset</button>
  </fieldset>
</form>
Disabled form
<form class="form-stacked">
  <fieldset class="disabled">
    <div class="mb1">
      <label>E-Mail</label>
      <input required=true type="email" disabled></input>
      <aside>
        <em class="light">This is a required field.</em>
      </aside>
    </div>
    <div class="mb1">
      <label>State</label>
      <select disabled>
        <option>Option Number 1</option>
        <option>2nd opt</option>
        <option>This is long option three</option>
        <option>Something 4</option>
        <option>five</option>
      </select>
    </div>
    <div class="mb1">
      <label>
        <input type="checkbox" class="checkbox" disabled></input>
        I've read the terms and conditions
      </label>
    </div>
    <div class="mb1">
      <label>
        <input type="radio" class="radio" disabled></input>
        I've read the terms and conditions
      </label>
    </div>
    <button class="btn btn-primary" disabled type="submit">Submit</button>
    <button class="btn btn-link" disabled type="reset">Reset</button>
  </fieldset>
</form>

Customizing forms

Overwrite these variables in _custom_variables.scss to change these defaults.

$form-base-color:        $base-gray-dark !default;
$form-placeholder-color: lighten($base-gray,20%) !default;

$form-pad-v-base: 0.5rem !default;
$form-pad-h-base: 0.25rem !default;

$input-bg:           #fff !default;
$input-border-width: 1px !default;
$input-border-color: $base-gray-light !default;
$input-focus-bg:     #fff !default;
$input-focus-color:  $text-base-color !default;

$input-disabled-bg:    rgba($input-bg, 0.5) !default;
$input-disabled-color: rgba($form-base-color, 0.5) !default;

$label-color: lighten($base-gray, 10%);

$input-focus-border-color: $link-light-color !default;
$input-focus-border-size:  3px !default;
$input-transition-speed:    0.2s !default;

$labels-look-like-links-option: false !default;
$form-transition-option:        true !default;