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.

<div>
    <button className="btn-one">Cancel<button>
    <button className="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:

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

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

Gap

The gap CSS property sets the gutters between rows and columns of a flex or grid element. We use the same naming convention as margin and padding. The gap utility sizes are based on the $spacers scale, but can be customized to a different scale through the $c-gap Sass map.

The classes c-gap-{breakpoint}-{#} sets the gap CSS property which is shorthand for row-gap and column-gap. The classes c-gapx-{breakpoint}-{#} sets the column-gap CSS property; the left and right spaces between elements. The classes c-gapy-{breakpoint}-{#} sets the row-gap CSS property; the top and bottom spaces between elements.