Lightweight and easy to use css flexbox grid system
npm install @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
.
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
NPM
```
npm install @hi_digital/easy-flex --save-dev
YARN
``
yarn add @hi_digital/easy-flex -D
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
`$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
``