Module: Borders

The borders module helps adding borders to elements using the width property, while at the same time preventing contents from being pushed out of the vertical rhythm. You'll find it in src/modules/_borders.scss.

Reset borders first

It all works by first resetting borders to a default style and color—but with a width of 0. Then borders can easily be applied by just setting border-width on appropriate sides of an element. This idea came from Tailwind and this module does just that through mixin border-reset.

Default variables to optionally override before import

• $border-width defaults to 1px
• $border-style defaults to solid

Keeping the vertical rhythm

In Kingdom's 3rd level and up it's important that elements' heights are multiples of the spacing base and this module has mixins for taking care of that. The mixins also use CSS custom properties for the border widths so that calculations can be made with javascript and in other CSS selectors.

• Mixin border-for-fixed-height puts borders on the specified sides of fixed height elements. There's no need to shift fixed height elements as long as box-sizing: border-box; and the borders are already included in the height.
• For elements that have their height automatically set, it's usually affected by the line-height and number of lines within the element. Mixin border-for-auto-height will shift the element upwards using relative positioning to compensate for the space added by a top border. It will also apply a negative bottom margin to compensate for the space added by a bottom border.
• For bordered elements that are supposed to be one line only (e.g. form inputs) there's the mixin border-preserving-line-height. It will reduce the line-height to compensate for top and bottom borders, keeping the element's original height.