@hi_digital/easy-flex

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.

@import '@hi_digital/easy-flex';

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

@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.

@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:

<div class="container">
    <div class="row">
        <div class="gr-12 gr-6@small">
            content
        </div>

        <div class="gr-12 gr-6@large">
            content
        </div>

        <div class="gr-12 gr-6@small">
            content
        </div>
    </div>
</div>

Mixins

There are some helper classes which you can use on each defined breakpoint.

Respond to media query mixin

Easy use of media queries in scss files for each defined breakpoint. Creates a media query with min-width for the breakpoint.

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

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

Add custom class

Adds a custom class for each breakpoint.

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

Example

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

Usage

<div class="container">
    <div class="row">
        <div class="gr-12 gr-6@small tac@small">
            This column is centered @small
        </div>
    </div>
</div>

Helper Classes

Show / Hide

<div class="container">
    <div class="row">
        <div class="gr-12 gr-6@large hide@small show@large">
            This column gets hidden @small and shown again on @large
        </div>

        <div class="gr-6 hide show@small">
            This column is hidden until @small
        </div>
    </div>
</div>

Prefix / Suffix

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

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

<div class="container">
    <div class="row">
        <div class="gr-8 suffix-2">
            This has 8 column width and 2 columns dead space to the right
        </div>

        <div class="gr-4 prefix-2@small">
            This has 4 column width and @small 2 columns dead space to the left
        </div>
    </div>
</div>

Push / Pull

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

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

<div class="container">
    <div class="row">
        <div class="gr-8 push-4">
            This has 8 column width and offset 4 columns to the right
        </div>

        <div class="gr-4 pull-6@small">
            This has 4 column width and @small offset 6 columns to the left
        </div>
    </div>
</div>

Order

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

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

<div class="container">
    <div class="row">
        <div class="gr-6 order-2@small">
            First element in markup is the second element displayed @small
        </div>
        <div class="gr-6 order-3@small">
            Second element in markup is the third element displayed @small
        </div>
        <div class="gr-6 order-1@small">
            Third element in markup is the first element displayed @small
        </div>
    </div>
</div>

Row justify content classes

Sets justify content property on the row for each breakpoint

.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}

Row align items classes

Sets align items property on the row for each breakpoint

.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}

Row no wrap

Prevent a row from wrapping the columns on each breakpoint

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

.row-wrap@{breakpoint}

<div class="container">
    <div class="row row-no-wrap@small row-wrap@large">
        <div class="gr-12 gr-6@small">
            Does not wrap @small until @large
        </div>

        <div class="gr-12 gr-6@small">
            Does not wrap @small until @large
        </div>
    </div>
</div>

Row reverse

Changes the order of elements in a row

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

<div class="container">
    <div class="row row-no-wrap@small row-wrap@large">
        <div class="gr-12 gr-6@small">
            Does not wrap @small until @large
        </div>

        <div class="gr-12 gr-6@small">
            Does not wrap @small until @large
        </div>
    </div>
</div>

No gutter

Removes the padding or padding left / right from grid elements

.no-gutter
.no-gutter-left
.no-gutter-right

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

<div class="container">
    <div class="row">
        <div class="gr-12 gr-6@small no-gutter-right@large">
            Removes the padding right @large
        </div>

        <div class="gr-12 gr-6@small no-gutter-left@large">
            Removes the padding left @large
        </div>
    </div>
</div>