@ls-apps/flex-layout v1.0.0

Flex Layout

SCSS / CSS layout framework

Homepage\ Gettings started\ Documentation

Support me on:

Getting started

Installation

Install Flex Layout via package manager using the following command:

npm install @ls-apps/flex-layout

Usage

You have several options to include Flex Layout in your project:

Import in SCSS

@use '@ls-apps/flex-layout';

or import in CSS

@import '@ls-apps/flex-layout/layout.css';

or the optimized CSS import

@import '@ls-apps/flex-layout/layout.min.css';

or import in HTML

<link rel="stylesheet" type="text/css" href="node_modules/@ls-apps/flex-layout/layout.css">

or the optimized html import

<link rel="stylesheet" type="text/css" href="node_modules/@ls-apps/flex-layout/layout.min.css">

If you don't need media queries, you can only include the basic functions

@use '@ls-apps/flex-layout/base';

Customization in SCSS

Flex Layout can be customized when importing in SCSS files. Available options are:

@use '@ls-apps/flex-layout' with (
  $percentages: (10, 20, 30, 40, 50, 60, 70, 80, 90, 100),
  $pixels: (4, 8, 12, 16, 20, 24, 28, 32),
  $queries: ('', 'xs', 'sm', 'md', 'lg', 'xl', 'gt-xs', 'gt-sm', 'gt-md', 'lt-md', 'lt-lg', 'lt-xl'),
  $content-alignments: ('start', 'center', 'end', 'space-around', 'space-between', 'space-evenly'),
  $item-alignments: ('start', 'center', 'end', 'stretch'),
  $with-reverse: false,
  $with-alignments: true,
  $with-offsets: true,
  $with-gaps: true,
  $with-flex: true,
  $with-fill: true,
  $with-hide: true
);

Alternatively, you can import specific functions. By default these are minimalistic, but can be configured:

@use 'layout/alignments';
@use 'layout/directions';
@use 'layout/fill';
@use 'layout/flex';
@use 'layout/gaps';
@use 'layout/hide';
@use 'layout/offsets';

Find out more about the options and adjustments in the Documentation.