Grids

[wilbennett]

I see where our thought processes were diverging now. I was thinking a grid for the overall layout with each section being flex boxes. You were thinking grids with each section being grids themselves - able to re-parent with styles as you thought. Your approach is actually the more flexible (if a bit heavy handed :) ) since the HTML can now just be a flat list of DIVs - no structure whatsoever (at least I think that should work). It requires more CSS style work though so it's a trade-off (as are most things in code).

I would keep the nested DIVs as you have though so you can switch individual sections to flex later if needed.

[wilbennett]

hmmm...

I just tried and it looks like the items must be nested in order to show up in the grid.

[wilbennett]

yeah...

I played around a bit and came up with:

HTML: Need a container and child elements.
CSS: Can re-order the child elements as desired.

So there really is no re-parenting in CSS. You are just allowed to style, order, hide, show items/sections as desired.

Let me know if your understanding is different.

[wilbennett]

Also, you said earlier that you agreed with keeping things small and composeable but then you kinda did the opposite :). This leads me to believe you didn't understand the specifics of what I meant. Since we're both learning the layout, it probably won't be productive to go back and forth. I'll wait until you have the first "page" (this is my understanding of how you're viewing the sections - only one visible at a time) done and then show the alternative.

I could be wrong so continue how you're going and I'll do a sample after the first page is complete.

In case you're curious:

Notice how much you have to go through to update the sections? You're basically creating a tree of sections in the HTML (you can simplify the css if you want to keep this structure). You're about five levels deep right now! (e.g. container/characterSection/characterAnimationEditor/frameNavigation/items) This makes keeping track/modifying a chore. You have to find the right section and level in the HTML. Then you have to setup grid template areas in multiple sections in the CSS. If I understand your thinking correctly - with a section being a page - I'm proposing there only be three grid template areas, one per page. The HTML would be only three levels: (container "page")/section/items (e.g. characterSection/frameNavigation/items).

Another option, if you want to keep the nesting in the HTML (there are some merits to doing so), is to simplify the CSS by not using named areas. This will at lessen the amount of changes you have to do when creating/modifying areas. You wouldn't need a style for each area - which right now only names the area for most of them. You only really need the names if clarity is an issue or if there is no nesting. You can also remove the "container" div - each section will be a container.