C Spacing Utilities

How to Read the Class
How to Understand the Class
How to Use the Class

Utility classes for the spacing in your pages. (without the !important attribute)

How to Read the Class

Example: c-mt-sm-3.

Meaning: {prefix}-{type}{direction}-{breakpoint}-{value}.

SCSS: @include media-breakpoint-up(sm) { margin-top: 1rem; }.

CSS: @media(min-width: 576px) { margin-top: 1rem; }. (576px can change depending on the site's configuration)

How to Understand the Class

c is the prefix and it stands for Clay. All the new classes have this prefix to avoid conflicts with other frameworks.

m is the type of spacing you need. In this case it stands for margin but you probably will find p for padding. (example: c-pt-sm-3 means @media(min-width: 576px) { padding-top: 1rem; })

t is the direction in this case it stands for top but you probably will find:

r - right
b - bottom
l - left
y - top and bottom (vertical axis)
x - right and left (horizontal axis)
empty - when this value is not present it means you are applying this spacing to all the directions (example: c-m-sm-3 means @media(min-width: 576px) { margin: 1rem; } )

sm is the breakpoint where this rule starts to work, in this case started from sm, but we can also have: (see Grid Documentation)

sm - started from sm - started from 576px
md - started from md - started from 768px
lg - started from lg - started from 992px
xl - started from xl - started from 1200px

3 is the value of the spacing you want to assign in the example. By default the spaces are:

0 - 0rem - 0px
1 - 0.25rem - 4px
2 - 0.5rem - 8px
3 - 1rem - 16px
4 - 1.5rem - 24px
5 - 3rem - 48px
6 - 4.5rem - 72px
7 - 6rem - 96px
8 - 7.5rem - 120px
auto - will set the value to auto

These spaces can be negative if we use n before the value, that means:

n1 | -0.25rem | -4px
n2 | -0.5rem | -8px
n3 | -1rem | -16px
n4 | -1.5rem | -24px
n5 | -3rem | -48px
n6 | -4.5rem | -72px
n7 | -6rem | -96px
n8 | -7.5rem | -120px

How to Use the Class

The best usage of these classes take place in a responsive scenario:

Let's focus on the buttons Publish and Cancel.

We are leaving the style of these buttons to the classes btn-one and btn-two and taking care of the spacing using c-mt-3 c-mt-sm-0 c-ml-sm-3.

Code Sample (expand to see it)

<div>
    <button class="btn-one">Cancel<button>
    <button class="btn-two c-mt-3 c-mt-sm-0 c-ml-sm-3">Publish<button>
</div>

If we translated these classes into CSS, this would be the result:

Code Sample (expand to see it)

.btn-two {
	margin-top: 1rem;

	@media (min-width: 576px) {
		margin-top: 0;
		margin-left: 1rem;
	}
}