Decoration

Spacing (margins and paddings)

Box model margin and padding spacing have both 4 levels based on 4 CSS variables. The smallest simply adds 0.5rem spacing, whereas levels 2-4 are responsive to viewport width using clamp() functions to ramp up to 150% their base size. These variables are set in the root-variables file.

:root {
  --s1: .5rem;
  --s2: clamp(1rem, 2.2222vw, 1.5rem);
  --s3: clamp(2rem, 4.4444vw, 3rem);
  --s4: clamp(3rem, 6.6666vw, 4.5rem);
}

This makes the negative space (“whitespace”) for spacing levels 2-4 bigger for larger screens.

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

• All: m1 through m4 / p1 through p4
• Top: mt1 through mt4 / pt1 through pt4
• Right: mr1 through mr4 / pr1 through pr4
• Bottom: mb1 through mb4 / pb1 through pb4
• Left: ml1 through ml4 / pl1 through pl4
• Inline x-axis (right and left): mx1 through mx4 / px4 through px4
• Block y-axis (top and bottom): my1 through my4 / py4 through py4

Spacing example with paddings:

Spacing extras

In addition, there are the following specials:

• pcell — adds y-axis padding --s1 and x-axis padding of double --s1 for creating menu items. Same as the padding for table cells and buttons
• mxauto — for x-axis margin auto-centering
• m0 and p0 — for removing (resetting) all unwanted space

These zero spacing utilities are declared before the spacers above in decoration.css so that you can use them to reset and then use spacers to set spacing the way you want it.

What if you want to remove e.g. only the top margin of a heading (or other typographic block element)? Use m0 to reset all margins, then use any of the above additive margin classes to put back the ones you want to keep.

Borders

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

Borders can be set as follows:

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

Border extra

• b0 — for removing (resetting) all borders

Rounded corners

• r2 — 4px border radius
• r3 — 8px border radius
• r4 — 16px border radius

Note: Since Baselayer v.2.x, the border-radius classes have overflow: hidden built in, so that they can “clip” the corners of images.

Border and border-radius variables pair as follows:

Border variable	Border-radius variable	Value
--b1	n/a	1px
--b2	--r2	4px
--b3	--r3	8px
n/a	--r4	16px

*Note: You will probably never need --r1 (a border radius of 1px) or --r4 (border radius of 16px) so these are not available in Baselayer.

• pill — 99em border radius (more than sufficient to put x-axis semi-circular ends on even mid-sized blocks)

If pill is used on a square, then the result will be a circle.

The image cover class

There’s 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.

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

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

Opacity

Opacities (with hover states):

• opacity25% / h:opacity25%
• opacity50% / h:opacity50%
• opacity75% / h:opacity75%
• h:opacity100% — 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.