1 Accepted solution
Implementing of critical rendering path
SOLVEHi @EOrlov,
implementing a more "component"-based/Atomic-Design approach is definetelly doable but can be quite a workload if you're implementing it not from scratch.
If your main.css looks a bit like this:
{#- 1. Generic -#}
{% include './generic/_reset.css' %}
{% include './generic/_normalize.css' %}
{#- 2. Layout -#}
{% include "./layout/_layout.css" %}
{% include "./layout/_bootstrap.css" %}
{#- 3. Global -#}
{% include "./global/_buttons.css" %}
{% include "./global/_forms.css" %}
{% include "./global/_typography.css" %}
{% include "./global/_navigation.css" %}
{#- 4. Modules -#}
{% include "./module/module-a.css" %}
{% include "./module/module-b.css" %}
{% include "./module/module-b.css" %}
...
and you like to switch to an approach that will load the module-*.css files only if this module is used on a page, you can put something like this into your module.html
{{ require_css(get_asset_url("../../../css/modules/module-a.css")) }} {# change the path to your folder structure #}
if you want to include a template specific CSS file into a template you can put this:
{% set template_css = "../../css/templates/template-a.css" %} {# change the path to your structure #}
Note: If you want to use the template_css option, make sure that your base.html/layout.html has this line in the <head>-tag
{% if template_css %}
{{ require_css(get_asset_url(template_css)) }}
{% endif %}
best,
Anton
Implementing of critical rendering path
SOLVEHi @EOrlov,
implementing a more "component"-based/Atomic-Design approach is definetelly doable but can be quite a workload if you're implementing it not from scratch.
If your main.css looks a bit like this:
{#- 1. Generic -#}
{% include './generic/_reset.css' %}
{% include './generic/_normalize.css' %}
{#- 2. Layout -#}
{% include "./layout/_layout.css" %}
{% include "./layout/_bootstrap.css" %}
{#- 3. Global -#}
{% include "./global/_buttons.css" %}
{% include "./global/_forms.css" %}
{% include "./global/_typography.css" %}
{% include "./global/_navigation.css" %}
{#- 4. Modules -#}
{% include "./module/module-a.css" %}
{% include "./module/module-b.css" %}
{% include "./module/module-b.css" %}
...
and you like to switch to an approach that will load the module-*.css files only if this module is used on a page, you can put something like this into your module.html
{{ require_css(get_asset_url("../../../css/modules/module-a.css")) }} {# change the path to your folder structure #}
if you want to include a template specific CSS file into a template you can put this:
{% set template_css = "../../css/templates/template-a.css" %} {# change the path to your structure #}
Note: If you want to use the template_css option, make sure that your base.html/layout.html has this line in the <head>-tag
{% if template_css %}
{{ require_css(get_asset_url(template_css)) }}
{% endif %}
best,
Anton
