Can someone please explain how CSS works in Grav?

Support
1

Hello everyone, and thank you to the developers for making Grav so lightweight, efficient, and beautiful.

Please don’t kill me for asking this stupid question, but I could not find the answer anywhere so far.

I know CSS, I have used it on a number of occasions to get the look and feel that I want using other CMS, but I am a bit thrown when it comes to understand how this works in Grav.

To cut a long story short, it took me some time to understand that the changes that I was making in the CSS in Grav did not show, because CloudFlare was caching my pages, even after I disabled all the caches that I could find in Grav. OK I got it now.

What puzzles me is how the CSS happens in Grav.

If I look into my install folder, I see

/user/themes/antimatter/css
/user/themes/antimatter/css-compiled
/user/themes/antimatter/scss

I understood that I need to put any CSS override in custom.css in the antimatter/css folder
I assume that this will be the last CSS file to be used, so any changes need to go there.

Is css-compiled something that comes with the template, it has been compiled once, and will never be compiled again, or is my server recompiling files (when needed)for speed and keeping them here?

I never heard of scss before Grav, but I understand the principle behind it.
Is scss turned into CSS by the server at runtime, and is this happening before or after reading the ‘regular’ CSS files.

My limited brain can figure out how to use a style.css sheet, even two or three of these, but I must admit that it starts to get a bit too complicated for me.

So the question is:
Could I please have a list of priorities for the way CSS by Grav?

I used the inspect CSS from IE and Chrome and FF and while Chrome usually reports that the file responsible for the style is a scss file while IE never does that. So I am confused.

Thanks in advance

Nik

2

hi @nik

if you inspect Antimatter code

You will see the order of stylesheets the numeric value is the priority, higher load first so in that example grid-min.css is the first
All the template scss are compiled into template.css
More info Here

About SCSS, i understand could be confusing, take an example (on your local computer you set up your dev environment)
So as you said you can override by make changes to custom.css (lowest priorty, see base.html.twig)

But it will be easier to change your scss and compile them, why because you have variables
example in Antimatter _colors.scss and scss is split into several scss files self explain (_forms.scss, _buttons.scss …), you have even a _custom.scss.

With scss you see in live your changes, everytime a file changes, the pre-processor compile the scss files into the css folder See here how to install compiler

All Scss advantage (variables, nested structures, partials, imports, operators and mix-ins)

About browser inspection, chrome report the scss file responsible for the style so you know which scss files to change or to override with _custom.scss but the styles for the templare are located in template.css
If you are uncomfortable with chrome that report scss just disable it in Chrome Settings, untick Enable CSS source maps

02
02475×730 46.8 KB

but as someone said on https://learn.getgrav.org

This may sound a little daunting at first, but you can use as much or as little SCSS as you like, and once you start, you will have trouble going back to traditional CSS. Promise!

The best way is to use theme inheritance to do your changes without modify original theme

Hope that’s help

Dimitri

1 Like
3

Thank you so much Dimitri, that makes things a lot clearer for me, I much appreciated your help.

Nik