reusable css classes

margin classes

5px to 140px
use like m-5 to m-140(m is placeholder)
ma: all sides
mx: left right
my: top bottom
mr: right
mt: top
mb: bottom
ml: left

padding classes

5px to 140px
use like p-5 to p-140(p is placeholder)
pa: all sides
px: left right
py: top bottom
pr: right
pt: top
pb: bottom
pl: left

.no-outline: to remove outlines

.no-anchor: to remove default behaviour of anchor tag

.cursor-pointer: make pointer as cursor

.transition-ease: normally used .2s ease-in-out transitions

.smart-wrap to provide smart text wrapping

.text-ellipsis to provide ellipsis (use max width class with it)

element width classes

5px to 300px 5,10,15...
use like ew-5 to ew-300 (with 5px gap)

element max width classes

5px to 300px 5,10,15...
use like ew-mx-5 to ew-mx-300 (with 5px gap)

element min width classes

5px to 300px 5,10,15...
use like ew-mn-5 to ew-mn-300 (with 5px gap)

element height classes

5px to 300px 5,10,15...
use like eh-5 to eh-300 (with 5px gap)

element max height classes

5px to 300px 5,10,15...
use like eh-mx-5 to eh-mx-300 (with 5px gap)

element min height classes

5px to 300px 5,10,15...
use like eh-mn-5 to eh-mn-300 (with 5px gap)

border-radious classes

1px to 30px 1,2,3...
use like .border-round-1 to .border-round-30 (with 1px gap)

font-weight classes

100 to 900 100,200,300...
use like .font-weight-100 to .font-weight-900 (with 100 gap)

line-height classes

.line-height-1, .line-height-1_5, .line-height-2, .line-height-2_5, .line-height-3

scroll-bar alteration

scroll-bar($width, $trackColor, $thumbColor, $radius) add the class .scroll_bar to the overflowed div

Letter spacing classes

.letter-space-{i}{j}
.letter-space-m-{i}{j}
m is for minus letter spacing
in {i} you can replace the value from 0 to 60
in {j} you can replace the value from 0 to 9
example: .letter-space-0_1 gives you letter spacing of 0.1px
.letter-space-2_3 gives you letter spacing of 2.3px
.letter-space-m-2_3 gives you letter spacing of -2.3px

mixins

ellipse($width): class for making text-ellipse with dots

($lines: 2): limit the number of lines of text-box

bg-image($url, $position, $size): to set background image for a element

transition($sec, $property:'all', $type:'ease-in-out'): to set the transition.

elem-margin-padding($prefix: "", $breakpoint: 0px): to create above margin and padding classes for custom breakpoint with custom prefix. example: elem-margin-padding($prefix: "-xxl", $breakpoint: 1600px) will give padding like px-xxl-5

elem-font-size-classes($prefix: "sm", $breakpoint: 575px) will generate font sizes from 0.1rem to 7.9 rem
font-0_5 gives you font size of 0.5rem font-2_5 gives you font size of 2.5rem

bootstrap supporters

bootstrap-breakpoint($prefix, $breakpoint) : to create new breakpoint in bootstrap 4+
bootstrap-breakpoint('sm', 768px)

flex none

.flex-none : to disable effect of flex stretch for inner elements

pointer events none

.pointer-none : to disable pointer events

pointer events all

.pointer-all : to enable pointer events

alter gutter size or breakpoint based gutters

bootstrap-gutter($size, $prefix:"", $breakpoint: 0px) $prefix and $vreakpoint is optional if you are directl overriding default bootstrap gutter. Class generated gutters-sm-10 or gutters-10