Removing the last gutter on a row with Singularitygs? - css

Question

I've been trying to figure out the best solution for displaying a list of projects using Singularity.
I want to essentially remove the padding of the last item of each row but add that padding back into the overall project width of all projects.
I think the solution will have more to do with css than singularity but maybe there is a good solution within singularity I am missing?
These projects will eventually be regularly added by a cms.
example: http://sassmeister.com/gist/7916151

Answer 1

Okay, there's a number of things you should consider.
Firstly, Singularity and Breakpoint are not yet compatible with Sass 3.3, whereas Sassmeister.com is already using Sass 3.3. Make sure you're using Sass 3.2.x in your project. To demonstrate Sass+HTML, consider using SassBin.com.
Secondly, you're using 12px gutters. This is incorrect. Gutters are specified as a unitless value, relative to a single column unit. So when you have two columns and 12px gutters you actually tell Singularity to make gutters 12 times larger than columns.
Instead, provide relative gutters like this: $gutters: 0.1.
Thirdly, you specify a 4-column grid for the medium size but you only use them as a two-column grid. If you don't use four columns somewhere in your project, i suggest that you omit that 4-column definition and keep using the 2-columns grid.
Fourthly, you're setting an outline on your container but it never displays properly because the container has zero height. It has zero height because all its contents is floated.
To have the container embrace the floated content, you have to apply a clearfix to the container. Google it up. The simpliest way to apply a clearfix is to use the pie-clearfix mixin that comes with Compass. But i suggest that you use the %clearfix-micro extend that comes with Toolkit.
Fifthly (is there even such a word?), to remove the gap on the right, you have to apply a last float-span to the last item in every row. To do that properly, you have to learn how the nth-child works. I highly recommend that you google it up.
In short, nth-child accepts an argument that looks like An+B where A and B are whole numbers. The A should be equal to the number of columns and B is the number of the column you're addressing. As you're addressing the last column, B is equal to A in your case. So the whole thing looks like nth-child(3n+3) for example.
Sixthly, you're applying Singularity spans for different breakpoints in such a manner that they accumulate. This is okay when you override spans to all your items at once, so that all of them become redefined in each media query.
But when you apply styles selectively (to the last item in each row), you'd have to cancel them too. This is a very cheerless thing to do.
Instead, you should narrow down your media queries so that they address only specific slices between two breakpoints. In this case, spanning styles will not accumulate.
Here's how you code would look if you used all my recommendations: http://sassbin.com/gist/7951326/
Seventhly (my tongue hurts), consider using the Breakpoint Slicer extension, a tiny wrapper for Breakpoint that makes slicing breakpoint ranges very quick and effortless.
Here's how your code could look if you used Breakpoint Slicer: http://sassbin.com/gist/7951724/
Eighthly, if you did want fixed gutters, you should've set the $gutter-styles: 'fixed' option.

Answer 2

Of course you could do something like this:
&:nth-child(3n) {
margin-right: 0;
}
On the Singularity wiki, it seems to indicate that this should work:
&:nth-child(3n) {
#include float-span(2, 'last');
}
But it didn't or I didn't understand its function.

Answer 3

Thanks for the extensive answer.
I'm well aware of the nth-child selector. I went down that road but decide it wasn't a clean solution for me.
I know I didn't clear the float...wasn't really part of my question.
Setting a fixed height of 12px is not incorrect based on the documentation: https://github.com/Team-Sass/Singularity/wiki/Creating-Grids#fixed-gutters
I need fixed gutters. That's the whole crux of the problem here.
I started making my own fixed gutter fluid column solution that I'm liking thus far: http://codepen.io/joshuarule/pen/zsfEo