Cirrus

#Margin

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

ClassStyles
m-px
margin: 1px !important;
m-0
margin: 0rem !important;
m-1
margin: 0.5rem !important;
m-2
margin: 1rem !important;
m-3
margin: 1.5rem !important;
m-4
margin: 2rem !important;
m-5
margin: 2.5rem !important;
m-6
margin: 3rem !important;
m-8
margin: 4rem !important;
m-10
margin: 5rem !important;
m-12
margin: 6rem !important;
m-16
margin: 8rem !important;
m-20
margin: 10rem !important;
m-24
margin: 12rem !important;
m-32
margin: 16rem !important;
m-48
margin: 24rem !important;
m-64
margin: 32rem !important;
mx-px
margin-left: 1px !important; margin-right: 1px !important;
mx-0
margin-left: 0rem !important; margin-right: 0rem !important;
mx-1
margin-left: 0.5rem !important; margin-right: 0.5rem !important;
mx-2
margin-left: 1rem !important; margin-right: 1rem !important;
mx-3
margin-left: 1.5rem !important; margin-right: 1.5rem !important;
mx-4
margin-left: 2rem !important; margin-right: 2rem !important;
mx-5
margin-left: 2.5rem !important; margin-right: 2.5rem !important;
mx-6
margin-left: 3rem !important; margin-right: 3rem !important;
mx-8
margin-left: 4rem !important; margin-right: 4rem !important;
mx-10
margin-left: 5rem !important; margin-right: 5rem !important;
mx-12
margin-left: 6rem !important; margin-right: 6rem !important;
mx-16
margin-left: 8rem !important; margin-right: 8rem !important;
mx-20
margin-left: 10rem !important; margin-right: 10rem !important;
mx-24
margin-left: 12rem !important; margin-right: 12rem !important;
mx-32
margin-left: 16rem !important; margin-right: 16rem !important;
mx-48
margin-left: 24rem !important; margin-right: 24rem !important;
mx-64
margin-left: 32rem !important; margin-right: 32rem !important;
my-px
margin-top: 1px !important; margin-bottom: 1px !important;
my-0
margin-top: 0rem !important; margin-bottom: 0rem !important;
my-1
margin-top: 0.5rem !important; margin-bottom: 0.5rem !important;
my-2
margin-top: 1rem !important; margin-bottom: 1rem !important;
my-3
margin-top: 1.5rem !important; margin-bottom: 1.5rem !important;
my-4
margin-top: 2rem !important; margin-bottom: 2rem !important;
my-5
margin-top: 2.5rem !important; margin-bottom: 2.5rem !important;
my-6
margin-top: 3rem !important; margin-bottom: 3rem !important;
my-8
margin-top: 4rem !important; margin-bottom: 4rem !important;
my-10
margin-top: 5rem !important; margin-bottom: 5rem !important;
my-12
margin-top: 6rem !important; margin-bottom: 6rem !important;
my-16
margin-top: 8rem !important; margin-bottom: 8rem !important;
my-20
margin-top: 10rem !important; margin-bottom: 10rem !important;
my-24
margin-top: 12rem !important; margin-bottom: 12rem !important;
my-32
margin-top: 16rem !important; margin-bottom: 16rem !important;
my-48
margin-top: 24rem !important; margin-bottom: 24rem !important;
my-64
margin-top: 32rem !important; margin-bottom: 32rem !important;
mt-px
margin-top: 1px !important;
mt-0
margin-top: 0rem !important;
mt-1
margin-top: 0.5rem !important;
mt-2
margin-top: 1rem !important;
mt-3
margin-top: 1.5rem !important;
mt-4
margin-top: 2rem !important;
mt-5
margin-top: 2.5rem !important;
mt-6
margin-top: 3rem !important;
mt-8
margin-top: 4rem !important;
mt-10
margin-top: 5rem !important;
mt-12
margin-top: 6rem !important;
mt-16
margin-top: 8rem !important;
mt-20
margin-top: 10rem !important;
mt-24
margin-top: 12rem !important;
mt-32
margin-top: 16rem !important;
mt-48
margin-top: 24rem !important;
mt-64
margin-top: 32rem !important;
mb-px
margin-bottom: 1px !important;
mb-0
margin-bottom: 0rem !important;
mb-1
margin-bottom: 0.5rem !important;
mb-2
margin-bottom: 1rem !important;
mb-3
margin-bottom: 1.5rem !important;
mb-4
margin-bottom: 2rem !important;
mb-5
margin-bottom: 2.5rem !important;
mb-6
margin-bottom: 3rem !important;
mb-8
margin-bottom: 4rem !important;
mb-10
margin-bottom: 5rem !important;
mb-12
margin-bottom: 6rem !important;
mb-16
margin-bottom: 8rem !important;
mb-20
margin-bottom: 10rem !important;
mb-24
margin-bottom: 12rem !important;
mb-32
margin-bottom: 16rem !important;
mb-48
margin-bottom: 24rem !important;
mb-64
margin-bottom: 32rem !important;
ml-px
margin-left: 1px !important;
ml-0
margin-left: 0rem !important;
ml-1
margin-left: 0.5rem !important;
ml-2
margin-left: 1rem !important;
ml-3
margin-left: 1.5rem !important;
ml-4
margin-left: 2rem !important;
ml-5
margin-left: 2.5rem !important;
ml-6
margin-left: 3rem !important;
ml-8
margin-left: 4rem !important;
ml-10
margin-left: 5rem !important;
ml-12
margin-left: 6rem !important;
ml-16
margin-left: 8rem !important;
ml-20
margin-left: 10rem !important;
ml-24
margin-left: 12rem !important;
ml-32
margin-left: 16rem !important;
ml-48
margin-left: 24rem !important;
ml-64
margin-left: 32rem !important;
mr-px
margin-right: 1px !important;
mr-0
margin-right: 0rem !important;
mr-1
margin-right: 0.5rem !important;
mr-2
margin-right: 1rem !important;
mr-3
margin-right: 1.5rem !important;
mr-4
margin-right: 2rem !important;
mr-5
margin-right: 2.5rem !important;
mr-6
margin-right: 3rem !important;
mr-8
margin-right: 4rem !important;
mr-10
margin-right: 5rem !important;
mr-12
margin-right: 6rem !important;
mr-16
margin-right: 8rem !important;
mr-20
margin-right: 10rem !important;
mr-24
margin-right: 12rem !important;
mr-32
margin-right: 16rem !important;
mr-48
margin-right: 24rem !important;
mr-64
margin-right: 32rem !important;
Supported Pseudo-Variants
New
0.8.0
active
checked
dark
disabled
first-of-type
focus
focus-visible
focus-within
group-focus
group-hover
hover
landscape
last-of-type
light
portrait
reduce-motion
responsive
visited

