Skip to content

Latest commit

 

History

History
245 lines (186 loc) · 5.56 KB

README.md

File metadata and controls

245 lines (186 loc) · 5.56 KB
Raw

css-fx-layout

CircleCI npm version

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 1

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 2

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:

Example 3

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.