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.

If you want to keep your templates compatible with version 2.3.0 as well as version 3.0.0, follow the recommendations in the "Backwards compatible" sections.

Typo

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

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.

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

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

2.4

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

3.0

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