Container

Containers are blocks that limit the size of your page so that it respects responsive sizes and is always centered.

<div _container></div>
<!-- Basic container -->

<div _container="full"></div>
<!-- Full width container -->

<div _container="limited"></div>
<!-- limited width container -->

Basic size is 100%, but limited to 1280px, but you can remove this limitation by adding "full", or give it back with "limited".

Row

Rows, are simply flexboxes with a basic configuration

<div _row></div>

Rows cant have any values

Columns

The columns are 12 by default, and take the width according to the number of columns.

<div _col></div>
<!-- Basic full width column -->

<div _col="6"></div>
<!-- 50% width column -->

<div _col="2"></div>
<!-- 16,666..% width column -->

Here too it uses its full potential when mixed with breakpoints.

<div _col="12 md:6 lg:4 xl:3"></div>

Here you can also change the number of columns in the configuration.

Push & Pull

You can also push and pull your columns.

<div _col="3 push-2"></div>
<!-- Usage with _col -->

<div _col="3" _push="2"></div>
<!-- Usage with _push attribute -->

<div _col="2" _pull="2"></div>
<!-- It's the same with _pull -->

Here you can also change the number of columns in the configuration.