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.

<h6> now looks the same as <h5>.

fineprint has been renamed to font-hint.

Font sizes have changed:

Old (Mobile/Desktop)
New
XS
1.1rem/1.1rem
1.2rem
S
1.3rem/1.3rem
1.4rem
Standard
1.4rem/1.4rem
1.4rem
M
1.4rem/1.8rem
1.8rem
L
1.8rem/2.1rem
2.0rem
XL
2.0rem/2.6rem
2.4rem
XXL
2.3rem/3.2rem
3.2rem
XXXL
3.2rem/4.2rem
4.0rem

In case you have to have different font sizes for different states, you can prefix the font-size with the state, like so: palm-font-xl, lap-font-m, or desk-font-xs.

Note: According to the Cosma design guidelines, there should be no different font sizes per state. We are providing them here to make the migration of existing projects easier. When in doubt, talk to your designer.

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 input-text-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.

Updated input markup

2.4

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

3.0

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