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
5pxborder Radius to the element
.rounded--03- Sets
3pxborder Radius to the element
.rounded--8- Sets
08pxborder Radius to the element
.rounded--10- Sets
10pxborder Radius to the element
.rounded--15- Sets
15pxborder Radius to the element
.rounded--34- Sets
34pxborder Radius to the element
.rounded--full- Sets
100pxborder 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
1pxborder all around the element
.border-bottom- Sets
1pxborder bottom of the element
.border-top- Sets
1pxborder top of the element
.border-right- Sets
1pxborder right of the element
.border-left- Sets
1pxborder 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
.3stransition 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