FlexBoxGrid-2

Modern 12 column grid system based on flex property.

→ Documentation

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

Demo

Installation

with npm

npm install --save @wponion/flexboxgrid2

License

This project is licensed under MIT. See the LICENSE file for more info.

Backed By

| | | | | --- | --- | --- |