Clean up one-off paddings and margins and replace them with standardized margins.
Wrap main content sections into <section class="mb-5">, with <h2> title.
I chose .mb-5, but we could choose a smaller margin.
Step 2:
Introduce .eat-margin* utility classes that can absorb margins of first and last element more reliably than :first-child or :last-child rules.
Add .children-eat-margin class to .row elements, to neutralize margins in column elements.
Add gy-5 class for vertical margin between columns in mobile viewport.
Add .bcl-text class as a wrapper for rich text, and set margin-top for h* headings within these rich text blocks. Use .eat-margin or eat-margin-top to neutralize the margin-top of the first element, or allow margin collapse with the margin-top of the parent element.
Add margin-top to other elements as needed, now that we can absorb it with eat-margin.
Step 3:
We could go fully to symmetric margins (top and bottom), now that we have the eat-margin utilities. But let's first see how far we get with one-directional margins.
Scope
Only applied to some content type pages for proof-of-concept.
Some pages show alternative solutions. E.g. for publication I add mt-5 to h2 headings instead of wrapping the sections.
I did not bother with tests for now. I would have to study how they work, out of scope for me.
I have more changes locally, but I want to limit the scope for now.
Comparison to other PR
There was an alternative PR #363 by @planctus, with a similar goal. So what are the similarities and differences?
This PR (#429)
Other PR (#363)
section concept
introduces "sections". One level of <section> tags
introduces "sections" concept. Two levels: bcl-section, bcl-section-group
classes and css for margins
uses existing bootstrap utility classes for margins
introduces new bcl-section and bcl-section-group classes for margins
disable margin of first/last child
new eat-margin utility classes to control first and last element margin. Direct child selector (>) prevents undesired side effect on nested child elements.
contextual CSS with :first-parent, :last-parent and similar to control first and last element margin. Direct child selector (>) used for some rules, but not all -> side effects on nested children are possible.
margin-top or margin-bottom?
margin-bottom as starting point, following common approach from bootstrap 5.
margin-top for section elements
local or global?
solution can be applied locally and piecemeal
solution should be applied to a larger part of the page for the desired outcome. E.g. we also have to add the classes in the sidebar.
strategy or solution?
overall more like a "strategy" for how to apply existing solutions, rather than a completely new solution.
new solution to replace existing classes.
TBD
What's the best way to apply the <section ..> wrapper? I made an include file, but it requires to capture the content first. Would be cool to have an alternative syntax using twig {% apply ... %}{% endapply %}.
Do we want the <section> wrapper, or would we rather add mt-5 to each <h2> that acts as a section title?
Are we ok with the proposed margins? Or is mt-5 too big?
Proof-of-concept solution for vertical margins.
Goals
<p>
tags typically come from rich text, and the editor won't be allowed to add classes.)<section>
seems like a good idea.Strategy
<section class="mb-5">
, with<h2>
title..mb-5
, but we could choose a smaller margin..eat-margin*
utility classes that can absorb margins of first and last element more reliably than:first-child
or:last-child
rules..children-eat-margin
class to.row
elements, to neutralize margins in column elements.gy-5
class for vertical margin between columns in mobile viewport..bcl-text
class as a wrapper for rich text, and set margin-top for h* headings within these rich text blocks. Use.eat-margin
oreat-margin-top
to neutralize the margin-top of the first element, or allow margin collapse with the margin-top of the parent element.margin-top
to other elements as needed, now that we can absorb it witheat-margin
.eat-margin
utilities. But let's first see how far we get with one-directional margins.Scope
mt-5
to h2 headings instead of wrapping the sections.I have more changes locally, but I want to limit the scope for now.
Comparison to other PR
There was an alternative PR #363 by @planctus, with a similar goal. So what are the similarities and differences?
<section>
tagseat-margin
utility classes to control first and last element margin. Direct child selector (>
) prevents undesired side effect on nested child elements.:first-parent
,:last-parent
and similar to control first and last element margin. Direct child selector (>
) used for some rules, but not all -> side effects on nested children are possible.TBD
<section ..>
wrapper? I made an include file, but it requires to capture the content first. Would be cool to have an alternative syntax using twig{% apply ... %}{% endapply %}
.<section>
wrapper, or would we rather addmt-5
to each<h2>
that acts as a section title?mt-5
too big?