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

@fylgja/flex-grid

v3.0.0

Published

Create a fully fledged css grid with the power of flexbox

Downloads

396

Readme

Fylgja - Flex Grid

NPM version

This our legacy grid following the more static column approach used by many.

We moved to a more flexible approach with the Auto Grid, that follows a content based approach instead.

The Flex Grid did get an upgrade in version 3, which is support for the newer Sass version, with the new module syntax. but with this version we will also started to stop supporting any development on this grid, and will just support the Flex Grid with bug fixes.

Create a complete grid using flexbox, and only set the columns you need.

Making it even smaller than other flex grids.

Installation

npm install @fylgja/flex-grid

Then include the component in to your code via;

@use "@fylgja/flex-grid";
// Or via PostCSS import
@import "@fylgja/flex-grid";

How to use

This grid does not work with a 12 columns or 24 columns layout, unlike other frameworks.

This only makes your CSS bigger with unused columns.

The power of the flex-grid is that for each media query, there are specific amount of columns set.

So for example on mobile you might only need 2 columns. Then you can set the flex-grid to only load 2 columns.

<div class="flex-grid">
    <div class="cell sm-2"></div>
    <div class="cell sm-2"></div>
</div>

Each cell size is 100% divided by $i.

Making it way more clear what size you can set.

And unlike 12 column grid you can set a 5 column grid row.

Since each column you create is based on the 100% divided by $i.

Classes

$mq = @media, e.g. .sm-2 or .lg-2

.flex-grid: Sets the grid and this is also the wrapper class. (required)

.cell: Sets the grid item (required)

  • .${mq}-${1}: the grid item size
  • .${mq}-grow: the grid item size that grows to fit the available space
  • .${mq}-shrink: the grid item size that shrinks to fit the content size

Depends on the booleans set, see config

.-gap: modifier class to set grid gap

.-fill: modifier class to make each cells content equal height, works great with cards and other flexable components.

.offset-${mq}-${i}: set the cell offset, from left.

.cell and .offset Chunks: allow you to create more complex flows.

Example:

<div class="flex-grid">
    <div class="cell md-3-2">I am taking 2/3 of the space</div>
    <div class="cell md-3">I am taking 1/3 of the space</div>
</div>

Config

By default the config is set for the smallest use case, so many configs are disabled to load only what is needed.

Booleans

| Var | Default | Description | | ------------------- | ------- | ---------------------------------------- | | $enable-flex-gap | true | Load the gap directly without gap class | | $enable-flex-fill | false | Enable the fill class | | $enable-flex-offset | false | Enable the cell offset classes | | $enable-flex-chunks | true | Enable the cell and offset chunk classes |

Setters

| Var | Default | Description | | ---------------- | ------------------------------------ | ----------------------- | | $flex-grid-gaps | () | Additional gaps | | $flex-grid-cells | xxs: 2, xs 3, sm 3, md 4, lg 4, xl 5 | Amount of cells, per MQ | | $gap-size | 1rem | The default gap size |

Breakpoints

All breakpoints are set via the Fylgja component helper @fylgja/mq, and can be changed from there or directly with $flex-grid-breakpoints map.

xxs is the version of the cell sizes and breakpoint'less version, this value is required in the map., but the key name can be anything you want it to be.

Helper (mixins)

The flex grid is build using a few helper mixins. You can use the helpers if you need a little more than the config can offer you.

| mixin | options | Description | | ----------------- | ------------- | ----------------------------- | | flex-grid-mq | $mq | Create a mq with if statement | | flex-grid-gap | $size, $class | Create a grid gap | | flex-grid-cells | $mq, $i | Create a cell sizes | | flex-grid-offsets | $mq, $i | Create a cell offset sizes |