Modern 12 column grid system based on flex property.
→ Documentation
Forked from evgenyrodionov/flexboxgrid2 because original project seems to be abandoned for me. also i required a bit more change to the core. so i forked it.
| Device Type |
Min Width |
Max Width |
xs |
0 |
575px |
sm |
576px |
767px |
md |
768px |
991px |
lg |
992px |
1199px |
xl |
1200px |
∞ |
| Class Name |
Usage |
wpo-container |
Fixed Width Container |
wpo-container-fluid |
Full Width Container |
wpo-row |
Column Row |
wpo-col-xs-* |
Extra small Device Columns from wpo-col-xs to wpo-col-xs-12 |
wpo-col-sm-* |
Small Device Columns from wpo-col-sm to wpo-col-sm-12 |
wpo-col-md-* |
Medium Device Columns from wpo-col-md to wpo-col-md-12 |
wpo-col-lg-* |
Large Device Columns from wpo-col-lg to wpo-col-lg-12 |
wpo-col-xl-* |
Extra Large Device Columns from wpo-col-xl to wpo-col-xl-12 |
wpo-col-xs-offset-* |
Offset a div in Extra small Device Columns from wpo-col-xs to wpo-col-xs-12 |
wpo-col-sm-offset-* |
Offset a div in Small Device Columns from wpo-col-sm to wpo-col-sm-12 |
wpo-col-md-offset-* |
Offset a div in Medium Device Columns from wpo-col-md to wpo-col-md-12 |
wpo-col-lg-offset-* |
Offset a div in Large Device Columns from wpo-col-lg to wpo-col-lg-12 |
wpo-col-xl-offset-* |
Offset a div in Extra Large Device Columns from wpo-col-xl to wpo-col-xl-12 |
wpo-reverse |
Reversing. Works with wpo-row and wpo-col-* |
| Class Name |
Usage |
wpo-no-gutters |
No Padding & No Margin used on wpo-row div's |
wpo-no-padding |
No Padding |
wpo-no-margin |
No Margin |
wpo-hidden-* |
Sets Display None |
wpo-visible, wpo-*-visible |
CSS Visibility Set to Visible |
wpo-invisible, wpo-*-invisible |
CSS Visibility Set to Hidden |
wpo-float-right, wpo-float-*-right |
CSS Visibility Set to Visible |
wpo-float-left, wpo-float-*-left |
CSS Visibility Set to Visible |
wpo-float-none, wpo-float-*-none |
CSS Visibility Set to Hidden |
wpo-start-* |
Add classes to align elements |
wpo-center-* |
Add classes to align elements |
wpo-end-* |
Add classes to align elements |
wpo-top-* |
Add classes to align elements |
wpo-middle-* |
Add classes to align elements |
wpo-bottom-* |
Add classes to align elements |
wpo-around-* |
Add classes to distribute the contents of a row or column. |
wpo-between-* |
Add classes to distribute the contents of a row or column. |
wpo-first-* |
Add classes to reorder columns. |
wpo-last-* |
Add classes to reorder columns. |
wpo-initial-order-* |
Add classes to reorder columns. |
Demo
npm install --save @wponion/flexboxgrid2
This project is licensed under MIT. See the LICENSE file for more info.
