https://github.com/lgg/flexboxgrid-helpers
Helper classes for flexboxgrid
https://github.com/lgg/flexboxgrid-helpers
Last synced: 3 months ago
JSON representation
Helper classes for flexboxgrid
- Host: GitHub
- URL: https://github.com/lgg/flexboxgrid-helpers
- Owner: lgg
- Created: 2016-08-12T14:28:41.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2017-06-28T14:18:35.000Z (over 8 years ago)
- Last Synced: 2025-09-20T23:21:26.049Z (4 months ago)
- Language: CSS
- Size: 10.7 KB
- Stars: 46
- Watchers: 5
- Forks: 8
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Flexboxgrid helper classes
## About
* Helper classes for [awesome flexboxgrid](https://github.com/kristoferjoseph/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](https://www.npmjs.com/package/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