Design system
└─ layout
└─ page
└─ section
└─ snippet
└─ element
└─ element
└─ section
└─ snippet
└─ element
└─ element
└─ snippet
└─ element
└─ element
Elements
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
Snippets are a collection of two or more elements which can be used in more multiple places.
{% snippet 'example' with {
key: 'value',
} %}
Sections
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.
The CSS tag
{% css %}
{{ theme_css('example.css') }}
{% endcss %}
The JS tag
{% js %}
<script>
alert( 'Hello, world!' );
</script>
{% endjs %}
The once tag
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') }}