Skip to main content

Anatomy of a theme

└─ layout
  └─ page
    └─ section
      └─ snippet
        └─ element
        └─ element
    └─ section
      └─ snippet
        └─ element
        └─ element
      └─ snippet
        └─ element
        └─ element

Elements are the base level of the Aero design system these can be used for things such as Buttons which don't require other components.

{% element 'example' with {
    key: 'value',
} %}

Snippets are a collection of two or more elements which can be used in more multiple places.

{% snippet 'example' with {
    key: 'value',
} %}

Sections are a collection of two or more snippets and elements which can be used in more multiple places.

{% section 'example' with {
    key: 'value',
} %}

Javascript and CSS

The js and css tag will push any javascript to the bottom of the DOM and css to the top. This allows javascript to be used within sections, snippets and elements without breaking the flow of the DOM.

{% css %}
    {{ theme_css('example.css') }}
{% endcss %}


{% js %}
    <script>
        alert( 'Hello, world!' );
    </script>
{% endjs %}

Using the once tag you are able to create a re-usable section without having duplicate stylesheets / javascript.

{% css %}
    {% once 'example' %}
        {{ theme_css('example.css') }}
    {% endonce %}
    {% once 'example' %}
        {{ theme_css('example.css') }}
    {% endonce %}
{% endcss %}

{{ theme_css('example.css') }}
Back to top