Skip to main content

Level 1: CSS Reset

The CSS reset in Kingdom is heavily inspired by other great projects like Normalize, Tinyreset, and some parts from Tailwind. This documentation aims to cover the resets used in Kingdom that are somewhat unique or opinionated. If you seek to understand all the resets included, please look through the source of src/_L1-reset.scss, where comments and links explain most of the individual parts.

This webpage is displayed with just Level 1 and all utilities of Kingdom applied so you can quickly see its effects in your particular browser.

The $colors map

The reset utilises some basic colors. If not set beforehand in the $colors Sass-map, the reset will generate these colors automatically and register them with the Kingdom Colors module. Most of the colors have a matching text color to use on a colored background.

  • The primary color used as background, together with its corresponding text color.
  • The body background color along with its text color can be seen everywhere on this page, but of course also here on this unstyled element.
  • The link color on the body background.
  • The visited link color on the body background.
  • The border color defaults to currentColor.
  • The caution color and its text color can be used for warnings and errors.
  • The disabled background & text colors can be used to indicate disabled elements.

Sans-serif font for bright text

If no $body-font-stack has been selected and the body text color is bright on a dark background, Kingdom will explicitly set the body text to a sans-serif font. This is to avoid user-agents' default serif font that can be hard to read whenever the background is darker than the text on top of it.

In most cases you will have set both colors and fonts according to your specific design, so this effect will usually just be seen early in your projects before such decisions have been made.

Body padding

The Sass variable $body-padding defaults to 0 but you can set it to another padding declaration should you need it.

Boxes become their set size

To make any explicitly sized elements take up the specified space regardless of padding or borders, the box-sizing property of all elements is set to border-box. Read more about it in this article on CSS-Tricks.

This paragraph is set to a maximum width and that width should include the border set on its side.

Add borders by setting a single property

From Tailwind comes the nifty trick of setting explicit border-style and border-color on all block, inline-block, and table elements, while also defaulting the border-width to 0. This makes it super convenient to just set the border width on any side of an element wherever a border is needed. This paragraph just has its border-bottom-width set… and voila!

Inline elements

All inline elements have their line-height reset to 0 to stop them affecting the block of text around them should they have a different size or font. For example, a subscript element or <code> usually mess up the line-height—and here they don't! If you ever find text that doesn't line-break properly after you converted it to a block level element, all you need to fix it is to explicitly set line-height to inherit.

Sass placeholders

The reset is also responsible for including all the Sass placeholders needed by Kingdom. Feel free to extend these placeholders whenever convenient in your own Sass. We use Sass placeholders to generate all kinds of extendable behaviour, but if they're not extended in any selector, they're also not present in the generated CSS. The placeholders generally have a CSS comment printed along with them, so you can find them all in your non-minified CSS.

Not enough?

As you can see on this page, the text is quite hard to follow when just the resets of Level 1 are applied. This is mainly because the font-sizes and spacing between blocks like headlines and paragraphs has not been set, they're at your browser's defaults. This is where Level 2 can help apply some spacing and sizing!