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

npm page

Classes:

$3

  | 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;

$3

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)

$3

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