Css, latte files, variables. Can someone please show me the best way to solve this problem with Nette?

TileStyle

Hi everybody.

To cut it as short as I can, I have a project where I have 20 latte templates. These templates consist of a heading and an intro, body and other various elements.

Now I need to style all of those template elements, but I also need to be able to style them based on a selected CSS Framework.

To understand what I mean, let's say I have the following snippet of code in 10 of my latte templates

		<p class="title is-5 py-2 my-0 has-background-dark has-text-white">
			{$intro->title|truncate:100}
		</p>

Now that for example works well for Bulma CSS, but not for others. Ideally I would want the following.

		<p class=$introClass>
			{$intro->title|truncate:100}
		</p>

Obviously then I would only have to change the variable $introClass and all the latte templates would render the same class. I can then change the CSS framework and simply update the $introClass variable.

But I am not sure what the best way to go about this with nette is? I have tried including a parent latte file as follows.

{* Parent latte file *}
{$var introClass = "blue"}

{* Child latte file *}
{include '../parent.latte'}

But then I have no idea how to call $introClass? I am sure there are better ways to do this, hence my question. Any suggestions are more than welcome.

dakur

@TileStyle Not pretty sure what are you trying to achieve – why on earth would you need to use multiple CSS frameworks at once?

Anyway, can't you just use classical way with putting a selector to body or whatever parent element?

<body class="whateverFrameworkName">
  <p class="title is-5 py-2 my-0 has-background-dark has-text-white">
    {$intro->title|truncate:100}
  </p>
</body>

.whateverFrameworkName .title { ... }
.whateverFrameworkName .has-text-white { ... }

About passing variable from includer to caller – I think this is not possible. But we use a hack with blocks – defining a block in includer and checking for its existence/content in caller. Still, do not know if it solves your problem.

Last edited by dakur (2020-08-31 10:00)