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;
}

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>

Edit this section