Globals

The If Design System is dependent on some key settings and global styles that you want to implement.

HTML5 Doctype

The style guide is dependent on the HTML5 Doctype, and since it's not the dark ages anymore, we think that no further reasoning is needed for this. Just do itâ„¢.

<!DOCTYPE html>
<html class="if" lang="en">
  ...
</html>

Box-sizing

For more straightforward sizing in CSS, we switch the global box-sizing value from content-box to border-box. This ensures padding does not affect the final computed width of an element.

For more information about this, please read this article written by Paul Irish.

.if {
  box-sizing: border-box;
}

*.if,
*.if::before,
*.if::after {
  box-sizing: border-box;
}

Focus status with What Input?

To be able to give a precise and good enough focus state experience, we use What Input?. It is mandatory to use, unless you can provide similar feature setup for your application.

Basically, with What Input? we can dictate when to display the focus state, by default, by usage of mouse, touch or keyboard. We default to only display focus states with keyboard usage.

If you use npm, What Input? is added as a peerDependency, so you have to install it manually:

a.if:focus,
a.if.is-focused
  IDS_UTIL_PseudoStates_Focus_Fallback()

[data-whatintent='mouse']
  a.if:focus,
  a.if.is-focused
    outline none

[data-whatinput='keyboard']
  a.if:focus,
  a.if.is-focused
    IDS_UTIL_PseudoStates_Focus()
npm i --save what-input

CSS naming convention

To be able to use any of the components or styles from the component library, you need to use the if-class. This is to scope the components.

Example with full page:

<!DOCTYPE html>
<html class="if" lang="en">
  <head></head>
  <body class="if">
    <button type="button" class="if button">Click me</button>
  </body>
</html>

Example with just the component full page:

<!DOCTYPE html>
<html lang="en">
  <head></head>
  <body>
    <div class="if">
      <button type="button" class="if button">Click me</button>
    </div>
  </body>
</html>

Block, element.. what?

We're not using BEM, but a system that can remind you of BEM. First you supply the component name, and then you add modifiers.

A button, with no modifiers, just a button

<button type="button" class="if button">I am a button</button>

A large primary button

<button type="button" class="if button primary large">I am a button</button>

A text button

<button type="button" class="if button text">I am a button</button>

Want an icon in your button? Use a span!

A button with an icon
<button class="if button text" type="button">
  <span class="if icon ui date blue"></span> Button with icon
</button>
Only using `button secondary` by itself will not produce any styling. The modifiers are only usable with the correct combination. This to ensure scoping and cascade hierarchy when using the classnames.

Table of Contents

Edit this section, Opens in new window
Contact us, Opens in new window