Support .grid + small in forms

[cmbuckley]

If using a .grid inside a form, a small info field will not have the correct vertical spacing compared to standard input elements.

This change adds .grid to the list, providing it is enabled.

Open to suggestions for a better way to build the selector list and retain the use of :where.

[lucaslarroche]

Hi @cmbuckley, Sorry for the delay. I just looked, and actually, I don't see any problems.

What is your HTML structure? I tested with:

<form>
  <div class="grid">

    <label for="one">One
      <input id="one" name="one">
      <small>Helper</small>
    </label>

    <label for="two">Two
      <input id="two" name="two">
      <small>Helper</small>
    </label>

    <label for="three">Three
      <input id="three" name="three">
      <small>Helper</small>
    </label>

  </div>
</form>

[cmbuckley]

Hi,

.grid + small denotes an info field following the grid, which would be used as a helper for all items inside the grid:

<form>
  <div class="grid">
    <label for="one">One
      <input id="one" name="one">
    </label>
    <label for="two">Two
      <input id="two" name="two">
    </label>
  </div>
  <small>Helper that describes One and Two together</small>
</form>

This is particularly useful if the grid describes a key/value pair, for example.

Edit: rebased off latest and removed derived file changes to minimise future conflicts

[lucaslarroche]

Hi @cmbuckley,

Thank you. I finally correctly tested it. That's a great addition. I will merge your PR into the dev branch. It will be merged into master with https://github.com/picocss/pico/pull/289.

I like how you managed the $enable-classes condition. I should do this everywhere in the code. I added it to the long to-do list for v2. I want to avoid doing significant refactoring on v1.