section-metadata display-flex proposal

[ryanmparrish]

In MILO we have a few ways to offer a display: grid style to a section via the section-metadata so that you can author varying layouts.

style: two-up, three-up, etc. (one col mobile, two col tablet, ups col desktop)
masonry: span-2, span-10 (span classes target elements by index in section)

Section Masonry

Section Style

We are missing a way to author a grid w/ the following functionality.

• 2-5 cols on tablet viewport
• Align content center for wrapping uneven numbered content collections.

In order to do this we need a display: flex style on the section instead of the display: grid offerings above.

This is largely in part to support the recent editorial-card build so the grid portion of those designs are satisfied. PR

Proposal: Offer a display-flex section-metadata key that features these options above ⏫

https://rparrish-section-flex--milo--adobecom.hlx.page/drafts/rparrish/grids/flex-grids

display-flex: default
Available values

two-tablet, three-tablet, four-tablet, five-tablet
two-desktop, three-desktop, four-desktop, five-desktop
center (uneven # of items will align center in view)

Section Display Flex

This is a very slim implement w/ setting a simple -flex-items: ${index} value for an MVP and isn't a full blown flex-box utility.
I am still putting together some additional testing pages with grid-width-8*, gap, and other block types in these section styles that i'll post up in a bit.

Please let me know if you have any comments, suggestions, likes, dislikes, etc. Thanks 🙏

[ryanmparrish]

Adding more examples here testing w/ additional block types and using styles: grid-width-8 etc.
https://rparrish-section-flex--milo--adobecom.hlx.page/drafts/rparrish/grids/flex-grids
https://rparrish-section-flex--milo--adobecom.hlx.page/drafts/rparrish/grids/testing-flex-grid-w-blocks
https://rparrish-section-flex--milo--adobecom.hlx.page/drafts/rparrish/grids/action-items-flex-grid

[mokimo]

@overmyheadandbody has done this in the past for dexter, which was not working well. My hunch based on historical evidence tells me, this will be too complicated for authors and worsen the maintenance in the future. I'd scope the initial implementation to the editorial-cards if it's needed there - and vote for not having this as a general pattern.

[ryanmparrish]

@mokimo - Thanks for the thoughts and big picture view. I agree it's kind of opening the door for more scope creep and maintenance. We could instead adjust the current ups grid to support tablet options. The 2nd requirement, center align content, is not possible from my testing w/ the display:grid styles, hence the new display:flex approach. This was also intended to be used w/ other blocks and consonant had the action-items targeted for some upcoming designs w/ this offering.
I can take it back to consonant and re-asses our approach here. I know @rgclayton also had an 'advanced' section-meta using grid-template areas so maybe it's best to wait for him to return so we can colab on these similar asks.

As for supporting this directly in the editorial-card. These are grid independent so I wouldn't want to add specific grid layout implications embedded in that block over-reaching it's respective container. (Issues surfaced w/ this tactic on the caas cards)

[overmyheadandbody]

My issue isn't with having the functionality per se, it's with how we want to define it. Authors need to keep in mind so many conventions already:

• style | three-up - added in the style row, naming is number as letters, then another string;
• masonry | span-4 - added in its own row, naming is a string, then a number in decimals;
• display-flex | two-tablet - added in its own row, the property name is very engineering-oriented, naming is number as letters, then another string.

So there's a bunch of diversity that could cause a lot of confusion amongst authors. Since we already have the first two options, it's probably too late to make significant changes, but a possible approach would have been to define everything in a layout row, where you can specify number of columns, whether the section should be laid out in a masonry fashion or a flex one, etc. I have some ideas, but it's probably too little too late at this point 🙂

I'm also quite curious what Ryan C has in mind for that advanced section metadata. Do you have a timeline for your feature, is it blocking anything right now?

Naming-wise I still think display-flex is not so author-friendly. Maybe something like responsive? style defines a number of columns, masonry defines a layout type, responsive could define how things are laid out across different devices, authors don't need to care whether this is a grid / flex / float / inline-block. Also, do we need all the use-cases you described? 5 items on a single row on tablet seems like a bit of a stretch to me. Another thought: could we possibly define these in the style section? Something like three up tablet, four up desktop? We still need to think about the centering, but at the moment I'm just wondering if we can avoid dirtying the waters for authors even more.

[rgclayton]

The POC I was working on a while back uses CSS Grid grid-template-areas functionality.

Back in Dexter Chris and I originally created the Flex Container component to use this. Due to issues with IE 11 support at the time, and the generated DOM we had to pivot and use the Flex Box model.

The idea behind using grid-template-areas is that authors define the layout similar to the example MDN shows.

Couple this with per-breakpoint options and it allows for content to be rearrange per-breakpoint (kind of like using the order property with FlexBox).

The downside:
It is more complex. We toyed around with the idea of adding a flag to a section-metadata block called advanced. E.g. section-metadata (advanced) to trigger the functionality. Just so authors know what they are getting into.

The POC I created has the base part working but not the per-breakpoint options yet - which is really where this feature shines. It got put on the back burner, and Chris M did have some reservations about unleashing this similar to what you've brought up.

Let me know if you want a quick demo of what I have currently.

cc: @overmyheadandbody @ryanmparrish

[ryanmparrish]

@overmyheadandbody Thanks for the discussion, I definitely want to be mindful of those points of confusion amongst authors and have a careful approach to tackling these layout requirements. This one above might not be right and thats ok, sometimes the process of taking the design and conversation into a POC and having a discussion around its implements is the way to get the ball rolling in the right direction.

I'm still looking at this a bit, but I created a quick branch to support simple (three-up-tablet, four-up-tablet) styles.
Correct - *five-up-table isn't needed after looking at the editorial-card requirements at least.
https://rparrish-ups-grid-tablet--milo--adobecom.hlx.page/drafts/rparrish/grids/ups-grid-responsive
This may work to tie into the 'ups' but I still need to account for centering.

I will discuss w/ this related task w/ the consonant team to see if any future GWP authors are looking for this support and any impacting timelines. I am not blocked right now, other then I want to get this task sorted. ;)