Helper Classes

class/ class pattern description Example
.h-{height} Set height of element in pixels{height} can be 50,75,100,150,200,250,300,350,400,450,500,550,600,650,700,800,900 .h-100
.hvh-{percent} Set height for an element relative to screen height. {percent} can be 30,40,50,60,70,80,90,100 .hvh-50
.full-screen Set the height of element equal to browser height
.full-height Set the height of element equal to browser height
.ov-{type}-alpha-{opacity} Add overlay over background image of elements. {opacity} can be 5,10,20,30,50,50,60,70,80,85,90,95,100 and {type} can be dark,light,grad1,grad2,grad3,grad4,grad5,grad6,grad7,grad8,grad9,grad10,grad11 .ov-light-alpha-20
.m-top-{pixel} Adds margin top and ranges 0,1, 2,3,4,5,10,15,20,25,30,35,40,45,50,60,70,80,90,100,120,150,200 .-m-top-30
.m-top-sm-{pixel} Adds margin top as small devices .m-top-sm-30
.m-top-xs-{pixel} Adds margin top at mobile devises .m-top-xs-30
.m-bottom-{pixel} Adds margin bottom and ranges 0,1, 2,3,4,5,10,15,20,25,30,35,40,45,50,60,70,80,90,100,120,150,200 .m-bottom-30
.m-bottom-sm-{pixel} Adds margin bottom as small devices .m-bottom-sm-30
.m-bottom-xs-{pixel} Adds margin bottom as mobile devices .m-bottom-xs-30
.p-top-{pixel} Adds padding top .p-top-30
.p-top-sm-{pixel} Adds padding top at small devices .p-top-sm-30
.p-top-xs-{pixel} Adds padding top at mobile devices .p-top-xs-30
.p-bottom-{pixel} Adds padding bottom .p-bottom-30
.p-bottom-sm-{pixel} Adds padding bottom at small devices .p-bottom-sm-30
.p-bottom-xs-{pixel} Adds padding bottom at mobile devices .p-bottom-xs-30
.pad-{pixel} Adds padding around the element .pad-30
.pad-sm-{pixel} Adds padding around the element - small devices .pad-sm-30
.pad-xs-{pixel} Adds padding around the element - mobile devices .pad-xs-30
.p-left-{pixel} Adds padding left
.p-left-sm-{pixel} Adds padding left- small devices
.p-left-xs-{pixel} Adds padding left- mobile devices
.p-right-{pixel} Adds padding right
.p-right-sm-{pixel} Adds padding right- small devices
.pull-up-{pixel} Adds minus margin top and pulls up the element
.pull-up-sm-{pixel} Adds minus margin top and pulls up the element - small devices
.pull-up-xs-{pixel} Adds minus margin top and pulls up the element - mobile devices
.sp-blank-{pixel} Adds blank space with height of {pixel}
.sp-line-{pixel} Adds break line with height of {pixel}
.sp-trans-{pixel} Adds transparent line with height of {pixel}
.sp-hatched-{pixel} Adds hatched line with height of {pixel}
.sp-shadow-line-{pixel} Adds shadow line with height of {pixel}
.relative forces relative position
.no-pad forces to padding=0
.fix-me position = fixed
.theme-color color = whatever the theme color is
.white-color color = #fff
.dark-color color = #4b4b4b
.primary-font font-family: "Sintony"
.secondry-font font-family: "Play"
.sans-font font-family: "Merriweather"
.large-text font-size: 48px;