Layout

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".

Value	Description
	limited 1280px width
limited	limited 1280px width
full	full width

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.

Value	Description
	100% width
1..12	(100 / 12) * $ width

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.

Value	Description
1..12	push or pull (100 / 12) * $ left