W3C home > Mailing lists > Public > public-css-archive@w3.org > July 2016

[csswg-drafts] [css-grid] Allow grid-positioning of indirect children

From: fantasai via GitHub <sysbot+gh@w3.org>
Date: Mon, 11 Jul 2016 21:26:54 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-164938407-1468272411-sysbot+gh@w3.org>
fantasai has just created a new issue for 
https://github.com/w3c/csswg-drafts:

== [css-grid] Allow grid-positioning of indirect children ==
Copied from 
https://www.w3.org/blog/CSS/2015/08/10/css-grid-pls-review/comment-page-1/#comment-13462

The fact that Grid Layout restrict positioning to immediate child 
nodes of the container appears to me as overly restrictive.

Here is a use case of indirect child nodes participating in grid 
positioning (similar to outlook 2015):

Consider a layout where the navigation area (“NAV”) sits to the left 
of the content area (“CONTENT”). The application presents a system of 
say four subsystems. Each subsystem has one or more forms which should
 fill the whole content area while being activated.
The Navigation bar has a noop button each on the top (“TOP”) and the 
bottom (“BOT”), each outside of the “NAV” grid area. Beetween them, 
there is a button for each of the subsystem (inside the “NAV” grid 
area).

When clicked, the subsystem buttons below slide towards the bottom, 
and for each form of the subsystem, a individual button is displayed 
inside the free area. If one of the forms for the subsystem had been 
displayed before, it will show up in the content area, otherwise, a 
default frontmatter is displaed. Clicking one of the subsystem buttons
 whill result in the correponding subform being displayed in the 
content area. Clicking on a different subsystem button results in an 
analoguous behavior, making the other subsystem’s form buttons and 
forms disappear.

Structurally, the data would by organized by subsystem such that each 
subsystem contains one or more groupings each associated with a form 
for that subsystem. Each grouping goes into the content area but also 
provides for a clue for a form button below the subsystem button.

It would by rather straightforward to build this application with a 
framework like AngularJS.


```
System
-subsystem 1
 common data 1
 group 1_1
group-specific data 1_1
group 1_2
group-specific data 1_2
group 1_3
group-specific data 1_3
-subsystem 2
common data 2
group 2_1
group-specific data 2_1
-subsystem 3
common data 3
group 3_1
group-specific data 3_1
group 3_2
group-specific data 3_2
group 3_3
group-specific data 3_3
-subsystem 4
common data 4
group 4_1
group 4_1
group-specific data 4_1
group 4_2


+----------------+---------------------------------------------+
| "TOP" bnNOOP | "CONTENT" Currently Form 3_2 with data |
+----------------+ from common data 3 and group 3_2 |
| "NAV" | |
| (System as | |
| flexbox | |
| containg the | |
| buttons below | |
| without bnNOOP)| |
+----------------+ |
| bnSubsystem 1 | |
+----------------+ |
| bnSubsystem 2 | |
+----------------+ |
| bnSubsystem 3 | |
+----------------+ |
| +----------+ | |
| | Form 3_1 | | |
| +----------+ | |
| +----------+ | |
| | Form 3_2*| | |
| +----------+ | |
| +----------+ | |
| | Form 3_3 | | |
| +----------+ | |
| | |
| | |
+----------------+ |
| bnSubsystem 4 | |
+----------------+ |
| "BOT" bnNOOP | |
+----------------+---------------------------------------------+
```

The sequence of subsystems and its immediate children does not reveal 
enough of the data structure to fill the grid as desired.

Please consider to allow for placement of indirect children of grid 
containers. Of course, if there is a descendant grid container, then 
all of its descendants with a declared grid-area should go either into
 the outer grid or the inner grid whichever contains the closest 
matching grid-area name declaration.

Please view or discuss this issue at 
https://github.com/w3c/csswg-drafts/issues/313 using your GitHub 
account
Received on Monday, 11 July 2016 21:27:02 UTC

This archive was generated by hypermail 2.4.0 : Thursday, 24 March 2022 20:26:33 UTC