css-fx-layout

css-fx-layout

This is a lightweight SCSS flexbox library. It is inspired by Angular's Flex-Layout and can replace the most popular functions of the (by now deprecated) Angular library.

Features

This library gives you the option between using CSS classes or data-attributes. Both options give you the same features but the CSS classes can be more verbose when you want a more complex layout. Check out the Wiki for a detailed documentation.

CSS class selectors

Using the CSS classes is more verbose but the recommended way to use this library:

• .fx-layout- and .fx-align-: CSS classes to control the flexbox container
• .fx-gap--: CSS classes to add gaps between the elements in a flex container
• .show- and .hide-: CSS classes which can be used to show/hide elements depending on the screen size
• .fx-flex and .fx-glex-grow: Classes to control flex behaviour of an element

HTML data-attribute selectors

Using the data attributes is the easiest way to use this library and easier to migrate to from Angular Flex-Layout:

• data-layout and data-layout-align: HTML attributes to be used to control the flexbox container
• data-layout-gap: attribute to add gaps between the elements in a flex container
• data-hide- and data-show-: attributes which can be used to show/hide elements depending on the screen size
• data-fx-flex and data-fx-flex-grow: Control flex behaviour of an element

Responsive API

The library provides a responsive API which allows to create different layouts for different screen sizes using known breakpoints like xs, sm, md, lg, xl and including lt- and gt- variations of them. Please check out the Wiki for details on how to use it.

SCSS Mixins

All functionality is also available as mixins to accompany this library or to create your own customized selectors.

Getting started

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 Classes	HTML Data Attributes
@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, px em, $includeResponsiveApi);	@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, px em, $includeResponsiveApi);

Examples

These are some basic examples how to use css-fx-layout. The file ./test/index.html contains more examples.

Layout

Example 1

This is the simplest example. It will make the div a flex container and align the three spans in a row:

CSS Classes	Data Attributes
<div class="fx-layout-row"> <span>One</span> <span>Two</span> <span>Three</span> </div>	<div data-layout="row"> <span>One</span> <span>Two</span> <span>Three</span> </div>

The resulting layout:

Example 2

An advanced example that aligns the items in reverse order with a gap of four pixels and vertically centered:

CSS Classes	Data Attributes
<div class="fx-layout-row fx-layout-reverse fx-align--start-x fx-align--x-center fx-gap--4px"> <span>One</span> <span>Two</span> <span>Three</span> </div>	<div data-layout="row reverse" data-layout-align="start center" data-layout-gap="4px"> <span>One</span> <span>Two</span> <span>Three</span> </div>

The resulting layout:

Example 3

Vertically and horizontally center an element in its parent.

CSS Classes	Data Attributes
<div class="fx-layout-row fx-align--center-x fx-align--x-center"> <span>One</span> </div>	<div data-layout="row" data-layout-align="center center"> <span>One</span> </div>

The resulting layout:

Show/Hide

Example 4

This will hide the first span on sm sized screens and show the second span only on lg sized screens. The third span is always visible.

CSS Classes	Data Attributes
<div> <span class="hide-sm">One</span> <span class="show-lg">Two</span> <span>Three</span> </div>	<div> <span data-hide-sm>One</span> <span data-show-lg>Two</span> <span>Three</span> </div>

Compiled CSS

There are no pre-compiled CSS files available for css-fx-layout 2 and above. Version 1 releases provided minified pre-compiled CSS files. If you are interested in them you can find and download them from the releases page.

What problem does this library solve?

Initially I created this library because I liked the convenient syntax of Angular Flex-Layout and wanted to use it in non-Angular projects and without JavaScript.

By now Angular Flex-Layout has been deprecated and this library can be a replacement for most of the popular parts.

Changelog

2.1.0 (2023-01-03)

Features

This release adds a responsive API including the commonly known breakpoint sizes of Flex Layout. In order to use the default responsive API selectors please set the bool parameter of the mixins generating the selectors to true (see the "Getting started" in the README). It is disabled per default because it negatively affects the size of the generated code and not all projects may need this.

• add responsive API using flex layout media sizes
• add mixins to default API
• add flex-row properties to parent containers of elements using .fx-flex/data-fx-flex if they are missing