Propose Column[s] and Row[s] Component

[taufik-nurrohman]

Remove field/flex and flex type, and remove flex option in flavors of column and columns type.

Given this data:

type: columns
gap: true  # default
lot:
  - type: column  # default
    size: 4/12
    content: 'Content of column 1.'
    stack: 10  # default
  - type: column  # default
    size: 8/12
    content: 'Content of column 2.'
    stack: 20

Would generate this HTML markup:

<div class="lot:columns count:2 has:gap">
  <div class="content:column count:1 size:4/12">
    Content of column 1.
  </div>
  <div class="content:column count:1 size:8/12">
    Content of column 2.
  </div>
</div>

Given this data:

type: rows
gap: true  # default
lot:
  - type: row  # default
    content: 'Content of row 1.'
    stack: 10  # default
  - type: row  # default
    lot:
      - type: columns
        gap: true  # default
        lot:
          - type: column  # default
            size: 6/12
            content: 'Content of row 2, column 1.'
            stack: 10  # default
          - type: column  # default
            size: 6/12
            content: 'Content of row 2, column 2.'
            stack: 20
        stack: 10  # default
    stack: 20

Would generate this HTML markup:

<div class="lot:rows count:2 has:gap">
  <div class="content:row count:1">
    Content of row 1.
  </div>
  <div class="lot:row count:1">
    <div class="lot:columns count:2 has:gap">
      <div class="content:column count:1 size:6/12">
        Content of row 2, column 1.
      </div>
      <div class="content:column count:1 size:6/12">
        Content of row 2, column 2.
      </div>
    </div>
  </div>
</div>

You can nest as many columns/rows as you like.

This opens up possibility to build JSFiddle/JSBin/CodePen-like layout in Panel and opens up possibility of Split.js integration (as a separate extension) in the future.

The simplest case for columns would be to add sidebars in Panel.