Makerrz NPM | npm.io

FAQ

What is makerrz?

Makerrz is an open source css framework. You can use it for your PHP and HTML website.

Installation

Install MakerrZ for your website.

  npm install makerrz

What's new?

More clean, more bug free and more margin, left, right, top, bottom. Are added! Colors is also available now! All the colors from the root directory! So here is an example:

<h1 class="color-blue">Blue</h1>
<h1 class="color-red">Red</h1>

I hope you understand it! More will be added very soon! We are so sorry we not have updated makerrz for a month now!

Get MakerrZ by CDN

https://cdn.jsdelivr.net/npm/makerrz@4.0.3/dist/css/makerrz.min.css

Authors

@MrDev

Documentation

Headings

Headings	Size-Rem	Size-Px
`class="H1"`	`4.6rem`	46px
`class"H2"`	`3.6rem`	36px
`class="H3"`	`2.8rem`	28px
`class="H4"`	`2.2rem`	22px
`class"H5"`	`1.8rem`	18px
`class"H6"`	`1.6rem`	16px
P	1.3rem	13px

Padding

Padding Around

Around	Size-Rem
`class="p-1"`	`1rem`
`class="p-2"`	`2rem`
`class="p-3"`	`3rem`
`class="p-4"`	`4rem`

Padding Top

Top	Size-Rem
`class="pt-1"`	`1rem`
`class="pt-2"`	`2rem`
`class="pt-3"`	`3rem`
`class="pt-4"`	`4rem`

Padding Bottom

Bottom	Size-Rem
`class="pb-1"`	`1rem`
`class="pb-2"`	`2rem`
`class="pb-3"`	`3rem`
`class="pb-4"`	`4rem`

Padding Left

Left	Size-Rem
`class="pl-1"`	`1rem`
`class="pl-2"`	`2rem`
`class="pl-3"`	`3rem`
`class="pl-4"`	`4rem`

Padding Right

Right	Size-Rem
`class="pr-1"`	`1rem`
`class="pr-2"`	`2rem`
`class="pr-3"`	`3rem`
`class="pr-4"`	`4rem`

Padding Y

Y	Size-Rem
`class="py-1"`	`1rem`
`class="py-2"`	`2rem`
`class="py-3"`	`3rem`
`class="py-4"`	`4rem`

Padding X

X	Size-Rem
`class="px-1"`	`1rem`
`class="px-2"`	`2rem`
`class="px-3"`	`3rem`
`class="px-4"`	`4rem`

Margin Classes

Margin Around

Around	Size-Rem
`class="m-1"`	`1rem`
`class="m-2"`	`2rem`
`class="m-3"`	`3rem`
`class="m-1"`	`4rem`

Margin Top

Top	Size-Rem
`class="mt-1"`	`1rem`
`class="mt-2"`	`2rem`
`class="mt-3"`	`3rem`
`class="mt-4"`	`4rem`
`class="mt-5"`	`5rem`
`class="mt-7"`	`7rem`
`class="mt-10"`	`10rem`
`class="mt-15"`	`15rem`
`class="mt-20"`	`20rem`
`class="mt-25"`	`25rem`

Margin Bottom

Bottom	Size-Rem
`class="mb-1"`	`1rem`
`class="mb-2"`	`2rem`
`class="mb-3"`	`3rem`
`class="mb-1"`	`4rem`

Margin Left

Left	Size-Rem
`class="ml-1"`	`1rem`
`class="ml-2"`	`2rem`
`class="ml-3"`	`3rem`
`class="ml-1"`	`4rem`

Margin Right

Right	Size-Rem
`class="mr-1"`	`1rem`
`class="mr-2"`	`2rem`
`class="mr-3"`	`3rem`
`class="mr-1"`	`4rem`

Margin Y

Y	Size-Rem
`class="my-1"`	`1rem`
`class="my-2"`	`2rem`
`class="my-3"`	`3rem`
`class="my-1"`	`4rem`

Margin X

X	Size-Rem
`class="mx-1"`	`1rem`
`class="mx-2"`	`2rem`
`class="mx-3"`	`3rem`
`class="mx-1"`	`4rem`

Alignment Classes

Classes	Alignment
`class="text-left"`	`Left`
`class="text-right"`	`Right`
`class="text-center"`	`Center`
`class="text-justify"`	`Justify`

Buttons

Button Classes	Color
`class="btn-blue"`	`Blue`
`class="btn-green"`	`Green`
`class="btn-yellow"`	`Yellow`
`class="btn-red"`	`Red`
`class="btn-gray"`	`Gray`

Fonts

Font Classes	Name
`class="font-abel"`	`Abel`
`class="font-anton"`	`Anton`
`class="font-cabin`	`Cubin`
`class="font-dancing"`	`Dancing Script`
`class="font-indie"`	`Indie Flower`
`class="font-lacquer"`	`Lacquer`
`class="font-lato"`	`Lato`
`class="font-lobster"`	`Lobster`
`class="font-long"`	`Long Cang`
`class="font-lora"`	`Lora`
`class="font-ma"`	`Ma Shan Zheng`
`class="font-montserrat"`	`Montserrat`
`class="font-muli"`	`Muli`
`class="font-open"`	`Open Sans`
`class="font-pacificod"`	`Pacifico`
`class="font-raleway"`	`Raleway`
`class="font-roboto"`	`Roboto`