FlexBoxGrid-2
Modern 12 column grid system based on flex property.
Motivation
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 Break Points
| Device Type | Min Width | Max Width |
|---|---|---|
xs |
0 | 575px |
sm |
576px | 767px |
md |
768px | 991px |
lg |
992px | 1199px |
xl |
1200px | ∞ |
Grid System CSS Classes
| 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-*
|
Utilites CSS Class
| 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. |
Examples
Installation
with npm
npm install --save @wponion/flexboxgrid2
License
This project is licensed under MIT. See the LICENSE file for more info.
Backed By
 |
 |
 |
|---|