6.0 - Form structure

Files located in wyrm_core/_form.sass.

Forms follow the following basic struture. .wy-control-group wraps the label and a .wy-control, which itself warps your actual form elements. You can decide either to stack or align your forms. A help message can be provided in a couple different styles, but the most common is .wy-form-message as shown below.

<form class="{$modifiers}">
  <legend>A simple form</legend>
  <fieldset>
    <div class="wy-control-group">
      <label>Field name</label>
      <div class="wy-control">
        <input type="text" placeholder="placeholder"/>
      </div>
      <span class="wy-form-message">Help text goes here!</span>
    </div>
    <input type="submit" class="btn" />
  </fieldset>
</form>

6.1 - Generic form elements

Here's the output of common form inputs. The sass itself covers more types like email, password, url, date...etc, but I've left them out for brevity.

<div class="wy-control-group">
  <label>Text field</label>
  <div class="wy-control">
    <input type="text" placeholder="placeholder"/>
  </div>
</div>
<div class="wy-control-group">
  <label>Textarea</label>
  <div class="wy-control">
    <textarea></textarea>
  </div>
</div>
<div class="wy-control-group">
  <label>Dropdown</label>
  <div class="wy-control">
    <select>
      <option></option>
      <option>Option 1</option>
      <option>Option 2</option>
    </select>
  </div>
</div>
<div class="wy-control-group">
  <label>Radio</label>
  <div class="wy-control">
    <label class="wy-radio">
      <input type="radio">
      Option 1
    </label>
    <label class="wy-radio">
      <input type="radio">
      Option 2
    </label>
  </div>
</div>
<div class="wy-control-group">
  <label>Checkbox</label>
  <div class="wy-control">
    <label class="wy-checkbox">
      <input type="checkbox">
      Option 1
    </label>
    <label class="wy-checkbox">
      <input type="checkbox">
      Option 2
    </label>
  </div>
</div>
  • Default styling without modifier classes.


6.2 - Prefix and suffix for inputs

Wyrm allows some basic prefix and suffic styling for text inputs.

<div class="wy-control-group">
  <label>Prefix</label>
  <div class="wy-control wy-input-prefix">
    <span class="wy-input-context">@</span><input type="text" placeholder="placeholder"/>
  </div>
</div>
<div class="wy-control-group">
  <label>Suffix</label>
  <div class="wy-control wy-input-suffix">
    <input type="text" placeholder="placeholder"/><span class="wy-input-context">@gmail.com</span>
  </div>
</div>
  • Default styling without modifier classes.

    @
    @gmail.com

6.3 - Switches

True / false, boolean style switches.

<div class="wy-switch {$modifiers}"><span>Here is some really long text.</span></div>
  • Default styling without modifier classes.

    Here is some really long text.
  • .active

    active state.

    Here is some really long text.
  • .disabled

    disabled.

    Here is some really long text.

6.4 - Error handling and inline validation

Wyrm has both block and inline level validation depending upon your needs. You can also pair these with the global alerts mentioned in the alerts section of this styleguide.

<div class="wy-control-group wy-control-group-error">
  <label>After the fact error</label>
  <div class="wy-control">
    <input type="text" placeholder="placeholder"/>
    <span class="wy-form-message">Error text goes here.</span>
  </div>
</div>
<div class="wy-control-group">
  <label>Inline success</label>
  <div class="wy-control wy-inline-validate wy-inline-validate-info">
    <input type="text" placeholder="placeholder"/>
    <span class="wy-input-context"> You may want to do this.</span>
  </div>
</div>
<div class="wy-control-group">
  <label>Inline success</label>
  <div class="wy-control wy-inline-validate wy-inline-validate-success">
    <input type="text" placeholder="placeholder"/>
    <span class="wy-input-context"> Woot, way to go.</span>
  </div>
</div>
<div class="wy-control-group">
  <label>Inline error</label>
  <div class="wy-control wy-inline-validate wy-inline-validate-warning">
    <input type="text" placeholder="placeholder"/>
    <span class="wy-input-context"> Hold on cowboy.</span>
  </div>
</div>
<div class="wy-control-group">
  <label>Inline error</label>
  <div class="wy-control wy-inline-validate wy-inline-validate-danger">
    <input type="text" placeholder="placeholder"/>
    <span class="wy-input-context"> Damnit, you messed up.</span>
  </div>
</div>
  • Default styling without modifier classes.

    Error text goes here.
    You may want to do this.
    Woot, way to go.
    Hold on cowboy.
    Damnit, you messed up.