#Sizing System

New
0.7.0

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.

#Sizes

As a reference, the default sizing system in Cirrus is shown below.

SizePixelsRemExample
00px0rem
18px0.5rem
216px1rem
324px1.5rem
432px2rem
540px2.5rem
648px3rem
864px4rem
1080px5rem
1296px6rem
16128px8rem
20160px10rem
24192px12rem
32256px16rem

#Example Usage

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>