Foundation-sites: [XY Grid] Cells improperly wrap when relying on cell size inheritance from smaller screens

[simshaun]

v6.4.0-rc3

CodePen: https://codepen.io/simshaun/pen/rweyxg

Coming from the flex grid, I'm used to being able to declare the column width for the smallest effective screen size, and the larger screens would simply inherit from the smaller. e.g. .row>.small-8.columns+.small-4.columns. I'm trying to do the same thing with a grid-x, grid-margin-x grid. e.g.

<div class="grid-x grid-margin-x">
  <div class="small-4 cell">X</div>
  <div class="small-4 cell">Y</div>
  <div class="small-4 cell">Z</div>
</div>

However, the last cell wraps to the next line when viewed from any larger screen than small, so 640+ px.

This is happening because of the cell width calculation:

.grid-margin-x > .small-4 {
    width: calc(33.33333% - 1.25rem);
}

On small screens, -1.25rem is correct. The problem is that it stays -1.25rem on medium+ screens, where the gutter size increases to 30px. Because of the larger gutter, the cell width calculation needs to have -1.875rem, but it doesn't.

[IamManchanda]

Thanks for the bug report ... Added a PR #10168

[IamManchanda]

@simshaun i hope this was what you were looking for

[corysimmons]

.grid-margin-x>.small-4 {
  width: calc(33.33333% - 1.25rem);
}

needs to be

.grid-margin-x>.small-4 {
  width: calc(33.33333% - 1.875rem);
}

@brettsmason
Cell margins should be * 2 whatever the container's negative margin is. I think this one just slipped through the cracks because you've been doing it correct other places.

Do we not have a huge visual test page and unit tests though? It'll be impossible to keep up with all the variations until this is implemented. Once you get the API you want, I'd make a huge visual test page (with just random variations of everything—for your own purposes), then start making unit tests for each thing.

@simshaun Thanks for the solid bug report.

[brettsmason]

@simshaun Thanks for the bug report, its appreciated!

@IamManchanda Will take a look at your PR tonight, thanks!

@corysimmons Its actually correct (your first example). The issue is responsive gutters (which are a massive headache!), so if you did for example:

<div class="small-4 cell">

On small screens the default gutter is 20px, and 30px on medium. So if we don't add a medium- or large- sizing class, then the small- class should also be included in the medium breakpoint classes, with the larger gutter size (your 2nd example), if that makes sense (sorry hard to explain).

You raise a good point about testing. I have no experience with unit tests, so if there's anything you can link me to read up on the subject or examples that would be great. We have a pretty comprehensive visual test suite, but obviously not complete enough 😄

[IamManchanda]

I have no experience with unit tests, so if there's anything you can link me to read up on the subject or examples that would be great.

Same here :smile:
If you can provide some goodie about it then that will be great cory :)

[kball]

This is odd - the responsive gutters appear to have completely disappeared in the latest build. Blargh... looking into it.

[kball]

huh turns out it disappeared pre-RC when we were renaming things to XY, and somehow we didn't catch it. Definitely feeling a need for better tests on XY. PR up: https://github.com/zurb/foundation-sites/pull/10172

[corysimmons]

@brettsmason Oh yeah, those responsive gutter things look tricky.

@IamManchanda
I've been using AVA to do unit tests (i.e. making sure that what's compiled matches what was compiled before, so if variable x changes to fix one thing, it doesn't break other things).

I ended up making some custom testing function so I could make an index.html and some styles... once they looked correct, I'd copy/paste their CSS to what I call a "lockfile".

Now when I run my test suite, it will compile each feature's style.css to style.posted.css, then compare style.posted.css to the locked.css in that folder.

If the tests pass, then that means I didn't break something.

That said, I only added a handful of tests because I was more interested in making the testing framework than I was actually writing boring-ass tests, but it seems to be a really nice setup for keeping all the functionality of the system isolated with visual AND unit tests ("feature" dirs) that can be duplicated/tweaked in a minute...

Not sure if this is a pre-existing pattern and I'm showing my testing newbery, but it seems to work really well.

I've also got it setup where it'll watch these with BrowserSync so I can add them and tweak things until they work, which is pretty handy for adding new features.

You guys already seem to have some Sass testing stuff. I'm too lazy to compare and contrast, but you could have one of your devs compare the two and see which you like better.

[IamManchanda]

Sounds a gooddiee
@kball what you think?

[oxyc]

I think this still has issues. I'll try and open up an issue with a test case later at some point. Glancing at the code I'm assuming it has to do with and map-has-key($grid-margin-gutters, $-zf-size) conditional which doesn't apply if a breakpoint is skipped and inherited from a smaller variant.

$grid-margin-gutters: (
  small: 20px,
  large: 30px
);

[kball]

@oxyc I've just tested through the original case (3x small-4) along with a number of others with the most recent RC (RC4) and am not seeing any problems, the responsive gutters all appear to be applying properly and everything is lining up appropriately. If you're still seeing issues can you add a repro case? We're running low on time so sooner the better, thanks!

[oxyc]

@kball just tested again with the latest rc and it does work now.

[kball]

Excellent, going to close this then.