Spacing

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

1. none

   0px
2. nano

   2px
3. tiny

   4px
4. mini

   8px
5. small

   12px
6. base

   16px
7. moderate

   20px
8. medium

   24px
9. large

   32px
10. xlarge

    48px
11. xxlarge

    64px
12. 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@all 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.

• 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.

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!