Spacing
CAKE includes a wide range of shorthand responsive margin and padding utility classes to modify an element's appearance.
How it works#
Assign responsive-friendly margin or padding values to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. Classes are built from a default Sass map ranging from .5rem to 8rem.
Notation#
Spacing utilities that apply to all breakpoints, from xs to lg, have no breakpoint abbreviation in them. This is because those classes are applied from min-width: 0 and up, and thus are not bound by a media query. The remaining breakpoints, however, do include a breakpoint abbreviation.
The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md and lg.
Where property is one of:
m- for classes that setmarginp- for classes that setpadding
Where sides is one of:
t- for classes that setmargin-toporpadding-topb- for classes that setmargin-bottomorpadding-bottoml- for classes that setmargin-leftorpadding-leftr- for classes that setmargin-rightorpadding-rightx- for classes that set both*-leftand*-righty- for classes that set both*-topand*-bottom- blank - for classes that set a
marginorpaddingon all 4 sides of the element
For the size you have to look at the horizontal and vertical spaces separately. While the horizontal spaces are available in 17 different sizes (0, 1, 2 ... 14, 15, 16), for the vertical spaces there are only 6 different sizes (0, 1, 2, 4, 8, 16). The margin and padding on all 4 sides behaves exactly like the vertical spaces.
Where size for sides l, r, x is one of:
0- for classes that eliminate themarginorpaddingby setting it to01- (by default) for classes that set themarginorpaddingto$spacer * 12- (by default) for classes that set themarginorpaddingto$spacer * 23- (by default) for classes that set themarginorpaddingto$spacer * 34- (by default) for classes that set themarginorpaddingto$spacer * 45- (by default) for classes that set themarginorpaddingto$spacer * 56- (by default) for classes that set themarginorpaddingto$spacer * 67- (by default) for classes that set themarginorpaddingto$spacer * 78- (by default) for classes that set themarginorpaddingto$spacer * 89- (by default) for classes that set themarginorpaddingto$spacer * 910- (by default) for classes that set themarginorpaddingto$spacer * 1011- (by default) for classes that set themarginorpaddingto$spacer * 1112- (by default) for classes that set themarginorpaddingto$spacer * 1213- (by default) for classes that set themarginorpaddingto$spacer * 1314- (by default) for classes that set themarginorpaddingto$spacer * 1415- (by default) for classes that set themarginorpaddingto$spacer * 1516- (by default) for classes that set themarginorpaddingto$spacer * 16auto- for classes that set themarginto auto
Where size for sides t, b, y, m is one of:
0- for classes that eliminate themarginorpaddingby setting it to01- (by default) for classes that set themarginorpaddingto$spacer * 12- (by default) for classes that set themarginorpaddingto$spacer * 24- (by default) for classes that set themarginorpaddingto$spacer * 48- (by default) for classes that set themarginorpaddingto$spacer * 816- (by default) for classes that set themarginorpaddingto$spacer * 16auto- for classes that set themarginto auto
(You can add more sizes by adding entries to the $spacers Sass map variable.)
Examples#
Here are some representative examples of these classes:
.mt-0 {
margin-top: 0 !important;
}
.ml-1 {
margin-left: ($spacer * 1) !important;
}
.px-2 {
padding-left: ($spacer * 2) !important;
padding-right: ($spacer * 2) !important;
}
.p-4 {
padding: ($spacer * 4) !important;
}Horizontal centering#
Additionally, CAKE also includes an .mx-auto class for horizontally centering fixed-width block level content—that is, content that has display: block and a width set—by setting the horizontal margins to auto.
<div class="mx-auto" style="width:100px;background-color:rgba(86,61,124,.15)">Centered element</div>
Negative margin#
In CSS, margin properties can utilize negative values (padding cannot). We've added negative margin utilities for every non-zero integer size listed above (horizontal: 1, 2 ... 15, 16; vertical: 1, 2, 4, 8, 16). These utilities are ideal for customizing grid column gutters across breakpoints.
The syntax is nearly the same as the default, positive margin utilities, but with the addition of n before the requested size. Here's an example class that's the opposite of .mt-1:
.mt-n1 {
margin-top: -0.5rem !important;
}Here's an example of customizing the CAKE grid at the medium (md) breakpoint and above. We've increased the .col padding with .px-md-5 and then counteracted that with .mx-md-n5 on the parent .row.
Negative margin#
<div class="row mx-md-n5">
<div class="col px-md-5">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
<div class="col px-md-5">
<div class="p-3 border bg-light">Custom column padding</div>
</div>
</div>