README

@graficos/graficols

Motivation

I turned this gist into a library (my first one ever) because I use variations of the same in several projects.

What it includes

There's a defined list of column (will be percetages):

// note the ellipsis is for explanation purposes only
$G_CONTAINER_WIDTHS: (5, 10, 20..., 50, ..., 100)

A set of breackpoints:

$G_WINDOW_DIMENSIONS: (
    // edit / add BPs as you please
    sm: '(max-width: 64em)',
    md: '(min-width: 64.01em) and (max-width: 87.99em)',
    xl: '(min-width: 88em)',
);

The actual mixin gGenerateCols wich is the one you will use on your scss.

Usage

Installation
```
npm i @graficos/graficols
```
Import the scss file. Depending on your environment or bundling system, you might have a defined way of doing this. Examples:

Import in an Angular project: link
In Nuxt.js: link
Using Webpack and adding an alias: link
Using Parcel: link
In a Vanilla project:
- Add a .sassrc file in your root directory with the following content:
```
{
  "includePaths": ["node_modules"]
}
```
- Then, you can @import from your SCSS files using ~:
```
@import "~@graficos/graficols/graficols";
// ... use the mixin here :)
```

Re-define the collections (G_CONTAINER_WIDTHS and $G_WINDOW_DIMENSIONS) if you please.
@include the mixin like so:

// with no @media queries
@include gGenerateCols(null);
// -> will create dynamic classes: min-w50p, max-w50p, w50p, push50p, pull50p

// with media queries
@each $mediaName, $mediaValue in $G_WINDOW_DIMENSIONS {
  @media #{ $mediaValue } {
    @include gGenerateCols($mediaName);
  }
}
// -> will create: (tailwind style) xl:min-w50p (using the keys from $G_WINDOW_DIMENSIONS as class prefixes)

Recommendation

It is recommended to use https://www.purgecss.com along with this library because most of the generated css classes will not be used in production, most likely.