Flexo.

Light css grid and wireframe based on flex property.

Flexo is a lightweight framework for page scaffolding using the css flex property. Flexo helps the developer and designer to create modular web pages quickly.

Installation

Use direct link or Download

Link dev(wireframe intergated)



Link dist(minify)



Use dependence

NPM

npm install @the_martux/flexo -D

YARN

yarn add @the_martux/flexo -D

Basic elements

There are five elements that build the grid.
Container: this element contains all the rows and can have a fixed or fluid length.
Row: contains the box and can have a fixed or fluid length.
Box: this element is the grid cell. can be fixed or flexible.
Box in: is the contents of the cell. Here it is possible to insert other grids.
Flex: is the basic flex property.
Emmet:div.container.fluid>div.row.wrap>div.fl-box.fl-sm-12>div.fl-box-in{content}

1
2
3
4
1
2
3
4
Use no padding
No padding
No padding
No padding
Use no padding in fl-box-in
No padding in
2
3
Example:

Use %
Use flex

Offset box

With offsets you can separate the boxes for the elements with the percentage and flex elements.

1
2
3
1
2
3
Example:

Offset %
2
1
2

Align, justification and spacing

With this grid it is possible to align, justify and position the elements inside the row

Justify center
1
2
3
Justify right
1
2
3
Space around
1
2
3
Space between
1
2
3
Align center
1
2
3
Align bottom
1
2
3
Align self box
1
2
3
Example:

1
2
3
1
2
3

Order and reverse

With the order class you can choose the order of the boxes based on the width of the device. Works well with the fl-flex class.
With the row-reverse class it is possible to invert the arrangement of the boxes.

Order box
1
2
3
Reverse
1
2
3
Example:

1
2
3
1
2
3

Position rules

Set the position property on element.
The fixed position has the same logic as the absolute position but works as the default rule of the fixed property.

Position relative
Position absolute top-left
Position absolute top-right
Position absolute bottom-left
Position absolute bottom-left
Example:

Position relative
Position absolute top-left
Position absolute top-right
Position absolute bottom-left
Position absolute bottom-left

Z index

With the z-index class you can choose which elements are above and which are below.
The z-index classes are created in the config.scss file configuration

z-index 1
z-index 2
z-index 3
z-index 2
z-index 1
z-index 0
Example:

z-index 2
z-index 1
z-index 0

Visibility

With this class you can choose when to hide a fl-box element

The second div is visible for large and super
1
2
3
Example:

1
large and super are visibles;
3