Borders

Border

The two classes allow to add a default border (which follow the configuration from _graphics.defaults.scss) or to remove it.

<div class="u-bd"></div>
<div class="u-bd-0"></div>

$u-borders: (
  border: (
    property: border,
    class: bd,
    values: (
      null: ui.$ui-border-width solid ui.$ui-border-color,
      0: 0,
    ),
  ),
);

Border-radius

<div class="u-br"></div>
<div class="u-br-pill"></div>
<div class="u-br-full"></div>
<div class="u-br-0"></div>

$u-borders: (
  border-radius: (
    property: border-radius,
    class: br,
    values: (
      null: ui.$ui-border-radius,
      pill: 50rem,
      full: 50%,
      0: 0,
    ),
  ),
);

Box-shadow

The box-shadow utility doesn't display a shadow like in an elevation design. The generated class can be used to add a similar border, but without break the vertical rhythm.

<div class="u-bs"></div>
<div class="u-bs-0"></div>

$u-borders: (
  box-shadow: (
    property: box-shadow,
    class: bs,
    values: (
      null: 0 0 0 ui.$ui-border-width ui.$ui-border-color,
      0: none,
    ),
  ),
);

Outline

Similar the box-shadow tips, the outline doesn't change the sizeof the element. But this property doesn't follow the radius if it applied.

<div class="u-ol"></div>
<div class="u-ol-0"></div>

$u-borders: (
  outline: (
    property: outline,
    class: ol,
    value: (
      null: ui.$ui-border-width solid ui.$ui-border-color,
      0: 0,
    ),
  ),
);