Skip to main content

Codebase 6 Decoration

Spacing

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

:root {
  --s-tiny: 0.25rem
  --s-1: 0.5rem;
  --s-2: 1rem;
  --s-3: clamp(1.5rem, 0.5rem + 1.25vw, 2rem);
  --s-4: clamp(2rem, 1rem + 2.5vw, 3rem);
}

Spacing level --s-tiny can be used where you want to add, e.g. a small amount of spacing between an icon and text within a button, or between two adjacent form fields.

Spacing levels --s-3 and --s-4 increase responsively depending how how much width is available, using clamp() functions. This makes the negative space (“whitespace”) for spacing levels 3 and 4 larger where there is a larger viewport width available.

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

Spacing example with paddings:

p-tiny
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-tiny through mx-4 / px-4 through px-4
  • Block axis, or y-axis (top and bottom): my-tiny through my-4 / py-4 through py-4

Spacing extras

In addition, there are the following specials:

  • *-0 margin and padding (options all, top, right, bottom, left) are for overriding (resetting) unwanted margin and padding
  • p-cell — adds padding 0.5rem 1rem 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)

The default border color is a partially transparent black, that appears as a pale gray over the white background, and as a slightly darkened version of the background color of any component (e.g. button) or panel. Border colors can also be set using Codebase color utility classes.

Borders on different sides can be set as follows:

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

Border extras

  • b-0 — for removing (resetting) all borders
  • b-currentColor — for setting border color the same as its respective or inherited text color

Box shadows

Box shadows can take your design to a new level!

  • bs-1 / bs-2 / bs-3 / bs-4 / bs-5

The bs suffix units -1 through -5 are meant to represent layer “lifts” along the z-axis. The higher a layer is lifted from the page, the less sharpness and more spread the box shadow has. This also means that the higher the suffix, the fainter the shadow becomes as it is spread over a wider area.

bs-1
bs-2
bs-3
bs-4
bs-5

Lighting is simulated as from the front top center, so more of the shadow is cast at the bottom the element.

<div class="bs-1">...</div>
  
<div class="bs-2">...</div>

<div class="bs-3">...</div>

<div class="bs-4">...</div>

<div class="bs-5">...</div>

Box shadows on hover

Codebase also has hover states for each of the 5 levels of box shadows. Hover over the panels below to see them in action.

hover:bs-1
hover:bs-2
hover:bs-3
hover:bs-4
hover:bs-5

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.

There are five modifier classes. These only supply a spacing variable.

  • rounded-tiny — --s-tiny
  • rounded — --s-1 (alias rounded-1)
  • rounded-2 — --s-2
  • rounded-3 — --s-3
  • rounded-4 — --s-4
  • rounded-pill — 999em

Examples:

rounded-tiny
rounded
rounded-2
rounded-3
rounded-4
rounded-pill

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

rounded-pill

Codebase img-contain and img-cover classes

img-contain and img-cover are designed for use on an <img src=""> tag.

The img-contain class can be used to make an image expand or contract so that it is fully seen within a wrapper, without distorting the image. If the image aspect ratio is taller than the wrapper, then some empty space will appear right and left of the image. And if the image aspect ratio is wider than the wrapper, then some empty space will appear to the top and bottom of the image.

The img-cover class can be used to make an image expand or contract to fully cover a wrapper block rectangle. If the image aspect ratio is taller than the wrapper, then its top and bottom will seem to be cropped. And if the image aspect ratio is wider than the wrapper, then its right and left sides will seem to be cropped.

There are also some image alignment modifiers that can be paired with img-cover.

  • img-cover img-cover-top — ensures the top part of the image is in view
  • img-cover img-cover-right — ensures the right part of the image is in view
  • img-cover img-cover-bottom — ensures the bottom part of the image is in view
  • img-cover img-cover-left — ensures the left part of the image is in view

Docs