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:

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