Flexboxgrid helper classes
About
-
Helper classes for awesome flexboxgrid
-
Last minified version could be found in
dist/flexboxgrid-helpers.min.css -
About classnames: i tried to follow BEM(block-element__modifier), but for compability with bootstrap classnames-style i changed visible/hidden classnames
Installation
npm i -S flexboxgrid-helpers
Classes:
Visible & Hidden
| Phones (< 48em) | Tablets (≥ 48em) | Desktops (≥ 64em) | Desktops (≥ 75em) | |
|---|---|---|---|---|
.visible-xs-* |
Visible |
Hidden | Hidden | Hidden |
.visible-sm-* |
Hidden | Visible |
Hidden | Hidden |
.visible-md-* |
Hidden | Hidden | Visible |
Hidden |
.visible-lg-* |
Hidden | Hidden | Hidden | Visible |
.hidden-xs |
Hidden |
Visible | Visible | Visible |
.hidden-sm |
Visible | Hidden |
Visible | Visible |
.hidden-md |
Visible | Visible | Hidden |
Visible |
.hidden-lg |
Visible | Visible | Visible | Hidden |
| Group of classes | CSS display |
|---|---|
.visible-* |
display: flex; |
.visible-*-block |
display: block; |
.visible-*-inline |
display: inline; |
.visible-*-inline-block |
display: inline-block; |
flex-column
Set block's flex-direction to column
| Group of classes | Screen size |
|---|---|
.flex-column |
always |
.flex-column__xs |
Phones (< 48em) |
.flex-column__sm |
Tablets (≥ 48em) |
.flex-column__md |
Desktops (≥ 64em) |
.flex-column__lg |
Desktops (≥ 75em) |
flex-center
Set block's content align to center
| Group of classes | Behaviour | CSS rules |
|---|---|---|
.flex-center |
Center on horizontal and vertical axes | both below |
.flex-center__x |
Center on horizontal axe | justify-content: center |
.flex-center__y |
Center on vertical axe | align-items: center |
License
MIT