I have been stuck in CSS Land this week as I seem to go back and forth with iterations on this grid layout, trying to get all grid items to play nicely in their cells at different screen sizes and not distort the text or image at the same time.

On one hand, I feel relieved that I have made it to almost 100% of the original requirements and from an initial prototype showing, received some feedback to iterate on the next deliverable. The Drupal content build was all done by a senior and laid the foundation for what we were to deliver. The twig templating and then the styling was my responsibility and although I had some practice in the theming layer from previous small tasks, I still find it a painful process.

When working on pet projects, access to the UI components is a flat layer and manipulating the styling is more direct. But with twig theming it seems, the DOM markup is heavily nested such that it is hard to drill down to the HTML tags that you are trying to style. It's a process of exposing property values or array elements using a Drupal variable dump function and locating in a nested structure, the actual values you want to pull out (e.g. variable for an image source, or variable for a blog content type's title) so you can create your markup and thus have more granular control of its look.

I still seem to lose a lot of time understanding the markup and what each twig layer is responsible for: there is a twig template at the page level, node level, container or wrapper levels (if you use a framework like Bootstrap). If you are querying the database and rendering the data on the front end then likely you will have several nested Drupal Views twig layers. For me, this was the tricky part as my grid structure included a couple of views which rendered a content entity's title value and thumbnail image, both wrapped in an anchor tag which redirects to that content page (using the href attribute set to the content's URL). I couldn't find the property value in the Drupal variable dump for the title and image URL. I couldn't then build the markup I wanted and assign text content or the href attribute accordingly. I had to rely on the views template layers to render the content and try to style it from div tags that wrapped the nested title and image tag. Usually, this would be made easier if the view data was outputted as a 'View Block' which is placed on the page via Drupal's Layout Builder Module.

All in all, a very frustrating and laborious task, but I have learned more about CSS grid and now that I can see how useful it is with variable-sized content in two directions, this task hasn't caused me to shy away from using it again. Rather, I'd be more inclined to implement it as a UI solution going forward. I do think that the developer experience for templating in PHP projects has a lot to be improved and I'm not sure if more modern front-end frameworks have the same problem: making small CSS changes in the codebase, re-building your front-end assets (the command takes about 20 seconds to compile CSS) and then flush the cache (typically 30 - 60seconds) to observe changes.

Admittedly, I will look into Xedug as an alternative to understanding and finding twig variables while in general, looking for online training in twig templating. Hopefully, next time around, work like this won't be so exhausting!