Reticulas
cssframework

You can see here an example with grid components.

SHOW/HIDE GUIDES

Data as numbers

Variables values that we use to make the grid system.

.row();

This class add fluid rows without margin between modules.

.row(12);

.row(8); .boxcenter();

.row(6);

.row(6);

.row(4);

.row(4);

.row(4);

.row(3);

.row(3);

.row(3);

.row(3);

.row(2);

.row(2);

.row(2);

.row(2);

.row(2);

.row(2);

.column();

This class add fluid columns with gutters.

.column(12);

.column(6);

.column(6);

.column(4);

.column(4);

.column(4);

.column(3);

.column(3);

.column(3);

.column(3);

.column(2);

.column(2);

.column(2);

.column(2);

.column(2);

.column(2);

.wrapper();

This class adds max-width center on page with the value of @wrapper.

.column(6);

.column(6);

.column(4);

.column(4);

.column(4);

.column(3);

.column(3);

.column(3);

.column(3);

.row(6);

.row(6);

.row(4);

.row(4);

.row(4);

.row(3);

.row(3);

.row(3);

.row(3);

.expand();

Use this class on a content to force aligment columns with rows on .wrapper();.

.column(6);

.column(6);

.column(4);

.column(4);

.column(4);

.column(3);

.column(3);

.column(3);

.column(3);

.wrappernested();

This class adds max-width center on page with the value of @wrappernested. Add extra width gutter for nested columns gutters.

.column(6);

.column(6);

.column(4);

.column(4);

.column(4);

.column(3);

.column(3);

.column(3);

.column(3);

.inner();

Use this class on a content to apply inner padding to equal with columns.

.row(4);

.row(4);

.row(4);

.row(3);

.row(3);

.row(3);

.row(3);

.row(6);

.row(6);

.innermargin();

Use this class on a content to force margin to equal whith columns.

.row(6);

.row(6);

.row(4);

.row(4);

.row(4);

.row(3);

.row(3);

.row(3);

.row(3);

.push();

Use this class to push columns.

.column(3);

.column(7); .push(2);

.column(9); .push(3);

.column(3); .push(9);

.push-r();

Use this class to push rows.

.row(2); .push-r(3);

.row(7);

.row(3);

.row(2);

.row(3);

.row(3); .push-r(1);