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 classes

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-attributes

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

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 choose to use CSS class selectors: @include fx.class-selectors; @include fx.gap-class-selectors(1, 16, px em);	@use "css-fx-layout" as fx; // If you choose to use attribute selectors: @include fx.attribute-selectors; @include fx.gap-attribute-selectors(1, 16, px em);

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 phones and show the second span only on desktop sizes. The third span is always visible.

CSS Classes	Data Attributes
<div> <span class="hide-phone">One</span> <span class="show-desktop">Two</span> <span>Three</span> </div>	<div> <span data-hide-phone>One</span> <span data-show-desktop>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 issue 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.0.0 (2022-12-27)

Breaking Changes and New Features

The library now only exposes mixins which can be used to generate the desired CSS selectors. There also won't be pre-compiled CSS files available with the releases anymore.

The available selectors don't change. You only have to include the library differently. Please consult the README or the Wiki for detailed instructions on how to get you started with css-fx-layout.