Version: 1.0.0

Spacing

The design system uses multiples of 4px for all spacing values: dimensions, padding, and margins. The goal behind this is to achieve a consistent vertical rhythm and to reduce the cognitive load of fiddling with different spacing options.

Spacing is considered a tool for distributing content and components on a webpage. Kognifai Design System provides an easy-to-use concept, mixins and utility classes to apply and maintain spacing within and between components.

Note: These utilities are helpers, not rules. Based on context, you always have to ensure that the things you’re building look good. If that requires you to manually add unique values for margin or padding to get it “just right”, please do so. Still, try to keep custom overrides to a minimum.

We use a set of sizes to help control the use of spacing in Kognifai Design System. All sizes are defined in the file _conf_spacing.scss.

Sizes

none
0px
nano
2px
tiny
4px
mini
8px
small
12px
base
16px
moderate
20px
medium
24px
large
32px
xlarge
48px
xxlarge
64px
xxxlarge
128px

Use spacing in HTML

As with grid-classes, you can apply classes for spacing into your HTML. Spacing-classes use a similar syntax when it comes to responsive design as grids, namely using the @-symbol for scoping when a spacing-class should have effect. As with grids, the scoping conditions for spacing follow the same global breakpoints definition.

Here is an example snippet. Notice the classes used on the kx-col-element.

<link rel="stylesheet" href="path-to-designsystem-css"/>

<div class="kx-p--base kx-p--xlarge@tab-m kx-p--xxxlarge@ltp-m">
    <h2>Responsive padding!</h2>
    <p>Try resizing your browsers</p>
</div>

Here is how it looks. Try resizing your browser to se the padding change.

Responsive padding!

Try resizing your browsers

Where kx-m or kx-p is margin or padding.
Where x, y, l, r, t or b is the direction in which the margin or padding is applied. Like this: kx-py, kx-mx, kx-pb etc.
Where none, nano, tiny, mini, small, base, moderate, medium large, large, xlarge, xxlarge, xxxlarge, or auto is the $size of the margin or padding applied.
Where @ is the breakpoint from which the margin or padding is applied.
auto is, in most situations, only supported for ml, mr or mx. W3C spec says it like this: “If “margin-top” or “margin-bottom” is “auto”, their used value is 0″. But if used together with flexbox utilities like kx-flex-column and kx-align-items, they do actually work. Read more about Flexobox utilities.

Use spacing in Scss

If you use Scss, we provide simple mixins that can be used directly in your stylesheet. Let’s use the same example from above:

@import 'path-to/conf_mq'; // Definition for media queries
@import 'path-to/conf_spacing'; // Definition for spacing
@import 'path-to/mq'; // Mixins for Media Queries
@import 'path-to/mix_spacing'; // Mixins for Media Queries

.foo {
    @include p(base);

    @include mq($from: tab-m) {
        @include p(xlarge);
    }
}

The example above compiles to the following css:

.foo {
    padding: 1rem; /* = 16px*/
}

@media all and (min-width: 48.0625rem) {
    .foo {
        padding: 3rem; /* = 48px*/
    }
}

This snippet sets a default value for padding on a component called .foo. If viewport size is larger than “a medium tablet” (tab-m = 769px = 48.0625rem), the padding increases from 16px to 48px in all directions. Quite simple!

Margin

m($size)
m($y, $x)
m($t, $x, $b)
m($t, $r, $b, $l)
mx($size)
mx($r, $l)
my($size)
my($t, $b)
mt($size)
mr($size)
mb($size)
ml($size)

Padding

p($size)
p($y, $x)
p($t, $x, $b)
p($t, $r, $b, $l)
px($size)
px($r, $l)
py($size)
py($t, $b)
pt($size)
pr($size)
pb($size)
pl($size)

Directions

none - margin/padding on all sides
x - margin/padding on the left and right
y - margin/padding on the top and bottom
l - margin/padding on the left
r - margin/padding on the right
t - margin/padding on the tom
b - margin/padding on the bottom
auto - margin auto either left, right or both

Sizes​

Use spacing in HTML​

Responsive padding!

Use spacing in Scss​

Margin​

Padding​

Directions​

Learn more​