Helpers

xPider includes a wide range of shorthand utility classes to modify an element's appearance.

add any of listed classes to the html element to apply them.

CSS Class Reference

Border

.border-bottom-light
Sets 1px border bottom of the element
.border-none
Remove any border from the element
Color

.color-primary
Sets element color as template primary color
.color-white
Sets element color white
Background Color

.bg-color-primary
Sets background color as template primary color to the element
.bg-color-midnight
Sets background color Midnight to the element
.bg-color-darkblue
Sets background color Dark Blue to the element
.bg-color-grey
Sets background color Gray to the element
.bg-color-coral
Sets background color Coral to the element
Border Radius

.rounded-default
Sets 5px border Radius to the element
.rounded-sm
Sets 3px border Radius to the element
.rounded-md
Sets 10px border Radius to the element
.rounded-lg
Sets 1px border Radius to the element
.rounded-full
Sets 100px border Radius to the element
Box Shadow

.box-shadow-1
Gives some box Shadow to the element
.box-shadow-2
Gives a little bit more box Shadow to the element
Boxed Layout

.boxed-layout
Add the class boxed-layout to the <body> element for Boxe Layout style.
Divider

.hr--blod
Apply to the <hr> element for 2px border Divider
Height

.h-100vh
Sets the height of the element 100vh
Opacity

.opacity-05
Sets opacity: .05; to the element
.opacity-10
Sets opacity: .1; to the element
.opacity-20
Sets opacity: .2; to the element
.opacity-30
Sets opacity: .3; to the element
Position

.pos-abs-top
Apply to a element to position the element at the top of the section
.pos-abs-bottom
Apply to a element to position the element at the bottom of the section
.pos-abs-bottom-left
position the element to the bottom left hand coner of the section
.pos-abs-bottom-right
position the element to the bottom right hand coner of the section
.pos-abs-top-right
position the element to the top right hand coner of the section
.pos-abs-top-left
position the element to the top left hand coner of the section
.pos-center
position the element center of the section
.pos-horizon-center
position the element horizontally center of the section
.pos-vertical-center
position the element vertically center of the section
Overflow

.hidden
Sets overflow attribute to hidden
Z-Index

.z-index1
Sets z-index: 1;
.z-index2
Sets z-index: 2;
.z-index-1
Sets z-index: -1;
.z-index-2
Sets z-index: -2;