Improve XY Grid documentation

[bertday]

How to reproduce this bug:

This is just related to documentation, so no reproduction necessary :)

What should happen:

I'm familiar with other layout/grid frameworks but I'm new to Foundation, so I landed on the XY Grid documentation expecting there would be some sort explanation of how the grid system works -- what the basic building blocks are, how many columns to a row (or .grid-x), things like that.

What happened instead:

The docs mention there are three basic types: .grid-x, .grid-y, and .cell, but there's no explanation how they function or relate to one another.

Above that, there's this text:

The XY grid works very similarly to the standard float grid, but includes a number of useful features only possible with Flexbox[...]

That sentence is also potentially helpful, however, it's instructing me to read the documentation for the legacy grid system to understand the new (encouraged) one. That seems someone counter-productive for deprecating the Float Grid IMHO.

To generalize my comments a little: I personally feel like the Foundation documentation could benefit from a much higher-level, user-friendly starting point for newcomers to get acquainted with the concepts behind Foundation (in particular the XY grid) and how they work. Boostrap does a fantastic job of this:

https://getbootstrap.com/docs/4.1/layout/overview/

I would love to see the same in Foundation so I can start using it as well!

Thanks!

Browser(s) and Device(s) tested on:

Foundation Version(s) you are using:

6.4.3

Test case link:

n/a

[bertday]

I stumbled on this video which was a fantastic introduction and mapped the old concepts really nicely:

https://www.youtube.com/watch?v=tjjVKGeoi3A

If there were something like this but in text form, I think that would do the trick!

[ncoden]

Thank you @rbrtmrtn for the recommandation. I agree with you that the XY Grid documentation could be improved. I don't know when we will have time to do that, but I'll keep that in mind.

[bertday]

Awesome, thanks @ncoden!

[udf2457]

@ncoden All that time you guys spend filming and editing those useless videos could be better spent typing up good quality documentation. ;-)

(I say useless because you can't search a video, you can't refer to points a video, videos contain a lot of un-necessary waffle and padding, and quite frankly I've got better things to do with my time than watch some random guy or girl desperately trying to look cool whilst delivering what should be serious technical content just in the hope of finding he/she might mention something vaguely interesting three-quarters of the way through the video and only spend five seconds on the topic).

Rant over. ;-)

[ncoden]

Hi @udf2457.

Video were made one year ago by ZURB, which is not the actual Foundation Core Team. So we did not lost any time with videos, there were just more people working on differents things at the same time ;)

[paxperscientiam]

To pile on, this "note" yields a potential pitfall for noobies (and not so-noobish noobs like):

Please note to use .grid-margin-x or .grid-margin-y with .grid-frame you need to hide the overflow on the body like so: body {overflow: hidden;}.

So, that suggestion precedes the grid-frame example. If one adds body {overflow: hidden;} to their stylesheet, they won't be able to scroll the body on small screens. So, while that is the desired affect on medium and above (per example), it is undesirable on small screens.

I will suggest an edit in a PR.