[Card] docs updated for XY Grid closes #10565

[colinmackinlay]

Here you go @IamManchanda as discussed. The style of the example included float and flex so I've added XY rather than replaced them.

[kball]

I'm afraid this won't work quite right as it stands... 2 reasons, 1 easily addressed.

1. XY isn't included in all of the docs pages by default (easy to fix, we can add it either just to this one or to all of them). I'd actually propose we add XY to all docs pages as it should "just work" without clashing with anything else. What do you think @rafibomb @IamManchanda @brettsmason?

2. Flex grid and float grid were unfortunately set up to use the same class names, so it is not feasibly to include both of them on the same docs page. I move we get rid of the one purporting to show float grid and make this page flex only, what do you think?

[IamManchanda]

I'd actually propose we add XY to all docs pages as it should "just work" without clashing with anything else.

I move we get rid of the one purporting to show float grid and make this page flex only

I totally agree with you ... Would you like to try it up @colinmackinlay ?

[colinmackinlay]

Ok -so I've added a commit removing the float grid example. I can see the issues from the technical side (can't mix them on the same page) but I wonder about all the examples eventually being X-Y. In other threads @kball refers to the need to make Foundation accessible to newcomers to the framework and launching them into X-Y may not help with that. I suppose though that most components are grid agnostic it's just that cards generally will be laid out in a grid. So long as there is reference to the fact that they work in all three grid systems and perhaps links to those grid pages perhaps that will do.

On a related note, see the screenshot from a random part of the cards tutorial video showing both float and flex grid in the same example! Good to see that the code for the grid is flex so that will be consistent with these examples but if videos include and refer to float examples and there is no reference to them in the Docs then it will add to confusion. Hope I haven't opened a can of worms!