Spacing

Barebones includes margin, padding and gap utility classes generated from a Sass spacing map.

Spacing values are based on the theme’s base spacing unit, so utilities stay consistent with the default typography rhythm.

Spacing scale

Spacing is configured in assets/styles/config/_variables.scss.

$base-font-size: 16;
$base-line-height: 1.5;
$base-spacing-unit: ($base-font-size * $base-line-height) * 1px;

$spacings: (
    'xl' ($base-spacing-unit * 4),
    'lg' ($base-spacing-unit * 3),
    'md' ($base-spacing-unit * 2),
    'sm' ($base-spacing-unit * 1),
    'xs' ($base-spacing-unit * 0.5),
    'none' 0,
);

With the default settings, the base spacing unit is 24px.

Available sizes

The default spacing keys are:

xl
lg
md
sm
xs
none

These keys are used to generate margin and padding classes.

Padding utilities

Padding utility classes follow this pattern: p{side}-{size}.

<div class="pt-md">Padding top</div>
<div class="pb-md">Padding bottom</div>
<div class="pl-md">Padding left</div>
<div class="pr-md">Padding right</div>
<div class="py-md">Padding top and bottom</div>
<div class="px-md">Padding left and right</div>

The side prefixes are:

t: top
b: bottom
l: left
r: right
y: top and bottom
x: left and right

Margin utilities

Margin utility classes follow this pattern: m{side}-{size}.

<div class="mt-md">Margin top</div>
<div class="mb-md">Margin bottom</div>
<div class="ml-md">Margin left</div>
<div class="mr-md">Margin right</div>
<div class="my-md">Margin top and bottom</div>
<div class="mx-md">Margin left and right</div>

The same side prefixes are used for margin and padding utilities.

Removing spacing

Use the none size to remove spacing.

<div class="mb-none">
    No bottom margin
</div>

<div class="py-none">
    No vertical padding
</div>

Responsive spacing

Spacing utilities are generated for each breakpoint.

Responsive spacing classes follow this pattern: {breakpoint}:{utility}.

<section class="py-lg sm:py-md xs:py-sm">
    Content
</section>

<div class="lg:pt-xl">Large breakpoint top padding</div>
<div class="md:mb-lg">Medium breakpoint bottom margin</div>
<div class="sm:px-sm">Small breakpoint horizontal padding</div>
<div class="xs:py-xs">Extra-small breakpoint vertical padding</div>

Changing spacing values

Change the spacing scale in the $spacings map.

After changing spacing values, rebuild the compiled CSS with npm run build.

Gap utilities

Gap utilities apply the same $spacings scale to the CSS gap property. Use them on Grid or Flexbox containers.

Available classes are:

gap-xl
gap-lg
gap-md
gap-sm
gap-xs
gap-none

<div class="row gap-lg">
    <div class="col col--lg-6 col--md-6 col--sm-12 col--xs-12">
        Column 1
    </div>
    <div class="col col--lg-6 col--md-6 col--sm-12 col--xs-12">
        Column 2
    </div>
</div>

<div class="layout-grid grid--lg-3x gap-none">
    ...
</div>