Certain classes in Cirrus follow a framework-wide sizing system that makes finding the specific class you want very simple. The class names are suffixed with a number that is double what it is in rem. In other words, p-4 means adding a padding of 2rem to all 4 sides of a given element.
As a reference, the default sizing system in Cirrus is shown below.
| Size | Pixels | Rem | Example |
|---|---|---|---|
| 0 | 0px | 0rem | |
| 1 | 8px | 0.5rem | |
| 2 | 16px | 1rem | |
| 3 | 24px | 1.5rem | |
| 4 | 32px | 2rem | |
| 5 | 40px | 2.5rem | |
| 6 | 48px | 3rem | |
| 8 | 64px | 4rem | |
| 10 | 80px | 5rem | |
| 12 | 96px | 6rem | |
| 16 | 128px | 8rem | |
| 20 | 160px | 10rem | |
| 24 | 192px | 12rem | |
| 32 | 256px | 16rem |
Below are some examples of divs using utility classes that use the framework's sizing system.
<div class="px-3 py-2">
Left and right padding of 1.5rem.
Top and bottom padding of 1rem.
</div>
<div class="m-5">
Margin of 2.5rem on all sides.
</div>