Atomics

Border Atomics

Various classes can be used to apply borders to the elements. Applying the border class to the element will add a 1px border to it.

Mixing the directions, visibility and screensize values will give you more specificity.

modifiers	direction	screensize	visibility
values	`top`, `right`, `bottom`, `left`	`tablet`	`none`

Should be applied in this order:

 css 
 border-{direction}-{screensize}-{visibility} 

Usage

Here is an example of border class usage:

Text block

 HTML 
 <div class="border padding-sm">
    <p>Text block</p>
</div> 

Here is an example of applying border to specific side of the element:

Border top

 HTML 
 <div class="border-top padding-sm">
    <p>Border top</p>
</div> 

Border right

 HTML 
 <div class="border-right padding-sm">
    <p>Border right</p>
</div> 

Border left

 HTML 
 <div class="border-left padding-sm">
    <p>Border left</p>
</div> 

Border bottom

 HTML 
 <div class="border-bottom padding-sm">
    <p>Border bottom</p>
</div> 

Radius

There are a few classes available to set border radius:

class	size
`border-radius-sm`	`0.125rem`
`border-radius`	`0.25rem`
`border-radius-lg`	`0.375rem`
`border-radius-rounded`	`290486px`

Small radius

Default radius

Large radius

Rounded

 HTML 
 <div class="border border-radius-sm padding-sm">
    <p>Small radius</p>
</div>
<div class="border border-radius padding-sm margin-top-xs">
    <p>Default radius</p>
</div>
<div class="border border-radius-lg padding-sm margin-top-xs">
    <p>Large radius</p>
</div>
<div class="border border-radius-rounded padding-sm margin-top-xs">
    <p>Rounded</p>
</div> 

Size

Additionally -md and -lg may be added for a thicker border.

Medium border

Medium border on tablet+

Large border

Large border on tablet+

 HTML 
 <div class="border-md padding-sm">
    <p>Medium border</p>
</div>
<div class="border-md-tablet padding-sm margin-top-xs">
    <p>Medium border on tablet+</p>
</div>
<div class="border-lg padding-sm margin-top-xs">
    <p>Large border</p>
</div>
<div class="border-lg-tablet padding-sm margin-top-xs">
    <p>Large border on tablet+</p>
</div> 

Colors

The color of a border can be modified using the following classes.

modifiers	color name	screensize
colors	`primary`, `danger`, `warning`, `success`, `info`, `accent`	n/a

Custom Color

 HTML 
 <div class="border-color-accent border-left-lg padding-block-md border-radius">
    <p class="margin-inline-md">Custom Color</p>
</div> 