Main Files

main.html.twig

This file controls the outer html shell of all other templates e.g.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ page.title }}</title>
    ...
</head>
<body>
    ... include the header, middle layout and footer files...
</body>
</html>

main.css.twig

This file sets up the importing of all other CSS files. Although you can edit and override this file, we sugest you add your imports to the site.css file. This way you can benifit from updates to this file, as the site.css.twig will always be included and you can your own includes in here.

{% include "base/packages.css" %}
{% include "base/base.css" %}
{% include "layout/container.css" %}
{% include "modules/pulls.css" %}
{% include "site.css" %}

main.js.twig

This file, much the same as the main.css.twig file, handles the importing of other javascript files. Like with the css, there is a site.js.twig file you can use to import your own js files

Site/extending files

main.html.twig

With all the HTML files, you can extend them by overriding the same path, and then using a combination of twig extends and blocks, or replacing the entire content if needed

{% extends "@responsive-base/main.twig.html" %}

{% block "body_append" %}
    {{ parent() }}
    <div>Always added to bottom content...</div>
{% endblock %}

site.css.twig

Rather than overriding the main.css.twig file, you can use the site.css.twig file, which is always included at the bottom of the main.css.twig file, this allows you to keep all updates that happen in the

site.js.twig

Same as with the css, instead of overriding the main.js.twig file, you can maintain updates by just overriding the site.js.twig file, which is intentionally left blank for you to use, and is always included by the main.js.twig file.