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') }}

Articles in this section

Was this article helpful?
0 out of 0 found this helpful