@hi_digital/easy-flex

!package version
!license
!dependency status
!Twitter URL

Easy Flex is a lightweight, simple to use scss grid system based on css flexbox. It is heavily inspired
by Coffeekraken's gridle v2.0.48
.

Easy Flex Demo Page

Table of content

1. Install
2. Quick Start
3. Mixins
1. Respond-to
2. Add custom class
4. Helper classes
1. Show / Hide
2. Prefix / Suffix
3. Push / Pull
4. Order
5. Row justify
6. Row align
7. Wrap / no wrap
8. Row reverse
9. No gutter

Install

NPM

``npm install @hi_digital/easy-flex --save-dev`

YARN

`yarn add @hi_digital/easy-flex -D`

`Quick Start`

Import easy-flex in scss.

`scss @import '@hi_digital/easy-flex';`

Define breakpoints with gutter width and vertical space for the container.

`scss @include easy-flex-breakpoint('tiny', 480px, 10px, 10px); @include easy-flex-breakpoint('small', 768px, 10px, 10px); @include easy-flex-breakpoint('medium', 1024px, 10px, 20px); @include easy-flex-breakpoint('large', 1200px, 10px, 20px); @include easy-flex-breakpoint('huge', 1440px, 20px, 40px); @include easy-flex-breakpoint('full', 1680px, 20px, 40px);`

Create the grid with container base values.

`scss @include create-easy-flex(( columns: 12, container-width: 100%, container-max-width: 1680px, gutter-width: 10px, vertical-space: 10px, ));`

Use the grid in html. Basic Markup with breakpoints:

`html


Mixins
There are some helper classes which you can use on each defined breakpoint.
$3
Easy use of media queries in scss files for each defined breakpoint. Creates a media query with min-width for the breakpoint.

`scss @include respond-to(small) { property: style; }

@include respond-to(large) { property: style; }`

`$3`

Adds a custom class for each breakpoint.

`scss @include easy-add-class(name) { property: style; }`

#### Example

`scss @include easy-add-class(tac) { text-align: center; }`

#### Usage

`html


    
        
            This column is centered @small


Helper Classes
$3

`html


    
        
            This column gets hidden @small and shown again on @large
        
        

            This column is hidden until @small


$3
The prefix and suffix classes are used to create blanks before or after a grid element.

`html .prefix-{columns-count} .prefix-{columns-count}@{breakpoint} .suffix-{columns-count} .suffix-{columns-count}@{breakpoint}`

`html


    
        
            This has 8 column width and 2 columns dead space to the right
        
        

            This has 4 column width and @small 2 columns dead space to the left


$3
The push and pull classes are used to offset the grid's elements or even swap them.

`html .push-{columns-count} .push-{columns-count}@{breakpoint} .pull-{columns-count} .pull-{columns-count}@{breakpoint}`

`html


    
        
            This has 8 column width and offset 4 columns to the right
        
        

            This has 4 column width and @small offset 6 columns to the left


$3
Change the order of the grid elements for each breakpoint. To get this to work properly, every element needs the order
class.

`html .order-{number} .order-{number}@{breakpoint} .order-first .order-first@{breakpoint} .order-last .order-last@{breakpoint}`

`html


    
        
            First element in markup is the second element displayed @small
        

        
            Second element in markup is the third element displayed @small
        

        
            Third element in markup is the first element displayed @small


$3
Sets justify content property on the row for each breakpoint

`html .row-justify-between .row-justify-between@{breakpoint}

.row-justify-around .row-justify-around@{breakpoint}

.row-justify-even .row-justify-even@{breakpoint}

.row-justify-end .row-justify-end@{breakpoint}

.row-justify-center .row-justify-center@{breakpoint}`

`$3`

Sets align items property on the row for each breakpoint

`html .row--align-center .row--align-center@{breakpoint}

.row-align-start .row-align-start@{breakpoint}

.row--align-end .row--align-end@{breakpoint}

.row-align-stretch .row--align-stretch@{breakpoint}

.row-align-baseline .row-align-baseline@{breakpoint}`

`$3`

Prevent a row from wrapping the columns on each breakpoint

`html .row-no-wrap .row-no-wrap@{breakpoint}

.row-wrap@{breakpoint}`

`html


    
        
            Does not wrap @small until @large
        
        

            Does not wrap @small until @large


$3
Changes the order of elements in a row

`html .row-reverse .row-reverse@{breakpoint}`

