We are using Smarty for our UI in our platform which is very complex, used by thousands of users per hour, and we're looking for a way to uniformize a bit more our UI by creating some sort of component sets.
We did this for a couple of elements, for example Buttons, Text Inputs and complex elements by using the registerPlugin to register many blocks and functions.
For example, using the following in our Smarty templates:
{Button title="Try now"}
Will run this:
public static function simple($params, $smarty)
{
$smarty->assign('button', $params);
$smarty->caching = false;
return $smarty->fetch(self::$componentsPath . '/UI/buttons/btn-simple.html', false);
}
Results in:
<button type="button" class="btn btn--primary">
<span class="btn__label">Try now</span>
</button>
With this, we make sure that all our buttons will look the same, but I get the impression we are overusing the registerPlugin and $smarty->fetch functions even for some things that could be simple.
This was most notable when today we had to implement a Card element. The Card itself could be really simple, but it may have an header, content and actions elements inside of it.
So, for example, to get the following HTML
<div class="card">
<div class="card__header">
<img class="card__logo" src="test.jpg" alt="title">
<div class="card__titles">
<div class="card__label">Title Grayed</div>
<div class="card__title">Title Main</div>
<div class="card__subtile">Title Subtitle</div>
</div>
</div>
<div class="card__content">
Add some custom content
</div>
<div class="card__actions">
<button class="btn btn--primary">Try now</button>
</div>
</div>
We would simply do the following to make sure all our cards would look the same:
{Card}
{CardHeader logo="test.jpg" title="Title Main" label="Title Grayed" subtitle="Title Subtitle"}
{CardContent}
Add some custom content
{/CardContent}
{CardActions}
{Button title="Try now"}
{/CardActions}
{/Card}
It does look better, but I don't know if it feels right to do so many $smarty->fetch to in the end, draw only a couple <div> elements...
Is there any better way of doing it or any suggestion?