Helpers

vAPP 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.

Markup example:


                                    <div class="border-bottom"></div>
                                

CSS Class Reference

Border Radius

.rounded--default
Sets 5px border Radius to the element
.rounded--03
Sets 3px border Radius to the element
.rounded--8
Sets 08px border Radius to the element
.rounded--10
Sets 10px border Radius to the element
.rounded--15
Sets 15px border Radius to the element
.rounded--34
Sets 34px border Radius to the element
.rounded--full
Sets 100px border Radius to the element
.rounded-0
Remove border aadius from the elements
Opacity

.opacity--10
Sets opacity: .10; to the element
.opacity--40
Sets opacity: .40; to the element
.opacity--60
Sets opacity: .60; to the element
.opacity--70
Sets opacity: .70; to the element
.opacity--80
Sets opacity: .80; to the element
.opacity--84
Sets opacity: .84; to the element
Text Transform

.text-t--capitalize
Sets text-transform capitalize
.text-t--uppercase
Sets text-transform uppercase
Border

.border--none
Remove any border from the elements
.border
Sets 1px border all around the element
.border-bottom
Sets 1px border bottom of the element
.border-top
Sets 1px border top of the element
.border-right
Sets 1px border right of the element
.border-left
Sets 1px border left of the element
Box Shadow

.box-shadow--none
.box-shadow--1
.box-shadow--2
.box-shadow--12
.box-shadow--4
.box-shadow--5
.box-shadow--6
.box-shadow--7
.box-shadow--8
.box-shadow--9
.box-shadow--10
.box-shadow--11
.box-shadow--12
.box-shadow--13
.box-shadow--14
Apply box Shadow to the element. Different class will generate different box shadow
Max Width

.max-w--325
Restrict the element width to 320px
.max-w--478
Restrict the element width to 320px
.max-w--445
Restrict the element width to 992px
.max-w--600
Restrict the element width to 992px
.max-w--500-md
Restrict the element width to 768px
Height

.h-100vh
Sets the height of the element 100vh
Z-Index

.z-index1
Sets z-index: 1;
.z-index2
Sets z-index: 2;
.z-index3
Sets z-index: 3;
.z-index-1
Sets z-index: -1;
.z-index-2
Sets z-index: -2;
Transition

.transition-default
Apply .3s transition to the element
Position

.pos-abs-bottom-left
Apply to a element to position the element at the bottom left of the section
.pos-abs-bottom
Apply to a element to position the element at the bottom 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-abs-right
position the element to the right hand coner of the section
.pos-abs-left
position the element to the left hand coner of the section
.pos-abs-bottom-right
position the element to the bottom right hand coner of the section
Overflow

.hidden
Sets overflow attribute to hidden