I have been experimenting with Singularity and trying to transition from the float to the isolation output style using grid- and isolation-span. However, there is one particular pattern that I am struggling to replicate. I wonder if there might be a more elegant solution. Previously, for the float output, I used the following settings:
<div class="floater">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
@import 'compass';
@import 'singularitygs';
$grids: 16;
$gutters:0.25;
$output: 'float';
.floater div
{
background-color:red;
height:10em;
@include float-span(4);
&:nth-child(4n) {
@include float-span(4, 'last');
}
}
This resulted in 4 boxes of equal width aligned side by side. My challenge now is achieving the same layout with isolation-span / isolation output. When attempting the following:
<div class="isolator">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
@import 'compass';
@import 'singularitygs';
$grids: 16;
$gutters:0.25;
$output: 'isolation';
.isolator div
{
background-blue;
height:10em;
@include isolation-span(4, 1, 'right', $gutter: .25);
&:nth-child(4n) {
@include isolation-span(4, 13, 'right', $gutter: .25);
}
}
Do I need to write an nth-child selector and isolation-span include for each "column" (since the nth-child approach from the float example only displayed the first and last box)? Or is there a shorter method similar to the float example above? Regards, Ralf