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;
Last updated