Decoration

Spacing

Box model margin and padding spacing have both 4 levels based on 4 CSS variables. These same spacing variables are also used for gaps (in flexbox and the grid system), and for border radius utilities.

The smallest level simply adds 0.5rem spacing, whereas levels 2 thorugh 4 increase responsively depending how how much width is available, using clamp() functions to ramp up to 1.5× their base size.

The middle ramp within the clamp uses container query dependant units, cqi. This will either take effect from the container query context on the <body> tag, or from any inner container classes that may be added on block elements (see Layouts/ container query contexts).

:root {
  --s-1: 0.25rem; /* 4px */
  --s-2: 0.5rem; /* 8px */
  --s-3: clamp(1rem, 0.5rem + 1.25cqi, 1.5rem); /* 16px --> 24px */
  --s-4: clamp(2rem, 1rem + 2.5cqi, 3rem); /* 32px --> 40px */
}

This makes the negative space (“whitespace”) for spacing levels 2 through 4 larger where there is a larger container (or viewport) width available.

Spacing variable Default value Margin (e.g.) Padding (e.g.) Border radius Gap (flexbox and grid)
--s-1 0.25rem m-1 p-1 rad-1 gap-1
--s-2 0.5rem m-2 p-2 rad-2 gap-2
--s-3 clamp(1rem, 0.5rem + 1.25cqi, 1.5rem) m-3 p-3 rad-3 gap-3
--s-4 clamp(2rem, 1rem + 2.5cqi, 3rem) m-4 p-4 rad-4 gap-4

Spacing example with paddings:

p-1
p-2
p-3
p-4

Both margin and padding spacers are controlled on the 4 sides of blocks, as follows:

  • All: m-0 through m-4 / p-0 through p-4 (all four sides)
  • Top: mt-0 through mt-4 / pt-0 through pt-4
  • Right: mr-0 through mr-4 / pr-0 through pr-4
  • Bottom: mb-0 through mb-4 / pb-0 through pb-4
  • Left: ml-0 through ml-4 / pl-0 through pl-4
  • Inline axis, or x-axis (right and left): mx-1 through mx-4 / px-4 through px-4
  • Block axis, or y-axis (top and bottom): my-1 through my-4 / py-4 through py-4

The zero *-0 options (top, right, bottom, left) are for removing (resetting) unwanted margin and padding.

Spacing extras

In addition, there are the following specials:

  • p-cell — adds y-axis padding --s-1 and x-axis padding of 2 × --s-1 for creating menu items. Same as the padding for table cells and buttons
  • mx-auto — for x-axis margin auto-centering

Borders

Baselayer provides three thicknesses of border (plus a zero border override):

b-thin (1px)
b-thick (4px)
b-heavy (8px)

Borders can be set as follows:

  • All: b-*
  • Top: bt-*
  • Right: br-*
  • Bottom: bb-*
  • Left: bl-*

Border extra

  • b-0 — for removing (resetting) all borders

Rounded corners

All Baselayer border radius classes apply their border radius potentially to all four corners. If you want different radii on different corners of the same element, then you can access each of the spacing variables in your CSS, or set your own values.

Tip: If you are putting rounded corners on a block element that contains an image, you will also need to add overflow-clip.

The first five border radius classes below supply the property border-{...}-radius and the default spacing variable --s-1 (0.5rem).

  • rad, alias rad-1 — border-radius: (all) --s-1 (0.5rem)
  • rad-tl — border-top-left-radius: --s-1
  • rad-tr — border-top-right-radius: --s-1
  • rad-br — border-bottom-right-radius: --s-1
  • rad-bl — border-bottom-left-radius: --s-1

Then there are five modifier classes. These only supply a spacing variable — they do not contain the border-{...}-radius property. Therefore, they need to be paired with (at least) one of the five border radius utilities above.

  • rad-1 — --s-1 0.25rem
  • rad-2 — --s-1 0.5rem
  • rad-3 — --s-2 clamp(1rem, 0.5rem + 1.25cqi, 1.5rem)
  • rad-4 — --s-3 clamp(2rem, 1rem + 2.5cqi, 3rem)
  • rad-pill — --s-pill 99rem

Examples:

rad or rad rad-1
rad rad-2
rad rad-3
rad rad-4
rad rad-pill
rad-tl rad-br rad-3
rad-tl rad-bl rad-pill
rad-tr rad-pill
rad-br rad-bl rad-pill

If the element is a square, then rad rad-pill makes a circle.

rad rad-pill

The img-cover class

The Baselayer cover class can be used to make an image expand or contract to fully cover a container block rectangle. It is designed for use on an <img src=""> tag.

.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  overflow: hidden;
}

An example of img-cover being used can be seen in the expanded panel example.

Opacity

Opacities (with hover states):

  • opacity-25% / hover:opacity-25%
  • opacity-50% / hover:opacity-50%
  • opacity-75% / hover:opacity-75%
  • hover:opacity-100% — a reset that removes opacity on hover

The hover states are provided in case you want an image inside a link to change opacity on hover.

If you use these on an image over a colored background, then you get a color-tinted image.

If you have text over an image (e.g. in a hero component), then you can use opacity over a black (or dark color) background to make white text more readable — and vise versa.