Theming is hard. It’s usually the most time-consuming part in our work. Writing a DB query or baking logic into a Drupal hook is the easy part. The main challenge is making an element look like the design and appear correctly on different devices and browsers.
Our main goals remain the same as from this post:
- Standardization in multiple projects
- Reduction in cognitive load
- Optimization for rewrites
All the code examples in this post are inside our Drupal-starter. You can install it locally, and see all the elements under the Style guide page - https://drupal-starter.ddev.site:4443/style-guide. The Drupal-starter code base is used as the starting point of our projects, so you’ll find it very mature!
An example News node on a fresh Drupal starter
A quick reminder is that for theming, we’re using the Pluggable entity view builder module, known as PEVB.
Back to our problem - we don’t want to theme the same things over and over again. This sounds trivial, but I’m sure many are doing that. We have! Here’s an example of two different twig files:
<div class="flex flex-col gap-y-3 md:gap-y-5">
{{ title }}
{{ body }}
</div>
<div class="flex flex-col gap-y-3 md:gap-y-5">
{{ author }}
{{ teaser }}
{{ date }}
</div>
The cards’ contents differ but the wrapper classes are the same. Also, the chances of changing the gap on one twig file and forgetting the other are high. At least for us, on bigger projects, updating the gap on only some files was a common thing.
Let’s think of the designer for a moment. Should the gap between items be 20px or 24px? The answer, for us, is “whatever works best as long as it’s consistent™.” If one card is 20px, then all cards should be the same. To deal with that, we have a limited set of trait methods:
wrapContainerVerticalSpacing(20px)wrapContainerVerticalSpacingTiny(2px)wrapContainerVerticalSpacingBig(40px)wrapContainerVerticalSpacingHuge(60px)