Tech concept behind this website

Why previous may stand as a modern approach?

Well, this website is implementation in Drupal 12 and, thanks to its brilliant architecture and common "parent" packages such as Symfony and Twig, we know that every page, region, title, block, content parts, form, element down to form element label! and similar does or can have own Twig template. In other words, we do have ability to develop on each or any little part of the render markup, amongst the other powerful things we can do there we can also add existing CSS classes, or groups of classes that Tailwind CSS has ready for us. See more about it - Get started with Tailwind CSS.

How does that work with Drupal?

This theme, entitled Ph*TailwindCSS was made from scratch, literally grounded on Drupal's core base Stable theme. Here is a draft preview of Twig templates created within, apart from the other logic and layout definitions that may be found there, those contain existing Tailwind CSS classes applied and that's 80% of magic so far!

Ph theme templates

JavaScript and Form API magic!

So far the biggest slice of the development cake for this website was developing widgets - 3 little bears - a custom CSS component is called Fab in the PCSS file, in the top right corner of the site. Those are complex because several, diverse scopes are involved. In the back-end it's programmatically loaded View's exposed filter as Search widget, Website contact form as entity form as well as Sign in (class to extend) and Sign up form (entity form).

See more about Drupal/PHP code in the next segment. Here's a few notes for JavaScript code that was much needed here as-a-heroine:

Forms magic
  • Active class on Site logo's (SVG) path, loading spinner/logic - see these below in Common elements logic in JS code toggle.
  • A specific JS code to make videos lazy-loaded. It seems like a good idea at the moment, in order to try to improve a page loading time and considering the fact that videos are stored as Media local videos, so not iFrame and no any player (such as videojs could be) yet - only a bare HTML5 video tag.
  • Intersection Observer to follow sections (those are big) being in view and animating (fade in currently). See here.
  • jQuery was intentionally skipped and around 600 lines of code in question, in total, were written pure vanilla style, actually according to the most modern Web APIs Why? Because skipping jQuery makes this code way more generic and "tune-able" into any of modern frameworks like Angular, React, Vue etc. and it seems it may have a bigger longevity/compatibility even with Drupal which is still including jQuery in the core at this point. 

0% hardcode

Currently this website is based on Drupal 12, it is mostly core with only a few usual must-have modules: Devel, Paragraphs, Token, Pathauto, Search API, Entityqueue, Svg Image, Field Group, Memcache API Integration and Gin Admin Theme. That would be all on top of the core, to work along smooth with this specific front-end solution. You can check composer.json file that is part of repository for a better overview. 

There is no single item or protocol in the config and code here that could be out of most strict Drupal standards.

Demo node form

Yet, there is a little more

This website is using slightly more of a front-end, sort of essential-yet-minimal. First of all there is official Tailwind CSS plugin Typography (requirement to be found in package.json file). 

Custom module Ph* core is required, enclosed in the repository. Specifically it serves for a development of a set of very custom widgets (see in the previous section about these), as well as for definitions of some child PHP classes, in the best OOP manner with current Drupal. For fellow Drupalers it is known why/how theme and module are differently designed as code providers, some type of code is exclusively for modules, some configs and code organization are meant for themes etc.