I came across this issue when I was trying to find out where outlines' style information that we set on the backend is stored(For example, if I set the "Body Font Size" to be "0.474rem", where does this number "0.474" being stored). I did a in-text search for "0.474rem" and found this file seems to be the one I am looking ./templates/it_paradise/custom/config/default/styles.yaml.
However, when I look at the frontend, Chrome shows this:
It says the body font size is generated by scss/TEMPLATE_NAME/_typography.scss
so when I look at this file, it shows:
the body font size comes from this scss variable "$fontsizes-body-font-size"
So to find out where this varialbe is defined, I did an in-text search for it
In the above picture, the first one seems relevant but it is not "0.474". Actually, I've tried commenting this line out, expecting the scss engine would give an error like "variable not defined", but it doesn't. So this line is actually of no use? I am confused. Can you explain this for me please?
However, when I look at the frontend, Chrome shows this:
It says the body font size is generated by scss/TEMPLATE_NAME/_typography.scss
so when I look at this file, it shows:
the body font size comes from this scss variable "$fontsizes-body-font-size"
So to find out where this varialbe is defined, I did an in-text search for it
In the above picture, the first one seems relevant but it is not "0.474". Actually, I've tried commenting this line out, expecting the scss engine would give an error like "variable not defined", but it doesn't. So this line is actually of no use? I am confused. Can you explain this for me please?
Accepted Answer
The Gantry 5 framework automatically generates the SCSS variables based on the YAML files you have.
For more details have a look at the fontsizes.yaml file located at ROOT/templates/TEMPLATE_NAME/blueprints/styles
Here's exactly what happens:
1. Gantry 5 generates the SCSS variables based on the data you have in the YAML files.
2. Gantry 5 monitors the values in the fields in the Admin (Template Manager). Whenever you make any changes and click on "Save", Gantry 5 generates new configuration file (styles.yaml) in ROOT/templates/TEMPLATE_NAME/custom/config/OUTLINE_NAME_OR_ID
3. The values in the styles.yaml file are taken and used as the current values for the SCSS variables.
4. The CSS is being recompiled with the new values. The compiled CSS is located at ROOT/templates/TEMPLATE_NAME/custom/css-compiled
This is really a Gantry 5 related discussion.
You are asking about one particular SCSS variable but you want to understand how the Gantry 5 framework actually works.
For such questions, please use Github or the Gantry 5 chatroom on Gitter.
Thank you for the understanding.
For more details have a look at the fontsizes.yaml file located at ROOT/templates/TEMPLATE_NAME/blueprints/styles
Here's exactly what happens:
1. Gantry 5 generates the SCSS variables based on the data you have in the YAML files.
2. Gantry 5 monitors the values in the fields in the Admin (Template Manager). Whenever you make any changes and click on "Save", Gantry 5 generates new configuration file (styles.yaml) in ROOT/templates/TEMPLATE_NAME/custom/config/OUTLINE_NAME_OR_ID
3. The values in the styles.yaml file are taken and used as the current values for the SCSS variables.
4. The CSS is being recompiled with the new values. The compiled CSS is located at ROOT/templates/TEMPLATE_NAME/custom/css-compiled
This is really a Gantry 5 related discussion.
You are asking about one particular SCSS variable but you want to understand how the Gantry 5 framework actually works.
For such questions, please use Github or the Gantry 5 chatroom on Gitter.
Thank you for the understanding.
Responses (4)
-
Accepted Answer
Hello Vincent,
This is way out of the support scope.
If you know SCSS then you will know how everything works.
As you know SCSS is a CSS pre-processor. It means that the SCSS code is compiled to browser readable CSS code.
The SCSS code is compiled to temporary CSS code which is located at ROOT/templates/TEMPLATE_NAME/custom/css-compiled
By default, the$fontsizes-body-font-sizevariable is set to0.9rem. This is its default value. The SCSS variables must have a!defaultvalue so the user can overwrite them.
Once you set the$fontsizes-body-font-sizevariable to0.474rem, the CSS code will be recompiled and you can find the new code in the TEMPLATE_NAME.css file in the css-compiled folder:
/* line 6, templates/it_oxygen/scss/oxygen/_typography.scss */
body {
font-family: "Varela Round";
font-weight: 400;
font-size: 0.474rem;
}
I do want to stress out once again, that your questions are out of the support scope.
The support includes bug fixing and general template related questions.
If you need more details about how Gantry 5 and the Gantry 5 themes work, then please either open a new issue on Github or post your question in the Gantry 5 Chatroom on Gitter. -
Accepted Answer
I know this is out of scope that's why I put it here in offtopic. I just need some help understanding how things work, and I think the variable in question only exist in IT templates, so this is almost the only place to ask, but I will probably try SO later. Anyway, please don't feel obligated to answer me, but if you do I will be very grateful.
You mention "Once you set the $fontsizes-body-font-size variable to 0.474rem" this is exactly what I am trying to find out. Because I didn't set the variable to be 0.474, I only set this
And as the main post shows, throughout the whole projects, I don't find where this variable is defined to be 0.474rem, only the default value being set in _typpgraphy.scss. So how did the scss engine find its value to be 0.474rem and compile it into the css? I am not totally unfamiliar with scss, so there is just one piece of puzzle missing here, hope you can help me find it. -
Accepted Answer
Your Reply
Please login to post a reply
You will need to be logged in to be able to post a reply. Login using the form on the right or register an account if you are new here.
Register Here »
The Joomla!® name is used under a limited license from Open Source Matters in the United States and other countries.
InspireTheme is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.
InspireTheme is not affiliated with or endorsed by Open Source Matters or the Joomla! Project.