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!
<button class="if button text" type="button">
<span class="if icon ui date blue"></span> Button with icon
</button>