Reticulas cssframework

lets you work faster using stylesheets

Download v2.1.2 from GitHub

Grids

fluid.less or _fluid.scss

This style sheet extend reticulas with a fluid grid based on rows and columns. You can view a grid example for more information.

Data as numbers

Here you can see some variables values that we use to make the grid system. You can change the values for grid config.

  • @column-width:
  • @wrapper:
  • @gutter-width:
  • @wrappernested:
  • @columns:
  • @fluid-column-width:
  • @total-width:
  • @fluid-gutter-width (gutter/2):
  • @gridsystem-width:
  • @fluid-module-width:

.row(); can't use directly in html markup

This class add fluid rows without margin between modules.

.row(4);

.row(4);

.row(4);

.row(3);

.row(3);

.row(3);

.row(3);

.row(6);

.row(6);

html - less

<div class="r4">.row(4);</div>
<div class="r4">.row(4);</div>
<div class="r4">.row(4);</div>

<div class="r3">.row(3);</div>
<div class="r3">.row(3);</div>
<div class="r3">.row(3);</div>
<div class="r3">.row(3);</div>

<div class="r6">.row(6);</div>
<div class="r6">.row(6);</div>

.r3{
	.row(3);
}
.r4{
	.row(4);
}
.r6{
	.row(6);
}

.column(); can't use directly in html markup

This class add fluid columns with gutters.

.column(4);

.column(4);

.column(4);

.column(3);

.column(3);

.column(3);

.column(3);

.column(6);

.column(6);

html - less

<div class="c4">.column(4);</div>
<div class="c4">.column(4);</div>
<div class="c4">.column(4);</div>

<div class="c3">.column(3);</div>
<div class="c3">.column(3);</div>
<div class="c3">.column(3);</div>
<div class="c3">.column(3);</div>

<div class="c6">.column(6);</div>
<div class="c6">.column(6);</div>

.c3{
	.column(3);
}
.c4{
	.column(4);
}
.c6{
	.column(6);
}

.wrapper();

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

.row(4);

.row(4);

.row(4);

.row(3);

.row(3);

.row(3);

.row(3);

.row(6);

.row(6);

.column(4);

.column(4);

.column(4);

.column(3);

.column(3);

.column(3);

.column(3);

.column(6);

.column(6);

html - css

<div class="wrapper">
....
</div>

html - less

<div class="myexample">
....
</div>

.myexample{
	.wrapper();
}

.expand();

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

.row(4);

.row(4);

.row(4);

.row(3);

.row(3);

.row(3);

.row(3);

.row(6);

.row(6);

.column(4);

.column(4);

.column(4);

.column(3);

.column(3);

.column(3);

.column(3);

.column(6);

.column(6);

html - css

<div class="expand">
....
</div>

html - less

<div class="myexample">
....
</div>

.myexample{
	.expand();
}

.wrappernested();

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

.column(4);

.column(4);

.column(4);

.column(3);

.column(3);

.column(3);

.column(3);

.column(6);

.column(6);

.row(4);

.row(4);

.row(4);

.row(3);

.row(3);

.row(3);

.row(3);

.row(6);

.row(6);

html - css

<div class="wrappernested">
....
</div>

html - less

<div class="myexample">
....
</div>

.myexample{
	.wrappernested();
}

.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);

html - css

<div class="inner">
....
</div>

html - less

<div class="myexample">
....
</div>

.myexample{
	.inner();
}

.innermargin();

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

.row(4);

.row(4);

.row(4);

.row(3);

.row(3);

.row(3);

.row(3);

.row(6);

.row(6);

html - css

<div class="innermargin">
....
</div>

html - less

<div class="myexample">
....
</div>

.myexample{
	.innermargin();
}

.push(); can't use directly in html markup

Use this class to push columns.

.column(3);

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

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

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

html - less

<div class="c3">.column(3);</div>
<div class="myexample">.column(7); .push(2);</div>
...

.c3{
	.column(3);
}
.myexample{
	.column(7);
	.push(2);
}
...

.push-r(); can't use directly in html markup

Use this class to push rows.

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

.row(7);

.row(3);

.row(2);

.row(3);

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

html - less

<div class="myexample">.row(2); .push(3);</div>
<div class="r7">.row(7);</div>
...

.myexample{
	.row(2);
	.push(3);
}
.r7{
	.row(7);
}
...
Back to Top

Shortcut help