Skip to main contentSkip to search
Clay
  • Get Started
    • How to Use Clay
    • Composition Philosophy
    • How to Read This Documentation
    • Migrating From v2.x
    • Using Clay in JSPs
  • Components
    • Alert
    • Application Bar
    • Aspect Ratio
    • Autocomplete
    • Badge
    • Breadcrumb
    • Button Group
    • Buttons
    • Card
    • Chart
    • Color Picker
    • Data Provider
    • Date Picker
    • DropDown
    • Empty State
    • Form
      • Checkbox
      • Dual List Box
      • Input
      • Radio Group
      • Select
      • Select Box
      • Toggle Switch
    • Forms Hierarchy
    • Heading
    • Icon
    • Label
    • Layout
    • Link
    • List
    • Loading Indicator
    • Localized Input
    • Management Toolbar
    • Modal
    • Multi Select
    • Multi Step Nav
    • Nav
    • Navigation Bar
    • OverlayMask
    • Pagination
    • Pagination Bar
    • Panel
    • Picker
    • Popover
    • Progress Bar
    • Provider
    • Sidebar
    • Slider
    • Sticker
    • Table
    • Tabs
    • Text
    • Timelines
    • Time Picker
    • Toolbar
    • Tooltip
    • TreeView
    • Upper Toolbar
    • VerticalBar
    • Vertical Navigation
  • Contributing
  • CSS Framework
    • Paver
    • SCSS
    • Color
    • Grid
    • Content
      • Typography
      • C Kbd
    • Utilities
      • Accessibility
      • Autofit
      • Border
      • C Focus Inset
      • C Inner
      • Color Utilities
      • C Spacing Utilities
      • Display
      • Flex
      • Float
      • Inline Item
      • Overflow
      • Position
      • Shadow
      • Text
      • Vertical Align
      • Visibility
      • Width and Height
    • Playground
  • Examples
K
  • Docs
  • Sass API
  • Blog
  • Storybook
  • Codesandbox
  • Github
  • Use this menu to toggle between Atlas and Base Themes.

C Spacing Utilities

  • How to Read the Class
  • How to Understand the Class
  • How to Use the Class
  • Gap

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.

Copied!
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:

Copied!
Code Sample (expand to see it)
.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.

c-gap-3
1
2
3
4
5
6
c-gapx-3
1
2
3
4
5
6
c-gapy-3
1
2
3
4
5
6

How can this be improved? Create an issue!