DEV Community

Alican Kılıç
Alican Kılıç

Posted on

Helpercss

Margin Top

Prefix Description
mt-0 margin-top: 0px ;
mt-5 margin-top: 5px ;
mt-10 margin-top: 10px ;
mt-15 margin-top: 15px ;
mt-20 margin-top: 20px ;
mt-25 margin-top: 25px ;
mt-30 margin-top: 30px ;
mt-35 margin-top: 35px ;
mt-40 margin-top: 40px ;
mt-45 margin-top: 45px ;
mt-50 margin-top: 50px ;
mt-55 margin-top: 55px ;
mt-60 margin-top: 60px ;
mt-65 margin-top: 65px ;
mt-70 margin-top: 70px ;
mt-75 margin-top: 75px ;
mt-80 margin-top: 80px ;
mt-85 margin-top: 85px ;
mt-90 margin-top: 90px ;
mt-95 margin-top: 95px ;
mt-100 margin-top: 100px ;

Padding Top

Prefix Description
pt-0 padding-top: 0px ;
pt-5 padding-top: 5px ;
pt-10 padding-top: 10px ;
pt-15 padding-top: 15px ;
pt-20 padding-top: 20px ;
pt-25 padding-top: 25px ;
pt-30 padding-top: 30px ;
pt-35 padding-top: 35px ;
pt-40 padding-top: 40px ;
pt-45 padding-top: 45px ;
pt-50 padding-top: 50px ;
pt-55 padding-top: 55px ;
pt-60 padding-top: 60px ;
pt-65 padding-top: 65px ;
pt-70 padding-top: 70px ;
pt-75 padding-top: 75px ;
pt-80 padding-top: 80px ;
pt-85 padding-top: 85px ;
pt-90 padding-top: 90px ;
pt-95 padding-top: 95px ;
pt-100 padding-top: 100px ;

Margin Bottom

Prefix Description
mb-0 margin-bottom: 0px ;
mb-5 margin-bottom: 5px ;
mb-10 margin-bottom: 10px ;
mb-15 margin-bottom: 15px ;
mb-20 margin-bottom: 20px ;
mb-25 margin-bottom: 25px ;
mb-30 margin-bottom: 30px ;
mb-35 margin-bottom: 35px ;
mb-40 margin-bottom: 40px ;
mb-45 margin-bottom: 45px ;
mb-50 margin-bottom: 50px ;
mb-55 margin-bottom: 55px ;
mb-60 margin-bottom: 60px ;
mb-65 margin-bottom: 65px ;
mb-70 margin-bottom: 70px ;
mb-75 margin-bottom: 75px ;
mb-80 margin-bottom: 80px ;
mb-85 margin-bottom: 85px ;
mb-90 margin-bottom: 90px ;
mb-95 margin-bottom: 95px ;
mb-100 margin-bottom: 100px ;

Padding bottom

Prefix Description
pb-0 padding-bottom: 0px ;
pb-5 padding-bottom: 5px ;
pb-10 padding-bottom: 10px ;
pb-15 padding-bottom: 15px ;
pb-20 padding-bottom: 20px ;
pb-25 padding-bottom: 25px ;
pb-30 padding-bottom: 30px ;
pb-35 padding-bottom: 35px ;
pb-40 padding-bottom: 40px ;
pb-45 padding-bottom: 45px ;
pb-50 padding-bottom: 50px ;
pb-55 padding-bottom: 55px ;
pb-60 padding-bottom: 60px ;
pb-65 padding-bottom: 65px ;
pb-70 padding-bottom: 70px ;
pb-75 padding-bottom: 75px ;
pb-80 padding-bottom: 80px ;
pb-85 padding-bottom: 85px ;
pb-90 padding-bottom: 90px ;
pb-95 padding-bottom: 95px ;
pb-100 padding-bottom: 100px ;

Margin Left

