Tips for custom styles

Consistent markup and like-field grouping with classifications help considerably with keeping the necessary CSS to a minimum. The package includes a boilerplate SCSS file.

Download a SCSS boilerplate (opens new window)

Sample markup

<!-- Outer Wrapper -->
<div class="formulate-input"  data-classification="text" data-type="text" data-has-errors="true" data-is-showing-errors="true">

  <!-- Wrapper around label + input -->
  <div class="formulate-input-wrapper">
    <!-- Label -->
    <label for="my-id" class="formulate-input-label formulate-input-label--before">
      Sample text input
    </label>
    <!-- Interior element wrapper -->
    <div data-type="text" class="formulate-input-element formulate-input-element--text">
      <!-- Actual input element -->
      <input type="text" placeholder="Sample placeholder" id="my-id">
    </div>
  </div>

  <!-- Help message -->
  <div class="formulate-input-help formulate-input-help--after">
    Sample help text
  </div>

  <!-- List of error messages -->
  <ul class="formulate-input-errors">
    <li class="formulate-input-error">
      Sample is required.
    </li>
  </ul>
</div>

Once the above output has been themed, styles will largely transfer to all formulate inputs. The only variance is some classifications use different internal inputs.

Using classifications

The outermost wrapper always has a data-classification attribute which can be used to group styles. For example the [data-classification="text"] selector can be used to style all text-based inputs at the same time:

.formulate-input {
  & [data-classification="text"] {
    input {
      // style all text-like inputs here
    }
  }
}

Data attributes

To make dynamic styling a bit easier, there are several utility data attributes that are applied to the outermost wrapper.

Attribute	Description
data-classification	Always available. Set to the classification of the input (box, text, group, etc.)
data-has-errors	Added when the field has any validation errors or explicit errors (passed in via prop or form) regardless of whether or not the errors are being displayed.
data-has-value	Added when the field is not empty.
data-is-showing-errors	Added when the field has errors and is showing them (based on error-behavior)
data-type	Always available. Set to the value of the type prop.