Teutonic CSS

Radius

←

Some people believe rounded corners are better recognoziable by humans. So here are your radius helper classes. There are three sizes, defined by space CSS vars, options for all directions as well as an extra pill-look class and a perfectly rounded square, AKA circle.

When no direction is given, the border radius will apply on all for corners. When a cardinal direction (t,r,b,l) is present, radius will apply on two corners. When a diagonal direction (tr,br,bl,l) is given, only one corner will be rounded.

Syntax: .ra{-direction?}{_size?}

SCSS: _radius.scss

ra_xs

ra-t_xs

ra-r_xs

ra-b_xs

ra-l_xs

ra-tr_xs

ra-br_xs

ra-bl_xs

ra-tl_xs

ra_s

ra-t_s

ra-r_s

ra-b_s

ra-l_s

ra-tr_s

ra-br_s

ra-bl_s

ra-tl_s

ra_m

ra-t_m

ra-r_m

ra-b_m

ra-l_m

ra-tr_m

ra-br_m

ra-bl_m

ra-tl_m

ra-pill

<div class="grid gap_s collapse-p text-mono ma-b_s " style="--grid-cols: 9">
  <div class="text-clip pa_m bg-a ra_xs">ra_xs</div>
  <div class="text-clip pa_m bg-d ra-t_xs">ra-t_xs</div>
  <div class="text-clip pa_m bg-d ra-r_xs">ra-r_xs</div>
  <div class="text-clip pa_m bg-d ra-b_xs">ra-b_xs</div>
  <div class="text-clip pa_m bg-d ra-l_xs">ra-l_xs</div>
  <div class="text-clip pa_m bg-j ra-tr_xs">ra-tr_xs</div>
  <div class="text-clip pa_m bg-j ra-br_xs">ra-br_xs</div>
  <div class="text-clip pa_m bg-j ra-bl_xs">ra-bl_xs</div>
  <div class="text-clip pa_m bg-j ra-tl_xs">ra-tl_xs</div>
</div>
<div class="grid gap_s collapse-p text-mono ma-b_s " style="--grid-cols: 9">
  <div class="text-clip pa_m bg-a ra_s">ra_s</div>
  <div class="text-clip pa_m bg-d ra-t_s">ra-t_s</div>
  <div class="text-clip pa_m bg-d ra-r_s">ra-r_s</div>
  <div class="text-clip pa_m bg-d ra-b_s">ra-b_s</div>
  <div class="text-clip pa_m bg-d ra-l_s">ra-l_s</div>
  <div class="text-clip pa_m bg-j ra-tr_s">ra-tr_s</div>
  <div class="text-clip pa_m bg-j ra-br_s">ra-br_s</div>
  <div class="text-clip pa_m bg-j ra-bl_s">ra-bl_s</div>
  <div class="text-clip pa_m bg-j ra-tl_s">ra-tl_s</div>
</div>
<div class="grid gap_s collapse-p text-mono ma-b_s " style="--grid-cols: 9">
  <div class="text-clip pa_m bg-a ra_m">ra_m</div>
  <div class="text-clip pa_m bg-d ra-t_m">ra-t_m</div>
  <div class="text-clip pa_m bg-d ra-r_m">ra-r_m</div>
  <div class="text-clip pa_m bg-d ra-b_m">ra-b_m</div>
  <div class="text-clip pa_m bg-d ra-l_m">ra-l_m</div>
  <div class="text-clip pa_m bg-j ra-tr_m">ra-tr_m</div>
  <div class="text-clip pa_m bg-j ra-br_m">ra-br_m</div>
  <div class="text-clip pa_m bg-j ra-bl_m">ra-bl_m</div>
  <div class="text-clip pa_m bg-j ra-tl_m">ra-tl_m</div>
</div><div class="grid text-mono ma-t_s">
  <div class="text-center pa_m span-6 ra-pill" style="background-color: RoyalBlue">ra-pill</div>
  <div class="text-center pa_m span-6 ra-pill" style="background-color: OrangeRed">ra-pill</div>
</div>

<div class="grid gap-no ma-t_s">
  <button class="text-center button pa_m span-6 ra-pill-l">ra-pill-l</button>
  <button class="text-center button pa_m span-6 ra-pill-r">ra-pill-r</button>
</div>