npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@ptmrio/flow-utilities

v1.0.5

Published

SCSS utility classes for flexible grid layouts

Downloads

3

Readme

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.

Browser Support

Flow Utilities supports all modern browsers and IE11+.

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Author

ptmr.io - Petermeir Web Solutions

Support

If you encounter any problems or have any questions, please open an issue on the GitHub repository.