@ptmrio/flow-utilities NPM

Flow Utilities

npm version license

Flow Utilities is a lightweight SCSS/CSS library that provides flexible grid layout classes. It's designed to work both as a standalone solution and alongside Bootstrap, offering an intuitive way to create responsive grid layouts with minimal effort. It replaces the need for margin and padding classes by providing gap utilities for easy spacing between elements.

Features

Flexible grid system for both horizontal and vertical layouts
Responsive classes for different screen sizes
Gap utilities for easy spacing
Compatible with Bootstrap
Lightweight and easy to integrate

Installation

You can install Flow Utilities via npm or yarn:

npm install @ptmrio/flow-utilities

yarn add @ptmrio/flow-utilities

Usage

SCSS

Import in your main SCSS file:

@import '~@ptmrio/flow-utilities/src/flow-utilities';

CSS

You can also use the pre-compiled CSS. In your HTML file:

<link rel="stylesheet" href="path/to/node_modules/@ptmrio/flow-utilities/src/flow-utilities.min.css">

Or import in your CSS:

@import '~@ptmrio/flow-utilities/src/flow-utilities.min.css';

Classes

Basic Classes

.flow: Creates a vertical grid layout
.flow-h: Creates a horizontal grid layout

Column Classes

.flow-h-{n}-cols: Creates a grid with n columns (2-12)
.flow-h-even-cols: Creates a grid with evenly distributed columns

Responsive Classes

.flow-h-{breakpoint}-{n}-cols: Sets the number of columns for specific breakpoints
.flow-h-{breakpoint}-even-cols: Sets even columns for specific breakpoints

Breakpoints: sm, md, lg, xl, xxl

Gap Classes

.gap-{n}: Sets gap size (0-12), based on --spacer custom property
.gap-{breakpoint}-{n}: Sets gap size for specific breakpoints

Examples

Example 1: Basic Horizontal Layout

<div class="flow-h flow-h-3-cols gap-3">
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
</div>

What it accomplishes: This creates a 3-column horizontal layout with a gap of 1rem between each column.

Example 2: Responsive Horizontal Layout

<div class="flow-h flow-h-2-cols flow-h-md-4-cols gap-3">
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
  <div>Column 4</div>
</div>

What it accomplishes: This creates a 2-column layout that changes to 4 columns on medium-sized screens and up, with a gap of 1rem between items.

Example 3: Basic Vertical Layout

<div class="flow gap-3">
  <div>Section 1</div>
  <div>Section 2</div>
  <div>Section 3</div>
</div>

What it accomplishes: This creates a vertical layout with a gap of 1rem between each section.

Example 4: Evenly Distributed Columns

<div class="flow-h flow-h-even-cols gap-3">
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
  <div>Column 4</div>
</div>

What it accomplishes: This creates a horizontal layout with columns that are evenly distributed across the available space, with a gap of 3 units between columns.

Note: The .flow-h-even-cols class is useful when you want to distribute columns evenly across the available space. Use regular display: flex; for standard horizontal sections that don't need even distribution. The .flow-h-even-cols class is not responsive and doesn't support breakpoints.

Example 5: Responsive Vertical Layout with Gaps

<div class="flow gap-3 gap-lg-5">
  <div>Section 1</div>
  <div>Section 2</div>
  <div>Section 3</div>
</div>

What it accomplishes: This creates a vertical layout with different gap sizes for different screen sizes: a gap of 1rem units on medium screens and a gap of 3rem on large screens.

Example 6: Vertical Layout for Content Sections

<div class="flow gap-2">
  <div>Header</div>
  <div>Main Content</div>
  <div>Footer</div>
</div>

What it accomplishes: This creates a vertical layout useful for separating content sections like header, main content, and footer, with a gap of 0.5rem between each section.

Bootstrap Compatibility

Flow Utilities is designed to work alongside Bootstrap. When Bootstrap is present, it uses Bootstrap's breakpoints and spacing scale. When used standalone, it defines its own breakpoints and spacing scale. You may override the default spacing scale by setting the --spacer custom property. You can also customize the breakpoints by setting the $grid-breakpoints in either your own SCSS import or Bootstrap's _variables.scss.