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.