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

  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.

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.

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