flexboxgrid-helpers

Helper classes for flexboxgrid

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
flexboxgrid-helpers
4301.1.37 years ago8 years agoMinified + gzip package size for flexboxgrid-helpers in KB

Readme

Flexboxgrid helper classes

About

  • Last minified version could be found in dist/flexboxgrid-helpers.min.css
  • About classnames: i tried to follow BEM(block-elementmodifier),
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