Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Proposal] Grid: Add layout definition for view framework independent control #2

Open
Anthropic opened this issue May 14, 2016 · 0 comments

Comments

@Anthropic
Copy link
Member

Currently the combined use of type section and fieldset with css properties defines the layout for the bootstrap decorator and the material decorator is adding a grid system, but a generalised layout model is needed for a standard that can be implemented by any library.

The key elements will always be: horizontal grouping, vertical grouping, width & height with additional support for passing alignment and more view specific details if needed.

ASF Bootstrap is very bootstrap centric

{
  "type": "section",
  "htmlClass": "row",
  "items": [
    {
      "type": "section",
      "htmlClass": "col-xs-6",
      "items": [ "name" ]
    },
    {
      "type": "section",
      "htmlClass": "col-xs-6",
      "items": [ "email" ]
    }
  ]
}

ASF Material is currently a little flex centric

{
  "type": "section",
  "grid": { "layout": "column" },
  "items": [
    {
      "type": "section",
      "grid": { "layout": "row", "flex": 50 },
      "items": [
        {
          "key": "firstname",
          "grid": { "flex": 50 }
        },
        {
          "key": "lastname",
          "grid": { "flex": "" }
        }
      ]
    }
  ]
}

Proposed

{
  "type": "section",
  "grid": { "layout": "column" },
  "items": [
    {
      "type": "section",
      "grid": { "layout": "row", "span": 50 },
      "items": [
        {
          "key": "firstname",
          "grid": { "span": 50 }
        },
        {
          "key": "lastname",
          "grid": { "span": "auto" }
        }
      ]
    }
  ]
}

The grid attribute is short and to the point although I was also partial to structure early on. Grid being a parent object for anything layout related can help separate structure and make it easier to find and operate on or set defaults for.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant