Migration Guide to Version 3.0.0

An overview of a few things you will need to accommodate in your update to the next major version. In general, we worked hard to ensure backwards compatibility so your existing markup should continue to work. However, if you want to make use of our updated assets, make sure to follow along here.

Typo

All headlines have increased in size which might or might not break your page layout.

fineprint has been renamed to font-hint.

Forms

The standard form theme (form-theme-standard) is now white, making the white form theme obsolete. Please transition away from form-theme-white.

Text inputs and select fields

To upgrade to the new design:

  • To make use of putting icons inside of text inputs, use a wrapper div around them with the class text-input-container.
  • To make use of the updated look of select fields, use a wrapper div around them with the class select-container.
  • Radio buttons and checkboxes get wrapper divs around them with the class radio-button-container or checkbox-container.
  • Form items should use the new gutter-form to make use of the new horizontal and vertical distances between form elements.
  • Migrate away from input-unit and unit-icon. Replace with input-icon-right. See updated input markup code example.

Best practice: Combine every input element with its corresponding label element by using id for input and corresponding for for label. This makes sure users can click on a label and thereby select an input field. See updated input markup code example.

Vertical margins and paddings have increased. Check to see whether this change breaks your layout.

Updated input markup

2.4

<input type="text" class="input-text input-unit" /><span class="unit-icon fa fa-euro"></span>

3.0

<div class="input-text-container">
  <label class="input-label" for="text-input-2">First name</label>
  <span class="input-icon-left fa fa-user"></span>
  <input type="text" id="text-input-2" class="input-text" placeholder="John" value="" />
</div>