Foundation-sites: Improve installation, setup and usage documentation of different Grids

[ncoden]

Some people around me recently reported they did not understand well how Float / Flex / XY Grids can be installed or imported, setup and used. Particullary what grid is included by default and how to get others grids.

[colin-marshall]

Adding to this, the XY grid docs should be more consistent with the order of classes. Some of the examples end with the cell class, like this:

<div class="grid-x">
  <div class="small-6 cell">6 cells</div>
  <div class="small-6 cell">6 cells</div>
</div>

While other examples start with the cell class:

<div class="grid-container">
  <div class="grid-x grid-margin-x">
    <div class="cell small-4">cell</div>
    <div class="cell small-4">cell</div>
    <div class="cell small-4">cell</div>
  </div>
</div>

I think the cell class should always be at the end, to keep in line with how the columns class always appeared at the end in the float grid. If somebody has a good argument for it being at the beginning, I'm open to that, but it needs to be consistent across all examples.

[ncoden]

@colin-marshall Personally, I prefer when small-4 is _after_ cell for the following reasons:

• cell is the base, small-4 modify it. The action of small-4 happens _after_.
• cell properties must be defined before small-4 properties.
• Almost always in a list of components, the base will be the same while the modifiers change. It is easier to read a list and compare changes when changes happend latter on the line.

<div class="baseone basetwo verry-long-modifier"></div>
<div class="baseone basetwo small-modifier"></div>
<div class="baseone basetwo another-modifier"></div>

<div class="verry-long-modifier baseone basetwo"></div>
<div class="small-modifier baseone basetwo"></div>
<div class="another-modifier baseone basetwo"></div>

But I agree with you, it needs to be consistent across all examples. We also need to be consistent with the whole CSS community (who usually put "base" before "modifier") 😜 .

[colin-marshall]

@ncoden you persuaded me. I agree, cell should definitely come first.

[ncoden]

Merged https://github.com/zurb/foundation-sites/pull/10866