Extend grid placeholders with grid-columns-all

[codejet]

I tried to only use placeholders, no classes. Example (SCSS syntax):

.myClass {
    @extend %grid-75;

    @media screen and (max-width: $media-query-breakpoint) {
      @extend %grid-100;
    }
}

But like this the gutters were missing. This seemed to be because the grid classes extend the grid-columns-all placeholder, but the grid placeholders themselves don't.

So I made the placeholders extend grid-columns-all in the vars partial, and removed the columns definitions in the grid-base partial, which shouldn't be necessary anymore then.

I hope I didn't make a mistake here, which prevented the gutters from working in the first place, or overlook any side-effects my change might have.

[nathansmith]

So, the reason I have %grid-columns-all split out separately is that if you just want to linearize content (put still have padding) at the "mobile" width, you don't have to add class="mobile-grid-100" to every grid unit.

As in, I wanted that code to live in the @media screen scope, not just the mobile/desktop scope.

screenshot — http://cl.ly/image/1T3E3M3q1l2o

If you view-source on Unsemantic.com, you'll notice that, aside from the demo pages, I'm not actually using mobile-width-x classes at all, yet at lower widths, the padding remains intact.

By moving that bit of code to within the respective desktop/mobile (adding to the %grid-x placeholders), we'd lose out on that. Here's the generated CSS from your change…

screenshot — http://cl.ly/image/3m382I2p022f

I agree though, this wasn't clear in the "how to" documentation. My example on the Unsemantic site itself had a typo, and should've included %grid-columns-all.

[nathansmith]

I updated the Sass documentation, to better explain the "Roll Your Own" approach…

http://unsemantic.com/sass-documentation

Sorry for not including %grid-columns-all before. I didn't mean to make things more difficult.

[codejet]

Thanks a lot for the explanation and updating the docs, Nathan!