2.0.0 • Published 3 years ago
FAQ
What is plexicz-css?
plexicz-css is an open source css framework. You can use it for your
PHP and HTML website.
Installation
Install MakerrZ for your website.
npm install plexicz-css
Features
- Easy Fonts
- Customize colors
- Navbar Customize
- More Buttons
Feedback
If you have any feedback, please wait to friday!
Authors
Documentation
Starter template:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- plexicz-css CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/plexicz-css@3.0.8/src/dist/css/makerrz.min.css"
/>
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>
Headings
Plexicz-css Headings
| Headings | Size-Rem | Size-Px |
|---|
H1 | 4.6rem | 46px |
H2 | 3.6rem | 36px |
H3 | 2.8rem | 28px |
H4 | 2.2rem | 22px |
H5 | 1.8rem | 18px |
H6 | 1.6rem | 16px |
| P | 1.3rem | 13px |
Plexicz-css 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 |
Plexicz-css 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 |
NavBar
Starter NavBar
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<title>Responsive Navbar | MakerrZ</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
/>
<!-- Plexicz-css CSS -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/makerrz@3.0.8/src/dist/css/makerrz.min.css"
/>
</head>
<body>
<nav>
<input type="checkbox" id="check" />
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
<label class="logo">MakerrZ NavBar</label>
<ul>
<li><a class="active" href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Feedback</a></li>
</ul>
</nav>
</body>
</html>