Documentation.

Read the documentation to better use Flexo.

The documentation allows you to better understand how to use Flexo classes. Watch the tutorials to learn more.

Reference

Description

Tag

body, html

These tags have no padding and no margin. They have max width = 100vw and min height = 100%.
If you set the overflow = 1 then everything that exceeds 100vw will be hidden.

Container & row

.container

The container is used to contain rows and columns. This class has the width set to 100% always.

.container.fluid

When the width is equal to the size of 'mg' the container is set for this dimension.
You can make this class fluid by using the .fluid class.

.row

The row is used to contain flex box item. This class has the width set to 100% always.

.row.fluid

When the width is equal to the size of 'mg' the row class is set for this dimension.
You can make this class fluid by using the .fluid class.

Box & offset

.fl-box

This class is the child of the row class. Add the column sizes to this class.

.fl-box-in

This class is the internal content of the column box.

.fl-#{sm/md/lg/sp/mg/ut}-{1-12}

These are the column classes. You can set the number of columns in the scss file or in the customize form.

.fl-#{sm/md/lg/sp/mg/ut}-offset-{1-12}

These are the classes for the space between the columns. You can use the percentages or the flex number.

.fl-flex-#{sm/md/lg/sp/mg/ut}-{1-12}

These are the column classes with flex size. You can set the number of columns in the scss file or in the customize form.

.no-padding

This class eliminates the padding of the .row, .fl-box, .fl-box-in classes. If you add this class to the row everything else will be without padding.

Wrap

.row.wrap

This class breaks the continuity of the flex elements.

.row-reverse

The row-reverse class serves to reverse the order of the elements.

.wrap.wrap-reverse

The wrap-reverse class serves to reverse the order of the wrap elements.

.row.wrap.row-reverse.wrap-reverse

In this way you can invert both the order of the elements and the order of the wrap elements.

Alignments

.justify-left

This class aligns the contents of the row to the left.

.justify-center

This class aligns the contents of the row to the center.

.justify-right

This class aligns the contents of the row to the right.

.align-top

This class aligns vertically the contents of the row at the top.

.align-center

This class aligns vertically the contents of the row at the center.

.align-bottom

This class aligns vertically the contents of the row at the bottom.

.self-top

This class aligns itself vertically at the top.

.self-center

This class aligns itself vertically at the center.

.self-bottom

This class aligns itself vertically at the bottom.

Spacing

.space-around

this class aligns the elements leaving only the space between one box and another.

.space-between

This class distributes the box elements so leaving the space around.

Order

.fl-#{sm/md/lg/sp/mg/ut}-order-{1-12}

This class attributes the order to the elements. To change the order in mobile first mode, the sm class is indispensable.

Positioning & filling

.position-relative

This class assigns the position relative to the element.

.position-absolute

This class assigns the position absolute to the element.

.position-fixed

This class assigns the position fixed to the element.

.top-left

This class combined with the .position-absolute and .position-fixed classes aligns the top left element.

.top-right

This class combined with the .position-absolute and .position-fixed classes aligns the top right element.

.bottom-left

This class combined with the .position-absolute and .position-fixed classes aligns the bottom left element.

.bottom-right

This class combined with the .position-absolute and .position-fixed classes aligns the bottom right element.

.fill

This class fills the height and width of the parent element.

.fill-width

This class fills the width of the parent element.

.fill-height

This class fills the height of the parent element.

.fill-vp

This class fills the height and width of the viewport.

.fill-vp-h

This class fills the width of the viewport.

.fill-vp-v

This class fills the height of the viewport.

.no-padding

This class remove the padding.

.no-margin

TThis class remove the margin.

Images

.align-left

This class aligns the image to the left. If you want to use this class, the .d-block class is mandatory.

.align-center

This class aligns the image at the center. If you want to use this class, the .d-block class is mandatory.

.align-right

This class aligns the image to the right. If you want to use this class, the .d-block class is mandatory.

.d-block

This class adds the display block property to the element.

Text

.text-left

This class aligns the text on the left.

.text-center

This class aligns the text at the center.

.text-right

This class aligns the text on the right.

.text-justify

This class justify the text.

Levels

.z-index-{1-12}

This class adds several levels using the z-index property. The number of levels is customizable.

Viewport height

.vph-#{sm/md/lg/sp/mg/ut}-{10-100}

This class attributes the height of the viewport to the element. This class is applicable everywhere.

Visibility

.fl-#{sm/md/lg/sp/mg/ut}-hidden

This class hides the elements based on the size of the window/viewport.

.fl-#{sm/md/lg/sp/mg/ut}-show

This class shows the elements based on the size of the window/viewport.

Wireframe

body#wireframe

Adding this id to the body tag the library elements will only appear with the border. For each item, you can view the measurement you used for media queries

body#wireframe-fill

This id is like the wireframe id, but the library elements will be colored.

body#wireframe-fill.border

This class adds borders to the wireframe-fill id.