Skip to main content
Version: Next

Attribute Gap API

This page describes how to use the attribute based gap API to add gaps between elements inside a flex container.

Configuration​

The gap selectors are customisable and need to be included using the provided mixins:

@include fx.gap-attribute-selectors(1, 8, 1, px em, $includeResponsiveApi);
@include fx.gap-attribute-selectors-from-list(16 32 48, px em, $includeResponsiveApi);

There you can decide which sizes and units you want selectors to be generated for and whether to include selectors for the responsive API or not.

The above example generates selectors for all sizes from 1 to 8 px and em and additionally for 16, 32 and 48 px and em.

data-layout-gap attribute​

Values​

Value format: "<number><unit>".

With <number> being a number that is included in your generated selectors and <unit> being a unit you chose the selectors to be generated for.

Example​

<div data-layout="row reverse"
     data-layout-align="start center"
     data-layout-gap="4px">
    <span>One</span>
    <span>Two</span>
    <span>Three</span>
</div>
Layout Gap Example