What's the best way to build a multicolumn grid with minimal markup with Singularity

Question

Let's say i have a grid of articles (2 columns), inside another column. What's the best way to achieve this without having to explicitly tell singularity on which column should the article be.

Is it the only option to declare it with pseudo classes?

article:nth-child(1n){
   @include grid-span(1,1);
}
article:nth-child(2n){
   @include grid-span(1,2);
}

Thanks.

Answer 1

There is an even shorter way than Scott aka user2242314 has suggested above::

$grids: 12;
$gutters: 1/3;

.column {
  @include float-span(1);

  &:last-child {
    @include float-span(1, 'last'); }}

Unfortunately, there's a bug in Singularity that prevents from using this short method, even though it's suggested by Singularity documentation.

I've fixed the bug and submitted a pull request. Wait for Scott or Sam aka Snugug to accept it and release an updated gem (of version 1.0.7 or later). Then run gem update or bundle update and you're able to use the cleanest solution.

Answer 2

You can use the float output style but you are still going to have to deal with the extra padding on your right column.

http://sassmeister.com/gist/5256403 - you may have to select singularity from the drop-down menu to make this link work.

With floats, writing “last” in the location column is equivalent to “omega” in Susy. Dealing with that extra padding is still going to be tricky but at least your columns are floating next to each other without nth.

If you are still unsatisfied, you can write your own output style. Not sure what CSS will do the trick but at any rate, the CSS Singularity generates is completely customizable. I have yet to fully document but you can add your own output styles: https://github.com/Team-Sass/Singularity/tree/1.x.x/stylesheets/singularitygs/api