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