Home

SCSS Utility Framework

What More Do you Need?

.container
.row

.col-6
.col-sm-4
.col-lg-2

.push-2
.push-md-2

.p-2
.pt-2

.p-sm-2

t - size

t-0
t-md-4

Modifier	Meaning	Options	Usage	Output
`a`	align	`left` `center` `right`	`.ta-center`	`text-align: center`
`w`	weight	`bold` `semibold` `medium` `book`	`.tw-bold`	`font-weight: $tw-bold`

.cp
.cg-1

.cbgg-1

.b

.b-4
.bt-4

.b-thick
.b-thick-4
.bt-thick-4

ratio

Modifier	Meaning	Usage	Output
`1_1`	1:1	`.ratio-1_1`	A square box.
`1_2`	1:2	`.ratio-1_2`	A vertical rectangle.
`4_3`	4:3	`.ratio-4_3`	A squarer rectangle.
`16_9`	16:9	`.ratio-16_9`	A horizontal rectangle (videos).

.hover-fadeInUp
Applying the class on the parent element allows us to activate animations on the child elements.

.fadeInUp-target
When a hover is specified on a parent, target classes are needed on the elements that need to be animated.

.hover-opacity-target
Adding -target to the hover class causes the animation to happen on the element itself – as opposed to its children.