backdrop
Make it possible to have full-width regions for banners
Description of the need
When users install Backdrop for the first time, one of the first things we present to them is a full page width banner with a background image. Out of the box, there is no way to replicate that on any other page, on any other layout, or with any other theme. In addition to that, we don't signify any difference on the layout page that would tell the user that the top region in Boxton is treated differently on the home page from any other page.
Proposed solution
We should add another region to the core layouts so that users can easily add full width banners to the page without needing to add custom themes or custom layouts to the site.
Alternatives that have been considered
This can be accomplished using custom layouts or themes, but it is not signified anywhere that users would have to do that.
Apparently this broke a bunch of the layout tests, so I will have to get back to this later.
We looked at this in the design/UX meeting today.
The problem that we're trying to solve is a real problem. This is a relatively easy to implement improvement, but the more I think about it and the more I discuss this with others, the less convinced I am that this is the right solution for core.
I think the right solution to problems like this, is to make flexible layout templates much better. But, I'm also skeptical that will be happening anytime soon.
I would not stand in the way of this PR. I would like to see a better solution to this problem, but I not very confident that it will happen anytime soon.
I look forward to what others think about this.
Thanks to @hosef for submitting this PR. I hope that at a minimum, it results in some good conversations about the lack of flexibility in core layout templates and how to improve them.
This came up informally during a demo of a new module under development to support different hero blocks on different pages. A question raised is can this be achieved with something like a flexible mini-layout?
I think the right solution to problems like this, is to make flexible layout templates much better. But, I'm also skeptical that will be happening anytime soon.
What improvements in flexible layouts would be required to help this issue?
It might be good to get both solutions.
I was just testing what's possible with flexible layouts and I got further than I thought. I had forgotten that it allows the selection of container-fluid which gets one most of the way there. Just need to get rid of the padding. So maybe a third option for Row width behavior which would be ~~"No container class"~~ or something better worded. If I manually remove container-fluid class then it does go edge to edge.
Plus layout.css would need to be adapted to not always add a bottom margin to .l-header. Usually people may want the banner to be flush to the header.
Update: can't just remove the container class since then there's a horizontal scrollbar.
Oh, silly me. There already is a third option, which adds a no-container class.
The no-container class needs a tweak to remove the margins on the immediate child .row and the immediate child .l-col to avoid the horizontal scrollbar. Only the immediate children since we don't want to mess up the padding and margins on other child layouts, such as multiple columns, etc.
no-container > .row {
margin-left: 0;
margin-right: 0;
}
.no-container > .row > .l-col {
padding-left: 0;
padding-right: 0;
}
Can we add this to the list of CSS fixes we are trying to get into 1.x? :)
