Search code examples
singularitygs

Remove padding in thumbnail grid

Please look at this gist: http://sassmeister.com/gist/6d575ec85663865fa567

There you can see a placehold.it thumbnail grid realized via float-span What i need now is:

  • The padding-left of the first .item in each row should be 0

  • The padding-right of the last .item in each row should be 0

this would then end up in the thumbnail grid perfectly aligning with the rest of the content (e.g. the lorem ipsum text)

What is the beast way to achieve this with singularitygs?

UPD 2014-07-21

what i need can be seen in this screen:

demo

i don't need another padding style, i need the padding from the first and last item in each row removed. this can't be done via css, because the sass calculations would be wrong.

UPD 2014-07-30

based on various sources, i managed to establish this mixin:

@mixin thegrid($layout, $cols, $el: "div", $thegutter: .1){

  @include layout($layout, $gutter: $thegutter) {

  @for $i from 1 through $cols {
    @if $i == 1 {
      #{$el}:nth-child(#{$cols}n+#{$i}) {
        @include isolation-span(1, $i, left);
      }
    }
    @else if $i < $cols {
      #{$el}:nth-child(#{$cols}n+#{$i}) {
        @include isolation-span(1, $i, none);
      }
    }
    @else {
      #{$el}:nth-child(#{$cols}n+#{$i}) {
        @include isolation-span(1, $i, right);
      }
    }
   }
  }
}

which can be called e.g. via:

$layout: 1 1 1;
@include thegrid($layout, 3, $el: ".item");

an example can be seen here: http://sassmeister.com/gist/7a45960747ad3d4bbf56

Solution

  • Not sure what you mean.

    You're applying gutters with an absolute value. This is what Singularity calls fixed gutters.

    Singularity realizes fixed gutters by applying padding to grid elements.

    Padding can be applied in two styles:

    • split: the gutter size is divided by two and the resulting value is applied as left and right padding to every grid item.
    • opposite: the value of gutter size is applied as right padding to every item except items occupying the last column.

    So if you are unhappy with split gutters, switch to opposite gutters. That's the default behavior, so you can simply comment out @include add-gutter-style('split');.

    If you are unhappy with either gutter style, well, you can manually remove padding that you don't need. This doesn't make a lot of sense because if you apply zero padding to items other than occupying the first and the last columns, you will distort your grid. And if you apply them only to the items occupying the first and the last columns, you basically get the same setup as with opposite gutter styles.

    You might get better help if you make a pencil drawing of desired layout.

    UPD 2014-07-21

    OK, now it's clear what you mean.

    So you basically want split gutters for the outer level and opposite gutters for the inner level. You're already using the layout() mixin required to override grid settings, so you could just tell it to override gutter styles, e. g.:

    @mixin layout(2, $gutter-style: 'opposite') {

    Unfortunately, due to the fact that Singularity creates fixed gutters via padding, they only play nice in split mode. In opposite mode fixed gutters produce uneven columns.

    So you'll have to use relative gutters:

    @mixin layout(2, 0.1, $gutter-style: 'opposite') {

    There are a couple of things you have to keep in mind:

    1. Spanning the last item in each row separately.

      With the opposite gutter style, the last item in each row is special: it contains no right gutter. So you will have to tell Singularity which item is the last one in row.

      To do this, we will use the :nth-child(Xn + Y) selector, where X is the number of items in the row and Y is the number of target item in the row. As we're targeting the last item, X and Y will be equal:

      @include float-span(1);

&:nth-child(4n + 4) {
  @include float-span(1, last);
}

    2. Isolating media queries.

      Once you do that for each breakpoint, you'll end up with styles applied to different items in different breakpoints. Those styles will not be overridden and thus will leak from smaller to larger breakpoints, breaking the layout.

      You could override them manually, but that's a lot of thankless job. Instead, isolate your media queries so that styles don't leak:

      $beforeMediumBreakpoint: max-width 799px;
$mediumBreakpoint:       800px;

// Mobile view (formerly without a media query)
@include breakpoint($beforeMediumBreakpoint) {

    Demo: http://sassmeister.com/gist/dd9f1af025900d7e63db

    PS A piece of advice from me: don't use fixed gutters and split mode. Use fluid gutters and the default opposite mode. This will save you from a lot of trouble! You can always simulate split gutters by applying padding to the outermost container.

    You can do some math to calculate relative padding for the container that will be equal to the gutter between grid items! With the magic of math, you can even apply bottom margins to grid items equal to grid gutters, producing a beautiful uniform thumbnail grid.

    I've created a nifty extension Singularity Quick Spanner that can reduce the amount of work you need to do to set up thumbnail grids. See it in action (note vertical gutters equal to horizontal gutters).