`html


    
        
            Does not wrap @small until @large
        
        

            Does not wrap @small until @large


$3
Removes the padding or padding left / right from grid elements

`html .no-gutter .no-gutter-left .no-gutter-right

.no-gutter@{breakpoint} .no-gutter-left@{breakpoint} .no-gutter-right@{breakpoint}`

`html


    
        
            Removes the padding right @large
        
        

            Removes the padding left @large

@hi_digital/easy-flex

!package version
!license
!dependency status
!Twitter URL

Easy Flex is a lightweight, simple to use scss grid system based on css flexbox. It is heavily inspired
by Coffeekraken's gridle v2.0.48
.

Easy Flex Demo Page

Table of content

Install

NPM

``npm install @hi_digital/easy-flex --save-dev`

YARN

`yarn add @hi_digital/easy-flex -D`

`Quick Start`

Import easy-flex in scss.

`scss @import '@hi_digital/easy-flex';`

Define breakpoints with gutter width and vertical space for the container.

Create the grid with container base values.

`scss @include create-easy-flex(( columns: 12, container-width: 100%, container-max-width: 1680px, gutter-width: 10px, vertical-space: 10px, ));`

Use the grid in html. Basic Markup with breakpoints:

`html


Mixins
There are some helper classes which you can use on each defined breakpoint.
$3
Easy use of media queries in scss files for each defined breakpoint. Creates a media query with min-width for the breakpoint.

`scss @include respond-to(small) { property: style; }

@include respond-to(large) { property: style; }`

`$3`

Adds a custom class for each breakpoint.

`scss @include easy-add-class(name) { property: style; }`

#### Example

`scss @include easy-add-class(tac) { text-align: center; }`

#### Usage

`html


    
        
            This column is centered @small


Helper Classes
$3

`html


    
        
            This column gets hidden @small and shown again on @large
        
        

            This column is hidden until @small


$3
The prefix and suffix classes are used to create blanks before or after a grid element.

`html .prefix-{columns-count} .prefix-{columns-count}@{breakpoint} .suffix-{columns-count} .suffix-{columns-count}@{breakpoint}`

`html


    
        
            This has 8 column width and 2 columns dead space to the right
        
        

            This has 4 column width and @small 2 columns dead space to the left


$3
The push and pull classes are used to offset the grid's elements or even swap them.

`html .push-{columns-count} .push-{columns-count}@{breakpoint} .pull-{columns-count} .pull-{columns-count}@{breakpoint}`

`html


    
        
            This has 8 column width and offset 4 columns to the right
        
        

            This has 4 column width and @small offset 6 columns to the left


$3
Change the order of the grid elements for each breakpoint. To get this to work properly, every element needs the order
class.

`html .order-{number} .order-{number}@{breakpoint} .order-first .order-first@{breakpoint} .order-last .order-last@{breakpoint}`

`html


    
        
            First element in markup is the second element displayed @small
        

        
            Second element in markup is the third element displayed @small
        

        
            Third element in markup is the first element displayed @small


$3
Sets justify content property on the row for each breakpoint

`html .row-justify-between .row-justify-between@{breakpoint}

.row-justify-around .row-justify-around@{breakpoint}

.row-justify-even .row-justify-even@{breakpoint}

.row-justify-end .row-justify-end@{breakpoint}

.row-justify-center .row-justify-center@{breakpoint}`

`$3`

Sets align items property on the row for each breakpoint

`html .row--align-center .row--align-center@{breakpoint}

.row-align-start .row-align-start@{breakpoint}

.row--align-end .row--align-end@{breakpoint}

.row-align-stretch .row--align-stretch@{breakpoint}

.row-align-baseline .row-align-baseline@{breakpoint}`

`$3`

Prevent a row from wrapping the columns on each breakpoint

`html .row-no-wrap .row-no-wrap@{breakpoint}

.row-wrap@{breakpoint}`

`html


    
        
            Does not wrap @small until @large
        
        

            Does not wrap @small until @large


$3
Changes the order of elements in a row

`html .row-reverse .row-reverse@{breakpoint}`

`html


    
        
            Does not wrap @small until @large
        
        

            Does not wrap @small until @large


$3
Removes the padding or padding left / right from grid elements

`html .no-gutter .no-gutter-left .no-gutter-right

.no-gutter@{breakpoint} .no-gutter-left@{breakpoint} .no-gutter-right@{breakpoint}`

`html


    
        
            Removes the padding right @large
        
        

            Removes the padding left @large