xPider - Helpers

# 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;`