Should mini layouts come with custom "mini layout" templates

[stpaultim]

I think that this could be a really, really cool module and very useful.

I wonder if it should come with some custom templates specifically mini-layouts.

I think the most common use case for me with mini layouts, would be to simply divide a single block into multiple columns or multiple rows. All of the existing layouts are much more complicated that I would need.

I recognize that I could use "Boxton" to divide a single block into 3 additional columns, but something about this feels a little wrong?

I don't think that custom mini-layout templates would be required for release, they could be added later.

Also, I realize that flexible layout templates might be an alternative and make it possible to only create a minimal number of mini-layout-templates. But, having a list a few simple options available might be nice.

Maybe there should be three sections on the admin page.

1) Standard Layout Templates 2) Mini Layout Templates 3) Flexible Layout Templates - with either a link or instructions on how to create your own templates.

[philsward]

I'll agree here. I don't think it's a huge deal if this module doesn't provide any layouts, but I think it might be nice OOTB.

My layouts (generally) consist of a single row, single column so it isn't hard to use the flexible layout system to create it.

If anything, maybe have a link somewhere that points to the flexible layouts template for quickly creating them?

[docwilmot]

I think flexible layouts would be just fine though. They would work the same as code layouts. If someone could build a few simple flexible layouts then export the json files and add them to the config folder of this module, and PR that, then we're all set.

[stpaultim]

Flexible templates could be sufficient. BUT, currently when you configure a mini-template you are presented with a list of choices that consist of the full page layouts.

I think that given those choices, users are most likely to try and make one of the full page layouts work rather than create their own flexible template. If we are going to provide users with template options, I think it MIGHT be really nice to provide some simpler layout options that are more appropriate for a mini-layout.

I create 5 flexible layout templates that I think are more appropriate for a mini layout. They are all 3 rows with the following columns:

3,3,3 2,2,2 3,1,3 1,3,1 1,2,3

I named them after some random cities. But realize that without icons, it's not very useful because a user can't tell which is which. I created icons, but am not sure if I can use them with these flexible layout templates. I may simply rename them the configuration in the layout title.

[stpaultim]

I created a PR, but I don't recommend that we merge this, because I don't think this approach is going to work. But if anyone wants to test this to provide additional feedback, that would be appreciated.

Each flexible layout template comes with l-header class in top region and l-footer class in the bottom region, neither of which are appropriate for a mini layout and cause unexpected theming issues.

See screenshot:

(1) The header row automatically got a black background, which hides the three blocks I put there. (2) The middle row works fine (3) The footer row automatically inherited a line above it.

I think that we may want special layout templates, but I think we may to create custom layout templates files with php, so that we can make the classes more appropriate for the specific use case.

[docwilmot]

I think these would be perfect if you change the element from header/footer to just DIV.

[stpaultim]

@docwilmot - Excellent point. That did not occur to me. But, it's another reason why I think we SHOULD include some pre-configured templates with the module. Because, we beginners might not realize all the options available to them and this could save them a lot of effort.

Is there any way we can use the icons I made or is that not possible (my suspicion) with the config files?

[stpaultim]

@docwilmot - I pushed up changes to the templates that changed the elements from header/footer to DIV. Great idea.

My PR also includes icons, but there are not being used. If we can use them, you can delete them or ask me to. I want to leave them there for now, in case anyone has ideas of how to use them.

[stpaultim]

OK, I added one more layout with a 2,1,2 combination. I think that might be useful. But, I didn't bother with an icon, because I'm not sure that we can use them anyway.

[docwilmot]

The issue is that flexi layouts can't have static icons since they could be changed at any time. I suppose even naming them based on their initial configuration is incorrect since it may cause confusion if a user adds a new column to his "Two-one-two" layout and its now a 4-col layout with an odd 3-col name.

But also if we make standard layout templates, those would need to be installed separately by the user, since config wont sync them, not being just json files.

Conundrum.

I think the simplest solution though is flex layouts with initial column names like "Two-one-two" or "Three column 2-1-2".

[stpaultim]

@docwilmot - All good points. I think that naming them "Two-one-two" might be best solution for now, unless we can get dynamic icons working (see below).

https://github.com/backdrop/backdrop-issues/issues/4104

Currently, these are the options provided:

3,3,3 3,1,3 1,3,1 2,2,2 2,1,2 1,2,3

Debating the idea of removing 1,3,1 as I think the 3,1,3 might be sufficient to meet most users needs. Maybe 3,2,1 would be more useful?

[stpaultim]

Latest version of PR does the following:

1) Renames all templates 2) Removes 1,3,1 3) Add 3,2,1 and 1,1,1 4) Removes icons

[stpaultim]

OK, so now I went to make a new page layout and realize that all our mini-layout tempates are showing up for normal pages. These mini-layout templates are not going to work as expected on a full page, so I'm thinking we should put "Mini-layout" in the name, so that it's a bit more clear what they are.

How about?

Mini-layout 3,3,3 Mini-layout 3,1,3 Mini-layout 2,2,2 Mini-layout 2,1,2 Mini-layout 1,2,3 Mini-layout 1,1,1 Mini-layout 3,3,3

This way, they will all be grouped together as well. Which would also be very nice.

[philsward]

@stpaultim mind adding a 1 row 1 column?

Some mini layouts will need more options so I'm not opposed to several options but a lot of use cases will see these added to an existing template that is already grid so having multiple rows and columns is unnecessary.

It's a personal workflow so I'm fine with using a flexible template if I need to.

Edit: I think that's the 1,1,1 so never mind 😁

[stpaultim]

@philsward - Yes, my theory in making all the mini-layout templates into three rows was that you users could use 1, 2, or 3 of the rows. It don't think there is downside to having extra rows. Let me know if anyone thinks that is wrong. I suspect (my guess only) that 95% of the use cases for a mini-layout can be covered by making three rows and 3 columns available. If a user needs a 4th row or column, they will have to make it themselves because we can't cover all options. Hopefully, we can cover most of them.

If someone needs 2 columns over 3 columns, the use the 1,2,3 layout. If someone needs 3 columns over 1 columns, they use the 3,2,1 layout. If someone need just 1 row with 1 column, they can actually use any layout that has a single column row. Etc.

Does this all make sense?

[philsward]

It does make sense. I think the number of rows is less important than the number of columns? But I honestly can't speak for the workflow of others.

Before bootstrap, I would have used a lot of customization. After bootstrap, columns and rows were done in CSS, so a single row and single column made the most sense for my workflow.

Having more rows than what is needed... You're probably right. I don't care for the initial clutter but after you mentioned it, I see there's nothing wrong with it either. Maybe someone can add some logic (maybe layouts already does this) where an empty container doesn't output any HTML, that way there is literally zero downside except for us semi OCD people? 😉

Not really adding anything to the discussion here... Just some random thoughts. I think you're on the right track though.

[stpaultim]

This is what they look like right now.