Prefix Description
ml-0 margin-left: 0px ;
ml-5 margin-left: 5px ;
ml-10 margin-left: 10px ;
ml-15 margin-left: 15px ;
ml-20 margin-left: 20px ;
ml-25 margin-left: 25px ;
ml-30 margin-left: 30px ;
ml-35 margin-left: 35px ;
ml-40 margin-left: 40px ;
ml-45 margin-left: 45px ;
ml-50 margin-left: 50px ;
ml-55 margin-left: 55px ;
ml-60 margin-left: 60px ;
ml-65 margin-left: 65px ;
ml-70 margin-left: 70px ;
ml-75 margin-left: 75px ;
ml-80 margin-left: 80px ;
ml-85 margin-left: 85px ;
ml-90 margin-left: 90px ;
ml-95 margin-left: 95px ;
ml-100 margin-left: 100px ;

Padding Left

Prefix Description
pl-0 padding-left: 0px ;
pl-5 padding-left: 5px ;
pl-10 padding-left: 10px ;
pl-15 padding-left: 15px ;
pl-20 padding-left: 20px ;
pl-25 padding-left: 25px ;
pl-30 padding-left: 30px ;
pl-35 padding-left: 35px ;
pl-40 padding-left: 40px ;
pl-45 padding-left: 45px ;
pl-50 padding-left: 50px ;
pl-55 padding-left: 55px ;
pl-60 padding-left: 60px ;
pl-65 padding-left: 65px ;
pl-70 padding-left: 70px ;
pl-75 padding-left: 75px ;
pl-80 padding-left: 80px ;
pl-85 padding-left: 85px ;
pl-90 padding-left: 90px ;
pl-95 padding-left: 95px ;
pl-100 padding-left: 100px ;

Margin Right

Prefix Description
mr-0 margin-right: 0px ;
mr-5 margin-right: 5px ;
mr-10 margin-right: 10px ;
mr-15 margin-right: 15px ;
mr-20 margin-right: 20px ;
mr-25 margin-right: 25px ;
mr-30 margin-right: 30px ;
mr-35 margin-right: 35px ;
mr-40 margin-right: 40px ;
mr-45 margin-right: 45px ;
mr-50 margin-right: 50px ;
mr-55 margin-right: 55px ;
mr-60 margin-right: 60px ;
mr-65 margin-right: 65px ;
mr-70 margin-right: 70px ;
mr-75 margin-right: 75px ;
mr-80 margin-right: 80px ;
mr-85 margin-right: 85px ;
mr-90 margin-right: 90px ;
mr-95 margin-right: 95px ;
mr-100 margin-right: 100px ;

Padding Right

Prefix Description
pr-0 padding-right: 0px ;
pr-5 padding-right: 5px ;
pr-10 padding-right: 10px ;
pr-15 padding-right: 15px ;
pr-20 padding-right: 20px ;
pr-25 padding-right: 25px ;
pr-30 padding-right: 30px ;
pr-35 padding-right: 35px ;
pr-40 padding-right: 40px ;
pr-45 padding-right: 45px ;
pr-50 padding-right: 50px ;
pr-55 padding-right: 55px ;
pr-60 padding-right: 60px ;
pr-65 padding-right: 65px ;
pr-70 padding-right: 70px ;
pr-75 padding-right: 75px ;
pr-80 padding-right: 80px ;
pr-85 padding-right: 85px ;
pr-90 padding-right: 90px ;
pr-95 padding-right: 95px ;
pr-100 padding-right: 100px ;

Font Size

fsefix Description
fs-0 font-size: 0px ;
fs-5 font-size: 5px ;
fs-10 font-size: 10px ;
fs-15 font-size: 15px ;
fs-20 font-size: 20px ;
fs-25 font-size: 25px ;
fs-30 font-size: 30px ;
fs-35 font-size: 35px ;
fs-40 font-size: 40px ;
fs-45 font-size: 45px ;
fs-50 font-size: 50px ;
fs-55 font-size: 55px ;
fs-60 font-size: 60px ;
fs-65 font-size: 65px ;
fs-70 font-size: 70px ;
fs-75 font-size: 75px ;
fs-80 font-size: 80px ;
fs-85 font-size: 85px ;
fs-90 font-size: 90px ;
fs-95 font-size: 95px ;
fs-100 font-size: 100px ;

Repo

Top comments (3)

Collapse
 
nielsbom profile image
Niels Bom

Why do you use all the !important?

Collapse
 
alicannklc profile image
Alican Kılıç

Thanks you clean !important

Collapse
 
nielsbom profile image
Niels Bom

If you like writing CSS like this check out Tachyons.io. This style is called “functional css”.