Dozens of utility classes with a single purpose designed to reduce the frequency of highly repetitive declarations in your CSS while allowing for quick and easy development.
Borders
Easily manipulate borders on your images or other elements.
Border Radius
Add a class to your element to round the corners. You can target various sides of an element using the format .radius-{sides}
.
Where sides is one of:
- blank - for
all
4 corners of the element t
- for both corners on thetop
sideb
- for both corners on thebottom
sidee
- for both corners on theend
sides
- for both corners on thestart
sidete
- for thetop end
cornerts
- for thetop start
cornerbe
- for thebottom end
cornerbs
- for thebottom start
corner
The start/end sides are designated as follows depending on which version of the Figuration CSS you are using. The default figuration.*.css
uses the ltr
mode, where figuration-rtl.*.css
uses the rtl
mode.
- For
left-to-right
mode (ltr
- default);start
refers to theleft
sideend
refers to theright
side
- For
right-to-left
mode (rtl
);start
refers to theright
sideend
refers to theleft
side
<!-- Sides -->
<img src="..." class="radius" alt="...">
<img src="..." class="radius-t" alt="...">
<img src="..." class="radius-b" alt="...">
<img src="..." class="radius-e" alt="...">
<img src="..." class="radius-s" alt="...">
<!-- Corners -->
<img src="..." class="round-te" alt="...">
<img src="..." class="round-ts" alt="...">
<img src="..." class="round-be" alt="...">
<img src="..." class="round-bs" alt="...">
Using Component Sizes
A few sizes are available using the component sizing options. Classes are built in the form .radius-{sides}-{size}
.
By default the xs
and sm
sizes are the same radius. Also the lg
and xl
sizes are the same radius.
<img src="..." class="radius-sm" alt="...">
<img src="..." class="radius" alt="...">
<img src="..." class="radius-lg" alt="...">
Removing
There is also the special case size of 0
(zero) to remove a radius.
<button type="button" class="btn radius-s-0">Button</button>
Circles
When elements are of a square (1:1) aspect ratio, you can create a circle using .radius-circle
. If the element has an unequal aspect ratio, you will get more on an elipse shape.
<img src="..." class="radius-circle" width="100" height="100" alt="...">
<img src="..." class="radius-circle" width="100" height="50" alt="...">
<img src="..." class="radius-circle" width="50" height="100" alt="...">
Border Addition
Quickly add the default component border to an element with the .border{-side}
utility classes.
Available border addition utilities are:
.border
- for all sides.border-t
- for thetop
side.border-b
- for thebottom
side.border-e
- for theend
side.border-s
- for thestart
side.border-x
- for bothstart
andend
sides.border-y
- for bothtop
andbottom
sides
The start/end sides are designated as follows depending on which version of the Figuration CSS you are using. The default figuration.*.css
uses the ltr
mode, where figuration-rtl.*.css
uses the rtl
mode.
- For
left-to-right
mode (ltr
- default);start
refers to theleft
sideend
refers to theright
side
- For
right-to-left
mode (rtl
);start
refers to theright
sideend
refers to theleft
side
<div class="border bg-gray-50 p-0_5 mb-1">
This div container has a border on all sides, and some padding added.
</div>
<div class="border-x bg-gray-50 p-0_5 mb-1">
This div container has a border on the left and right sides, and some padding added.
</div>
<div class="border-y bg-gray-50 p-0_5 mb-1">
This div container has a border on the top and bottom sides, and some padding added.
</div>
<span class="border-t bg-gray-50 p-0_5" style="width: 3rem;">'top'</span>
<span class="border-e bg-gray-50 p-0_5" style="width: 3rem;">'end'</span>
<span class="border-b bg-gray-50 p-0_5" style="width: 3rem;">'bottom'</span>
<span class="border-s bg-gray-50 p-0_5" style="width: 3rem;">'start'</span>
Border Removal
Remove the border on a given side of an element with the .border-0{-side}
utility classes.
Available border removal utilities are:
.border-0
- forall
4 sides of the element.border-0-t
- for thetop
side.border-0-b
- for thebottom
side.border-0-e
- for theend
side.border-0-s
- for thestart
side.border-0-x
- for bothstart
andend
sides.border-0-y
- for bothtop
andbottom
sides
The start/end sides are designated as follows depending on which version of the Figuration CSS you are using. The default figuration.*.css
uses the ltr
mode, where figuration-rtl.*.css
uses the rtl
mode.
- For
left-to-right
mode (ltr
- default);start
refers to theleft
sideend
refers to theright
side
- For
right-to-left
mode (rtl
);start
refers to theright
sideend
refers to theleft
side
See the following example of removing various borders from some buttons.
<button type="button" class="btn radius-0 border-0">all</button>
<button type="button" class="btn radius-0 border-t-0">top</button>
<button type="button" class="btn radius-0 border-e-0">'end'</button>
<button type="button" class="btn radius-0 border-b-0">bottom</button>
<button type="button" class="btn radius-0 border-s-0">'start'</button>
<br />
<button type="button" class="btn radius-0 border-x-0">left and right</button>
<button type="button" class="btn radius-0 border-y-0">top and bottom</button>