🐝 Getting Started

Installation

Add the library to your project's package.json:

npm i -s css-fx-layout

Then use the provided mixins in your main stylesheet to include the css-fx-layout selectors. You can choose between using CSS classes or HTML data attributes (or, while not recommended, use both). If you want to use the layout-gap functionality you can customise which selectors are going to be generated by providing the start, end and unit as shown in the example below.

css-fx-layout includes a responsive API which is not included per default. If you want to use the responsive API please set the corresponding parameter of the mixins to true as shown in the examples below.

tip

You should customize the included mixins using their parameters. If you don't need the functionality provided by a mixin and the selectors it generates you can simply omit it. Only pick what you need to keep your code base small.

Using attributes

@use "css-fx-layout" as fx;

// If you want to include the responsive API selectors
$includeResponsiveApi: true;

// If you choose to use attribute selectors:
@include fx.attribute-selectors($includeResponsiveApi);
@include fx.gap-attribute-selectors(1, 16, 1, px em, $includeResponsiveApi);
@include fx.gap-attribute-selectors-from-list(32 48, px em, $includeResponsiveApi);
@include fx.flex-size-attribute-selectors(5, 100, 5, $includeResponsiveApi);
@include fx.flex-size-attribute-selectors-from-list(33 66, $includeResponsiveApi);

Using CSS classes

@use "css-fx-layout" as fx;

// If you want to include the responsive API selectors
$includeResponsiveApi: true;

// If you choose to use CSS class selectors:
@include fx.class-selectors($includeResponsiveApi);
@include fx.gap-class-selectors(1, 16, 1, px em, $includeResponsiveApi);
@include fx.gap-class-selectors-from-list(32 48, px em, $includeResponsiveApi);
@include fx.flex-size-class-selectors(5, 100, 5, $includeResponsiveApi);
@include fx.flex-size-class-selectors-from-list(33 66, $includeResponsiveApi);

Ready to go

Done. You can now start using the css-fx-layout selectors. Continue reading the docs to find out more about the available selectors and for examples.