Utils
Updated on pzplUI 2.0
Text colors
Hello World
Hello World
Hello World
Hello World
Hello World
Hello World
<h3 class="text-normal">Hello World</h3>
<h3 class="text-success">Hello World</h3>
<h3 class="text-error">Hello World</h3>
<h3 class="text-danger">Hello World</h3>
<h3 class="text-info">Hello World</h3>
<h3 class="text-dark">Hello World</h3>Background colors
Hello World
Hello World
Hello World
Hello World
Hello World
Hello World
<h3 class="bg-normal">Hello World</h3>
<h3 class="bg-success">Hello World</h3>
<h3 class="bg-error">Hello World</h3>
<h3 class="bg-danger">Hello World</h3>
<h3 class="bg-info">Hello World</h3>
<h3 class="bg-dark">Hello World</h3>Images
img-fluid takes all the space of parent
img-round makes image round
<img src="./aurora-1197753_1280.jpg" alt="Aurora" class="img-fluid">
<img src="./aurora-1197753_1280.jpg" alt="Aurora" class="img-round">Floats
I'm floated to the left!
I'm floated to the right!
<h2 class="float-start">I'm floated to the left!</h2>
<h2 class="float-end">I'm floated to the right!</h2>Pointer events
Can't click!Can't click me, but you can click this!
<a href="#" class="pointer-disabled">Can't click!</a><br>
<a href="#" class="pointer-disabled">Can't click me, but you can <span class="pointer-revert">click this</span>!</a>Selector events
Try to select these texts, see what happens!Haha, no selecting of this super important content!
Selecting all of this text!
<h3 class="select-none">Haha, no selecting of this super important content!</h3>
<h3 class="select-all">Selecting all of this text!</h3>Padding and Margins
Margin adds space beetween elements, padding makes the element a bit bigger.Padding of 0!
Padding of 1!
Padding of 2!
Padding of 3!
Padding of 4!
Padding of 5!
Padding of 6!
Padding of 7!
Margin of 0!
Margin of 1!
Margin of 2!
Margin of 3!
Margin of 4!
Margin of 5!
Margin of 6!
Margin of 7!
<div class="bgWhite" style="width: 50vw;">
<div class="bg-success text-white p0">
<h4>Padding of 0!</h4>
</div>
<div class="bg-success text-white p1 consended">
<h4>Padding of 1!</h4>
</div><br>
<div class="bg-success text-white p2 consended">
<h4>Padding of 2!</h4>
</div><br>
<div class="bg-success text-white p3 consended">
<h4>Padding of 3!</h4>
</div><br>
<div class="bg-success text-white p4 consended">
<h4>Padding of 4!</h4>
</div><br>
<div class="bg-success text-white p5 consended">
<h4>Padding of 5!</h4>
</div><br>
<div class="bg-success text-white p6 consended">
<h4>Padding of 6!</h4>
</div><br>
<div class="bg-success text-white p7 consended">
<h4>Padding of 7!</h4>
</div><br><br>
<div class="bg-success text-white m0">
<h4>Margin of 0!</h4>
</div>
<div class="bg-success text-white m1">
<h4>Margin of 1!</h4>
</div><br>
<div class="bg-success text-white m2">
<h4>Margin of 2!</h4>
</div><br>
<div class="bg-success text-white m3">
<h4>Margin of 3!</h4>
</div><br>
<div class="bg-success text-white m4">
<h4>Margin of 4!</h4>
</div><br>
<div class="bg-success text-white m5">
<h4>Margin of 5!</h4>
</div><br>
<div class="bg-success text-white m6">
<h4>Margin of 6!</h4>
</div><br>
<div class="bg-success text-white m7">
<h4>Margin of 7!</h4>
</div><br>
</div>Note: you can add margins/paddings from whatever side you want! Simply use this syntax:
{margin/padding}{side}{num}
For example: ml3 will get you a margin of 3 from the left side.
Line Height 1: Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia libero voluptate, accusantium deleniti dignissimos repellat, sunt nulla eum, expedita alias inventore ex animi harum? Aliquid minus eligendi reprehenderit eum voluptatum.
Line Height 2: Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia libero voluptate, accusantium deleniti dignissimos repellat, sunt nulla eum, expedita alias inventore ex animi harum? Aliquid minus eligendi reprehenderit eum voluptatum.
Line Height 3: Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia libero voluptate, accusantium deleniti dignissimos repellat, sunt nulla eum, expedita alias inventore ex animi harum? Aliquid minus eligendi reprehenderit eum voluptatum.
Line Height 4: Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia libero voluptate, accusantium deleniti dignissimos repellat, sunt nulla eum, expedita alias inventore ex animi harum? Aliquid minus eligendi reprehenderit eum voluptatum.
Line Height 5: Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia libero voluptate, accusantium deleniti dignissimos repellat, sunt nulla eum, expedita alias inventore ex animi harum? Aliquid minus eligendi reprehenderit eum voluptatum.
Line Height 6: Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia libero voluptate, accusantium deleniti dignissimos repellat, sunt nulla eum, expedita alias inventore ex animi harum? Aliquid minus eligendi reprehenderit eum voluptatum.
<p class="line-height-1">Line Height 1: Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia libero
voluptate, accusantium deleniti dignissimos
repellat, sunt nulla eum, expedita alias inventore ex animi harum? Aliquid minus eligendi reprehenderit eum
voluptatum.</p><br>
<p class="line-height-2">Line Height 2: Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia libero
voluptate, accusantium deleniti dignissimos
repellat, sunt nulla eum, expedita alias inventore ex animi harum? Aliquid minus eligendi reprehenderit eum
voluptatum.</p><br>
<p class="line-height-3">Line Height 3: Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia libero
voluptate, accusantium deleniti dignissimos
repellat, sunt nulla eum, expedita alias inventore ex animi harum? Aliquid minus eligendi reprehenderit eum
voluptatum.</p><br>
<p class="line-height-4">Line Height 4: Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia libero
voluptate, accusantium deleniti dignissimos
repellat, sunt nulla eum, expedita alias inventore ex animi harum? Aliquid minus eligendi reprehenderit eum
voluptatum.</p><br>
<p class="line-height-5">Line Height 5: Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia libero
voluptate, accusantium deleniti dignissimos
repellat, sunt nulla eum, expedita alias inventore ex animi harum? Aliquid minus eligendi reprehenderit eum
voluptatum.</p><br>
<p class="line-height-6">Line Height 6: Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia libero
voluptate, accusantium deleniti dignissimos
repellat, sunt nulla eum, expedita alias inventore ex animi harum? Aliquid minus eligendi reprehenderit eum
voluptatum.</p>Positioning
Avalible Classes:
- .static
- .absolute
- .fixed
- .relative
- .sticky
- .bottom10, .left5, .top25, .left70, etc.
Border utils
<div class="p4 m4 bs1">
Hello World
</div>
<div class="p4 m4 bs2">
Hello World
</div>
<div class="p4 m4 bs3">
Hello World
</div>
<div class="p4 m4 bs4">
Hello World
</div>
<div class="p4 m4 bs5">
Hello World
</div>
<div class="p4 m4 bs6">
Hello World
</div>
<br>
<div class="p4 m4 br1 bg-success">
Lorem, ipsum dolor.
</div>
<div class="p4 m4 br2 bg-success">
Lorem, ipsum dolor.
</div>
<div class="p4 m4 br3 bg-success">
Lorem, ipsum dolor.
</div>
<div class="p4 m4 br4 bg-success">
Lorem, ipsum dolor.
</div>
<div class="p4 m4 br5 bg-success">
Lorem, ipsum dolor.
</div>
<div class="p4 m4 br6 bg-success">
Lorem, ipsum dolor.
</div>