0

So, the super-helpful 'gallery' mixin in susy2 uses the nth-child selector, which doesn't work in IE8. So what's a good workaround?

I was thinking of extending the gallery mixin and adding ie8-specific styles. Is that possible with susy?

Here's my sass code, if it helps:

.grid_gallery li.slide {
  @include gallery(12 of 24); //2 across
  margin-bottom: gutter(24);
  @include breakpoint(600px) {
    @include gallery(6 of 24); //4 across
  }
  @include breakpoint(769px) {
    @include gallery(4.8 of 24); //5 across
  }
  @include breakpoint(1200px) {
    @include gallery(4 of 24); //6 across
  }
}

Here's a Gist to see this SASS (simplified) converted to css: http://sassmeister.com/gist/59927698cfbba6fadbf5

Here's the look I'm going for: gallery look

Community
  • 1
  • 1
jody
  • 56
  • 3

2 Answers2

0

Sure. You need output that doesn't use nth-child selectors — which will require some extra classes in your markup. I'd start by copy-pasting the full gallery mixin from Susy, and then only change the mixin name (so it doesn't conflict), and replace any mention of nth-child with your class naming convention (lines 62-63). If you can design class names that matches Susy's existing nth-child pattern, you shouldn't need to change the mixin much.

It might even be possible for us to add this option to the existing mixin. Feel free to file an issue on GitHub, and we'll take a look at it.

UPDATE: Looking closer, there are some simpler options, depending exactly what you need. If you change your gallery declarations to simple spans, you only need to add .last classes/mixins to the last items in each row. And if you change your gutters to inside, inside-static or split you don't even need to do that. Simple spans will stack up correctly on their own.

.item {
  @include span(12 of 24 inside); // 2 across

  @include breakpoint(600px) {
    @include span(6 of 24 inside); // 4 across
  }

  // etc...
}
Miriam Suzanne
  • 13,632
  • 2
  • 38
  • 43
  • Thanks, but I can't use inside (or inside-static or split) as that would change the design a little. And '.last' is unusable, because gallery items are dynamic and come from a cms. Though an ie8 only 'inside' solution is what I'm aiming for now. I've added a custom_gallery mixin and I'm now trying to add a 'if ie8' use 'inside gutters' functionality. – jody Jul 21 '14 at 19:12
0

ok, I wanted to write styles for IE8 specifically within the gallery mixin to switch to ‘inside’ gutters, but I just couldn’t figure out how to do it.

Instead I just added the following to my IE stylesheet:

.ie8 .grid_gallery li.slide {
  @include span(4 of 24 inside); // ie8 needs to switch to an 'inside' gutter system. It doesn't handle nth-child css
}

So this span mixin adds to some of the gallery mixin styles called earlier. Basically, changing it to an inside gutter setup in IE8 only.

And I’ve switched to only using gallery mixin when I really need to, like when there are an unknown number of items generated by the cms, or when setting a last element per row isn’t possible in the html.

jody
  • 56
  • 3