Anole Documentation - Grid System

an-center* - containers

Anole uses Flexbox to simulate a grid system. A true grid system may be added in the future. The classes

.an-center

.an-center-row

, and

.an-center-adjust

, provide basic containers which can arrange items (via Flexbox), according to their different functions.

.an-box

with no further content but this text. This box also has the class

.an-35p

so that it only takes up 35% of the page container's width.

.an-box

with no further content but this text. This box also has the class

.an-35p

so that it only takes up 35% of the page container's width.

.an-box

with no further content but this text. This box also has the class

.an-35p

so that it only takes up 35% of the page container's width.

.an-box

with no further content but this text. This box also has the class

.an-35p

so that it only takes up 35% of the page container's width.

an-(n)p - columns

Anole uses Flexbox to simulate a grid system. A true grid system may be added in the future. The classes

.an-5p

through to

.an-100p

, separated each increments of 5, cover the basic columns available in Anole. Each one determines the witdh of the related element as a percentage. See the examples below, which use

.an-35p

.an-box

with no further content but this text. This box also has the class

.an-35p

so that it only takes up 35% of the page container's width.

.an-box

with no further content but this text. This box also has the class

.an-35p

so that it only takes up 35% of the page container's width.