This is the preferred method to install Flexicution. Simply install using NPM or Bower.
You have two different options for using Flexicution. You may include the framework and build your column classes yourself, or you can use our pre-defined breakpoints and generated class names.
This includes only the Sass mixins that power Flexicution, with no specific class names.
This includes the Sass mixins that power Flexicution, as well as responsive column classes.
Flexicution is as agnostic as possible in regards to your layout and breakpoints. You can use the semantic grid mixin to generate rows and columns for your layout and components, or you can generate responsive class names based on the breakpoints used in your project.
The Flexicution library has variables that help configure the base library and library with classes. You may override these in your own project if you wish to customize your grid layout.
Class names can be used to build layouts based on viewport width.
.col-[viewport size]-[column size]
Automatically size columns inside of a grid.
.col-[viewport size]
Class names can be combined to adjust layouts based on viewport width.
Columns can be easily offset using class names according to viewport width.
.col-[viewport size]-offset-[offset]
Want a grid inside of a grid inside of… a grid? We won't stop you.
Apply modifier classes to adjust the horizontal and vertical alignment of columns inside of a grid.
-[size]-start
-[size]-center
-[size]-end
Here's an example of adjusting horizontal alignment based on viewport size.
-[size]-top
-[size]-middle
-[size]-bottom
Here's an example of adjusting vertical alignment based on viewport size.
Apply modifier classes to adjust the space distribution between columns inside of a grid.
-[size]-space-around
-[size]-space-between
Here's an example of adjusting space distribution based on viewport size.
Apply modifier classes to columns to adjust their position within the grid.
-[size]-first
-[size]-last
-reverse