npm package: @nfq/sass-grid
Description: A rework of react-awesome-styled-grid into SCSS with more screen classes and some features.
Author: .NFQ | M.Heuschneider & .NFQ | S.Ahmedovski
Latest version: 1.2.0

[![npm version](https://badge.fury.io/js/%40nfq%2Fsass-grid.svg)](https://badge.fury.io/js/%40nfq%2Fsass-grid)
[![npm downloads](https://img.shields.io/npm/dm/%40nfq%2Fsass-grid.svg)](https://www.npmjs.com/package/%40nfq%2Fsass-grid)
[![BundlePhobia](https://img.shields.io/bundlephobia/min/@nfq/sass-grid)](https://bundlephobia.com/result?p=%40nfq/sass-grid)
[![GitHub issues](https://img.shields.io/github/issues/nfqde/nfq-sass-grid.svg)](https://www.npmjs.com/package/%40nfq%2Fsass-grid)
![GitHub contributors](https://img.shields.io/github/contributors/nfqde/nfq-sass-grid.svg)
[![GitHub license](https://img.shields.io/badge/license-MIT-blue.svg)](https://opensource.org/license/mit/)


# SASS Grid

## Implementation

⚠️⚠️ As `@import` is deprecated use `@forward "~@nfq/sass-grid";` to implement sass grid from now on. ⚠️⚠️


```
@forward "./global/config";
@forward "@nfq/nfq-sass-grid";
@forward "@nfq/nfq-sass-grid/vars";
```

## Usage
This gird is based on scss and uses the following variables to generate the grid.
```
$dimensions: Array;
$baseSpacing: Number|String;
$breakpoints: Map;
$mediaQuery: String;
$container: Map;
$containerPaddingWidth: Map;
$columns: Number;
$gapWidth: Map;
$orderMax: Number;
$spacerMax: Number;
$customSpacer: Map;
```
It will also generate css variables for the grid. You can easily use them like this:
```
containerPadding('sm') // returns var(--container-padding-sm)
```
### Container
The ``.container`` is a wrapper for the grid. It has a max-width and a padding. The padding is based on the $containerPaddingWidth. The max-width is based on the $container map. The container is responsive and will change its width based on the $breakpoints map.

### Row
The ``.row`` is a wrapper for the columns. It has a gap that is based on the $gapWidth map. The row is responsive and will change its width based on the $breakpoints map.

* The ``.row`` has a ``.row-nowrawp`` modifyer that will set the flex-wrap to nowrap.
* You can also add a ``.row-align`` modifyer to the ``.row``. The ``.row-align`` has the following options:
  * ``.row-align-start``
  * ``.row-align-end``
  * ``.row-align-center``
  * ``.row-align-baseline``
  * ``.row-align-stretch``
* You can add a ``.row-justify`` modifyer to the ``.row``. The ``.row-justify`` has the following options:
  * ``.row-justify-start``
  * ``.row-justify-end``
  * ``.row-justify-center``
  * ``.row-justify-between``
  * ``.row-justify-around``
* Also each modifyer has a responsive version. For example ``.row-align-sm-start``.

### Column
The ``.col`` is a wrapper for the content. The column is responsive and will change its width based on the $breakpoints map.

* The ``.col`` has following modifyers:
  * ``.col-1`` to ``.col-12`` (if you set $columns to 12)
  * ``.col-auto`` for ``max-width: auto``
  * ``.col-max`` for ``max-width: max-content``
  * ``.col-min`` for ``max-width: min-content``
  * ``.col-offset-1`` to ``.col-offset-12`` (if you set $columns to 12)
  * ``col-align`` modifiyes like in the row & ``col-align-self`` for ``align-self``
  * Same as for ``justify-content``
  * And of course the responsive versions of the above.

### Spacer
The ``.spacer`` is a handy class to add some spaces it uses the ``$baseSpacing`` (0.5px by default) multiplied with your modificator and maxes out at ``$orderMax`` (12 by default).<br><br>
Use ``spacer-w-``**_n_** for width spacer and ``spacer-h-``**_n_** for height spacer.

### Utils
* ``.order-1`` to ``.order-12`` (if you set $orderMax to 12), ``.order-first`` and ``.order-last`` & responsive versions
* ``.d-none``, ``.d-block``, ``.d-inline``, ``d-flex`` & responsive versions

## Functions
* ``spacing($value)``: Returns the calc for spacing based on the baseSpacing css variable.
* ``mediaDown($breakpoint)``: Returns the media query for the given breakpoint (max-width)
* ``mediaUp($breakpoint)``: Returns the media query for the given breakpoint (min-width)
* ``mediaBetween($breakpoint1, $breakpoint2)``: Returns the media query for the given breakpoints (min-width and max-width)
* ``breakpoint($breakpoint)``: Returns the css variable of the given breakpoint
* ``columns()``: Returns the css variable of the columns
* ``container($breakpoint)``: Returns the css variable of the container width for the given breakpoint
* ``gapWidth($breakpoint)``: Returns the css variable of the gutter width for the given breakpoint
* ``containerPadding($breakpoint)``: Returns the css variable of the container padding for the given breakpoint
* ``baseSpacing()``: Returns the css variable of the base spacing
* ``lighter-color($colorName, $amount)``: Returns a lighter color based on the given color name and amount. The colorName is the css-var name and amount is a percentage.
* ``darker-color($colorName, $amount)``: Returns a darker color based on the given color name and amount. The colorName is the css-var name and amount is a percentage.
* `` transparency($variableName, $opacity)``: Returns a more translucent color based on the given color/variable name and opacity amount. The variableName is the css-var name and amount is a fraction of 1 just like opacity (e.g. .3/0.3).