npm package: @savecash/primesaver-flex
Description: PrimeSaver Flex is a lightweight flex based responsive layout utility optimized for mobile phones, tablets and desktops
Author: SaverCash
Latest version: 1.0.1

# PrimeFlex
PrimeFlex is a lightweight flex based responsive layout utility optimized for mobile phones, tablets and desktops.


### Getting Started
FlexGrid is a CSS utility based on flexbox. For more information about Flex, visit [A Complete Guide to Flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/). A basic grid is defined by giving a container **ps-grid** class and children the **ps-col** class. Children of the grid will have the same width and scale according to the width of the parent.

```html
<div class="ps-grid">
    <div class="ps-col">1</div>
    <div class="ps-col">2</div>
    <div class="ps-col">3</div>
</div>
```

### Direction
Default direction is "row" and **ps-dir-\*** class at the container defines the other possible directions which can be "row reverse", "column" and "column reverse".

```html
<!-- Row Reverse -->
<div class="ps-grid ps-dir-rev">
    <div class="ps-col">1</div>
    <div class="ps-col">2</div>
    <div class="ps-col">3</div>
</div>

<!-- Column -->
<div class="ps-grid ps-dir-col">
    <div class="ps-col">1</div>
    <div class="ps-col">2</div>
    <div class="ps-col">3</div>
</div>

<!-- Column Reverse -->
<div class="ps-grid ps-dir-col-rev">
    <div class="ps-col">1</div>
    <div class="ps-col">2</div>
    <div class="ps-col">3</div>
</div>
```

### 12 Column Grid
FlexGrid includes a 12 column based layout utility where width of a column is defined with the **ps-col-{number}** style class. Columns with prefined widths can be used with columns with auto width (ps-col) as well.

In the first example below, first column covers the 4 units out of 12 and the rest of the columns share the remaining space whereas in the second example, all three columns have explicit units.

```html
<div class="ps-grid">
    <div class="ps-col-4">4</div>
    <div class="ps-col">1 </div>
    <div class="ps-col">1 </div>
    <div class="ps-col">1 </div>
    <div class="ps-col">1 </div>
    <div class="ps-col">1 </div>
    <div class="ps-col">1 </div>
    <div class="ps-col">1 </div>
    <div class="ps-col">1 </div>
</div>

<div class="ps-grid">
    <div class="ps-col-2">2</div>
    <div class="ps-col-6">6</div>
    <div class="ps-col-4">4</div>
</div>
```

### Multi Line
When the number of columns exceed 12, columns wrap to a new line.

```html
<div class="ps-grid">
    <div class="ps-col-6">6</div>
    <div class="ps-col-6">6</div>
    <div class="ps-col-6">6</div>
    <div class="ps-col-6">6</div>
</div>
```

### Fixed Width Column
A column can have a fixed width while siblings having auto width. Apply **ps-col-fixed** class to fix a column width.

```html
<div class="ps-grid">
    <div class="ps-col-fixed" style="width:100px">Fixed</div>
    <div class="ps-col">Auto</div>
</div>
```

### Responsive

Responsive layout is achieved by applying breakpoint specific classes to the columns whereas **ps-col-\*** define the default behavior for mobile devices with small screens. Four screen sizes are supported with different breakpoints.

* ps-sm-\* : min-width 576px
* ps-md-\* : min-width 768px
* ps-lg-\* : min-width 992px
* ps-xl-\* : min-width 1200px

In example below, large screens display 4 columns, medium screens display 2 columns in 2 rows and finally on small devices, columns are stacked.


```html
<div class="ps-grid">
    <div class="ps-col-12 ps-md-6 ps-lg-3">A</div>
    <div class="ps-col-12 ps-md-6 ps-lg-3">B</div>
    <div class="ps-col-12 ps-md-6 ps-lg-3">C</div>
    <div class="ps-col-12 ps-md-6 ps-lg-3">D</div>
</div>
```

### Horizontal Alignment

**ps-justify-\*** classes are used on the container element to define the alignment along the main axis.

* ps-justify-start: (default) Items are packed toward the start line
* ps-justify-end : Items are re packed toward to end line
* ps-justify-center : Items are centered along the line
* ps-justify-between: Items are evenly distributed in the line; first item is on the start line, last item on the end line
* ps-justify-around: Items are evenly distributed in the line with equal space around them.
* ps-justify-even: Items are distributed so that the spacing between any two items (and the space to the edges) is equal.

```html
<div class="ps-grid ps-justify-between">
    <div class="ps-col-2">2</div>
    <div class="ps-col-1">1</div>
    <div class="ps-col-4">4</div>
</div>
```

### Vertical Alignment
***ps-align-\*** classes are used on the container element to define the alignment along the cross axis.

* ps-align-stretch: (default) Stretch to fill the container.
* ps-align-start : Cross-start margin edge of the items is placed on the cross-start line
* ps-align-end :	Cross-end margin edge of the items is placed on the cross-end line
* ps-align-center : Items are centered in the cross-axis
* ps-align-baseline : Items are aligned such as their baselines align

```html
<div class="ps-grid ps-align-center">
    <div class="ps-col">4</div>
    <div class="ps-col">4</div>
    <div class="ps-col">4</div>
</div>
```

Vertical alignment can also be defined at column level with the **ps-col-align-\*** classes

* ps-col-align-stretch : (default) Stretch to fill the container.
* ps-col-align-start : Cross-start margin edge of the items is placed on the cross-start line
* ps-col-align-end :	Cross-end margin edge of the items is placed on the cross-end line
* ps-col-align-center : Items are centered in the cross-axis
* ps-col-align-baseline : Items are aligned such as their baselines align

```html
<div class="ps-grid">
    <div class="ps-col ps-col-align-start">
        <div class="box">4</div>
    </div>
    <div class="ps-col ps-col-align-center">
        <div class="box">4</div>
    </div>
    <div class="ps-col ps-col-align-end">
        <div class="box">4</div>
    </div>
</div>
```

### Offset
Offset classes allow defining a left margin on a column to avoid adding empty columns for spacing.

```html
<div class="ps-grid">
    <div class="ps-col-6 ps-offset-3">6</div>
</div>

<div class="ps-grid">
    <div class="ps-col-4">4 </div>
    <div class="ps-col-4 ps-offset-4">4</div>
</div>
```

The list of offset classes varying within a range of 1 to 12.

* ps-col-offset-\* : All screens
* ps-sm-offset-\* : min-width: 576px
* ps-md-offset-\* : min-width: 768px
* ps-lg-offset-\* : min-width: 992px
* ps-xl-offset-\* : min-width: 1200px

### Nested
Columns can be nested to create more complex layouts.

```html
<div class="ps-grid">
    <div class="ps-col-8">
        <div class="ps-grid">
            <div class="ps-col-6">
                6
            </div>
            <div class="ps-col-6">
                6
            </div>
            <div class="ps-col-12">
                12
            </div>
        </div>
    </div>
    <div class="ps-col-4">
        4
    </div>
</div>
```

### Gutter
A .5 em padding is applied to each column along with negative margins on the container element, in case you'd like to remove these gutters, apply **.ps-nogutter** class to the container. Note that this will not only remove the negative margins of the container, but also the padding of the columns.

```html
<div class="ps-grid ps-nogutter">
    <div class="ps-col">1</div>
    <div class="ps-col">2</div>
    <div class="ps-col">3</div>
</div>
```

Gutters can also be removed from individual columns with the **.ps-col-nogutter** class.
```html
<div class="ps-grid">
    <div class="ps-col">1</div>
    <div class="ps-col ps-col-nogutter">2</div>
    <div class="ps-col">3</div>
</div>
```