I have started the implementation of the Tailwind CSS template on Joomla as a proof of concept of the idea of an utility-first framework. The final objective has been creating a full alternative of the classic front-end stack that empowers the current generation of the big CMSs. Today, I'm publishing XT Tailwind for Joomla 3.0. This version includes the HTML Asset Tags Builder, a tool to coordinate the Asset Tags of installed packages. At this point, it is possible to install the template on any Joomla site and integrate the content generation with the new design, based on Tailwind CSS.
https://github.com/anibalsanchez/XT-Tailwind-for-Joomla/releases/tag/3.0.0
The results of the integration can be observed on this blog and on https://news.extly.com/; and tested with Lighthouse.
To test the integration of several extensions, the new HTML Asset Tags Builder is being used in the following extensions (and, of course, in the template itself to render the scripts and style):
- XT Search for Algolia, the solution that integrates Algolia search engine.
- XT Adaptive Images, the solution that integrates the resizing of images and the lazy load
- XT Youtube Optimizer, the solution that optimizes the video player
The benefits of the HTML Asset Tags Builder
The main objective of the new Tag Builder is separating the responsibilities of the HTML Document coordination between the different actors of the process. In this way, the requirements of a modern HTML can be better managed.
In this implementation, there is a Repository (singleton object) that packages can use to store the assets tags to be rendered, and the HTML Asset Tags Builder than finally generates the tags based on the positions and priorities. The currently available tags are:
- Inline ScriptTag
- Inline StyleTag
- Link Critical Stylesheet Tag
- Link Preload Stylesheet Tag
- Link Stylesheet Tag
- Script Tag
As a sample of the new semantic:
use Extly\Infrastructure\Support\HtmlAsset\Asset\InlineScriptTag;
use Extly\Infrastructure\Support\HtmlAsset\Asset\LinkCriticalStylesheetTag;
use Extly\Infrastructure\Support\HtmlAsset\Asset\LinkStylesheetTag;
use Extly\Infrastructure\Support\HtmlAsset\Asset\ScriptTag;
// Add template js
$templateJsFile = CMSHTMLHelper::script('template.js', ['version' => 'auto', 'relative' => true, 'pathOnly' => true]);
$htmlAssetRepository->push(ScriptTag::create($templateJsFile));
// Add Stylesheets
$templateCssFile = CMSHTMLHelper::stylesheet('template.css', ['version' => 'auto', 'relative' => true, 'pathOnly' => true]);
$htmlAssetRepository->push(LinkCriticalStylesheetTag::create($templateCssFile));
// Additional inline head scripts
$headScripts = $this->params->get('headScripts');
if (!empty($headScripts)) {
$htmlAssetRepository->push(InlineScriptTag::create($headScripts));
}
And, then finally, in the template:
<jdoc:include type="xthtmlassets" />
Next Steps
The results are promising, and the plan is continuing the deploying of the new technologies on the sites that we manage to take advantage of the performance gains.
To the moon!
