How to work with containers in organisms

Feel free to stack containers. This ensures we can achieve blocks as such:

Reason for stacking containers: We often need to ensure the cards or repeater items go from edge to edge. But NOT the pretitle, title, text above it. And also NOT the optional button below it. Both should remain in container ( edited)

When stacking containers, stack as such (notice the modifier):

<div class="l-container {{component_class}}__container {{component_class}}__container--1 {{ alignment_classes }}"...>
<div class="l-container {{component_class}}__container {{component_class}}__container--2 {{ alignment_classes }}"...>
<div class="l-container {{component_class}}__container {{component_class}}__container--3 {{ alignment_classes }}"...>

Notice this:

{{ component_class }}__container {{ component_class }}__container--{{index}}

This helps devs understand how many containers there are in a block when looking at source code. The same applies for columns! Need to have multiple columns? Do as such:

<div class="column column--1"></div>
<div class="column column--2"></div>

The structure of a block should typically be as follows:

block
- container
  -- row (optional!)
  --- column
  ---- element (title, text etc)
  ---- element (title, text etc)

This comes from Bootstrap:

<div class="container text-center">
  <div class="row">
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
    <div class="col">
      Column
    </div>
  </div>
</div>

Why do we follow Bootstrap? To ensure we develop like the rest of the world and don’t come up with our own naming/structure too much

Docs Reference

Bootstrap Grid

Same reason we renamed group.twig to index.twig. As everyone (the dev community) uses index.

Place core loop or logic inside custom.

We place core loop or logic inside custom.

Good “custom” example:

{% spaceless %}

    {##################################################################################################################}
    {# -------------------------------------------------------------------------------------------------------------- #}
    {# BLOCK CUSTOM (Level 4)                                                                                         #}
    {#                                                                                                                #}
    {# Functions as an additional and optional partial of this block.                                                 #}
    {# Include the code/features/mark-up that makes this block special below.                                         #}
    {# -------------------------------------------------------------------------------------------------------------- #}
    {##################################################################################################################}

    <div class="{{component_class}}__repeater relative">

        <div class="{{component_class}}__slider swiper-container !-ml-[4px] !pl-[4px]" data-slider>

            <div class="{{ component_class }}__slider-wrapper swiper-wrapper">

                {% for item in section.cards %}

                    {% set item      = TimberPost( item ) %}
                    {% set item_main = TimberPost( item.main_page.0 ) %}
                    {% set item_img  = get_item_image( item, options ) %}

                    <div class="{{component_class}}__slider-slide swiper-slide !w-64 !h-auto pb-[4px]">

                        {% include '02-molecules/cards/card-image-text-a/card-image-text-a-1.twig' with {

                            parent_class        : component_class,
                            title               : item.card_title,
                            content             : item.card_excerpt,
                            audience            : item.terms('plan-audience'),
                            img                 : item_img,
                            link                : item_main.link,
                            index               : loop.index,

                        } only %}

                    </div>

                {% endfor %}

            </div>
        </div>

Keep naming consistent

Use container and columns and title-wrapper, text-wrapper etc. grid, repeater and card also works and ensures other devs known what it’s for.

tip

Use section.repeater and section.relationship. This gives other devs an idea what the field does. This is better then section.items which gives no indication of what type of ACF field it is. Always use ACF Select (styled version) for output options. Not true-false!

Reason: We might add many more output options in future.