#Padding

Updated

0.7.2

These are utility classes used to add padding for any element.

#Sizes

These are the different sizes supported for padding. Note that all calculations are based around 0.5rem or 8px. You can also modify it to use a different base size other than 0.5rem within _config.scss -- see Variants below.

Class	Styles

#All Sides

Add padding on all sides of an element using the p-<size> class.

p-4

<div class="bg-indigo-100 u-round-xs text-white u-inline-flex p-4"><span class="bg-indigo-500 u-round-xs u-shadow-lg p-1">p-4</span></div>

#Both Sides

Add padding to either left and right or top and bottom with the px-<size> and py-<size> classes respectively.

px-4

py-4

<div class="bg-indigo-100 u-round-xs text-white u-inline-flex px-4"><span class="bg-indigo-500 u-round-xs u-shadow-lg p-1">px-4</span></div>
<div class="bg-indigo-100 u-round-xs text-white u-inline-flex py-4"><span class="bg-indigo-500 u-round-xs u-shadow-lg p-1">py-4</span></div>

#Single Side

For adding padding for only a single side, the class follows a convention like p<l|r|t|b>-<size>.

pl-4

pr-4

pt-4

pb-4

<div class="bg-indigo-100 u-round-xs text-white u-inline-flex pl-4"><span class="bg-indigo-500 u-round-xs u-shadow-lg p-1">pl-4</span></div>
<div class="bg-indigo-100 u-round-xs text-white u-inline-flex pr-4"><span class="bg-indigo-500 u-round-xs u-shadow-lg p-1">pr-4</span></div>
<div class="bg-indigo-100 u-round-xs text-white u-inline-flex pt-4"><span class="bg-indigo-500 u-round-xs u-shadow-lg p-1">pt-4</span></div>
<div class="bg-indigo-100 u-round-xs text-white u-inline-flex pb-4"><span class="bg-indigo-500 u-round-xs u-shadow-lg p-1">pb-4</span></div>

#Responsive

New

0.6.3.

The margin classes mentioned here support viewport based application. All you need to do is add a -<viewport> at the end of the class(es) you are using. For example, use p-3-md to apply p-3 on medium screens and above.

<div class="px-1 px-10-sm px-20-md">
    <!-- ... -->
</div>

Try out the example below yourself by resizing your browser window.

I grow with the window.

<div class="bg-purple-100 p-2 u-round-xs u-flex u-justify-center u-items-center text-white">
    <p class="bg-purple-300 u-round-xs p-3 px-10-sm px-20-md u-shadow-lg m-0">I grow with the window.</p>
</div>

For more information, visit the Viewports documentation.

#Variants

New

0.7.0

The classes specified above are the default utility classes for setting paddings. You can add, change, or remove classes within the _config.scss file of Cirrus. The generated values are dependent on the values set for the base-size and steps fields in the config.

Below is an example of what gets generated when the base-size is set to 1rem and we add 64 to the list of steps.

Recall that these configs are merged with the $default-config map.

// _config.scss
$config: (
    extend: (
        sizing-system: (
            base-size: 1rem,
            steps: (64)
        )
    )
) !default;

This would generate the following classes.

:root {
    --space-size: 1rem;
}
.p-0 {
    padding: calc(var(--space-size) * 0) !important;
}
/* ... */
.p-64 {
    padding: calc(var(--space-size) * 64) !important;
}
/* Other viewport variants for padding... */

Learn more about how to extend Cirrus to support your use cases in the Configuration documentation.

Cirrus