Process css with twig

Started by Muut Archive 10 years ago · 5 replies · 828 views

10 years ago

In the theme I'm working on, I have two types of pages that differ in their color palette and in the font that is used, i.e. several css-classes need to have different color and font-style properties.´

At first, I tried to use two stylesheets where I defined variables that reflect the colors and fonts for each page type. Depending on the current page type, one or the other stylesheet was loaded in the header and all subsequent stylesheets simply used the variables with the respective colors assigned. The beauty of this is that I can use the same stylesheets, except the two that define the variables.

However, I learned that certain versions of Chrome (not to speak of IE) don't process variables correctly, among them recent ones such as Chrome 54 on my cell phone.

The new idea now is using twig instead of using css-variables. Essentially, I want to do something like

foo h1 {

color: {{page.mainColor}};
}

Is it possible to use the twig engine on .css-files with Grav?

10 years ago

An easy option is to add a class depending on the page type on the body tag (or in a container tag) in base.html.twig, and add the style bits accordingly.

10 years ago

That is my current fall-back option, in fact.

The problem is, I have many different container tags which I would have to adjust for this solution to work. My pages have css-classes that all contain both positioning (margin, display, etc) and styling (colors, fonts). Elements on the two types of pages receive the same postioning, but different styling, and the styling differs between classes, too. If it was just about the background color of the body it would be simple, but the way it is, with this solution I will effectively end up with two stylesheets for each page type with the same classes that contain (redundant) positioning and different styling in each case.

That will work of course, but it would make my life much easier if I could use twig to process css-files. In the end it's both text.

Of course, any other solution that doesn't hinge on css-variables is welcome, too.

10 years ago

You could just process the CSS "inline" with Twig, for example:

TWIG

<style>
#foo h1 {
color: {{ page.mainColor }};
}
</style>

And place that in the relevant templates.

More elegant would be as normal CSS, however, in which SASS/LESS/Styles would save you a lot of time and the differentiation between classes be non-significant in load times. Set up CSS with common specifications as you normally would, then in Twig do as Flaviocopes suggest and add a class to <body> matching the template.

When considering one heavier or two CSS-stylesheets, the former is better.

10 years ago

Sounds like a good plan. Thanks for the advise. I'll be traveling the next couple of days, but I'll let you know my final solution as soon as possible.

10 years ago

SASS compiled into one stylesheet (or rather two different ones) that get loaded depending on the current page type did the job. Thanks for your suggestions!

Topic	Replies	Views	Activity
About the Archive category Archive · by Deleted User, 9 years ago	0	1354	9 years ago
Hey buddies! Archive · by Muut Archive, 9 years ago	2	935	9 years ago
There is a way to do a "if condition" in MD page? Archive · by Muut Archive, 9 years ago	2	4064	9 years ago
Official docker image of grav (+admin +gitsync) Archive · by Muut Archive, 9 years ago	1	2951	9 years ago
Weird Grav + caddy + iOS + https problem Archive · by Muut Archive, 9 years ago	3	1119	9 years ago

foo h1 {

Suggested topics