See more pseudo-variants.

#Sizes

These are the different sizes supported for margins. 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.

#All Sides

Add a margin on all sides of an element using the m-<size> class.

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

#Both Sides

Add a margin to either left and right or top and bottom with the mx-<size> and my-<size> classes respectively.

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

#Single Side

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

ml-4
mr-4
mt-4
mb-4
<div class="col u-flex u-justify-center">
    <div class="bg-indigo-100 u-inline-flex u-round-xs">
        <span class="bg-indigo-500 p-1 ml-4 text-white u-round-xs u-shadow-lg">ml-4</span>
    </div>
</div>
<div class="col u-flex u-justify-center">
    <div class="bg-indigo-100 u-inline-flex u-round-xs">
        <span class="bg-indigo-500 p-1 mr-4 text-white u-round-xs u-shadow-lg">mr-4</span>
    </div>
</div>
<div class="col u-flex u-justify-center">
    <div class="bg-indigo-100 u-inline-flex u-round-xs">
        <span class="bg-indigo-500 p-1 mt-4 text-white u-round-xs u-shadow-lg">mt-4</span>
    </div>
</div>
<div class="col u-flex u-justify-center">
    <div class="bg-indigo-100 u-inline-flex u-round-xs">
        <span class="bg-indigo-500 p-1 mb-4 text-white u-round-xs u-shadow-lg">mb-4</span>
    </div>
</div>

#Responsive

New
0.6.3

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

<div class="mr-1 sm:mr-5 md:mr-10">
    <!-- ... -->
</div>

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

Shrink

Window

<div class="bg-orange-100 p-2 u-round-xs u-flex u-justify-center u-items-center">
    <p class="bg-orange-400 p-3 u-round-xs my-1 mr-1 sm:mr-5 md:mr-10 u-shadow-lg">Shrink</p>
    <p class="bg-orange-400 p-3 u-round-xs my-1 ml-1 sm:ml-5 md:ml-10 u-shadow-lg">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 margins. 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;
}
.m-0 {
    margin: calc(var(--space-size) * 0) !important;
}
/* ... */
.m-64 {
    margin: calc(var(--space-size) * 64) !important;
}
/* Other viewport variants for margin... */

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