Skip to content
STYLESCAPE

Messages

Django's messages framework on top of the alert and toast modules. The message's level_tag (debug, info, success, warning, error) is the modifier, so the template needs no mapping: class="ss-c-alert ss-c-alert--{{ message.level_tag }}". Extra tags stay available in message.extra_tags.

Inline list

ss-c-messages resets the list; the alerts space themselves. Wrap the text of errors only in role="alert" (inside the li, so the list keeps its semantics); a page full of info messages then doesn't interrupt a screen reader.

  • SQL queries: 14 in 32 ms.
  • Your export is being prepared.
  • The project “Harbour” was added successfully.
  • Your subscription ends in 3 days.
  • Please correct the errors below.
HTML 
<ul class="ss-c-messages" aria-label="Messages">
            <li class="ss-c-alert ss-c-alert--debug">SQL queries: 14 in 32 ms.</li>
            <li class="ss-c-alert ss-c-alert--info">Your export is being prepared.</li>
            <li class="ss-c-alert ss-c-alert--success">The project “Harbour” was added successfully.</li>
            <li class="ss-c-alert ss-c-alert--warning">Your subscription ends in 3 days.</li>
            <li class="ss-c-alert ss-c-alert--error"><span role="alert">Please correct the errors below.</span></li>
        </ul>

Dismissible

  • Changes saved.

HTML 
<ul class="ss-c-messages" aria-label="Messages">
            <li class="ss-c-alert ss-c-alert--success">
                <p class="ss-c-alert__body">Changes saved.</p>
                <button type="button" class="ss-c-alert__close" aria-label="Dismiss message">✕</button>
            </li>
        </ul>

As toasts

ss-c-messages--toast floats the list in the top-right corner (--ss-z-toast); each message is an ss-c-toast with the same modifiers. Shown in place here with a static wrapper.

  • Cache warmed.
  • 3 new comments.
  • Profile updated.
  • Connection is slow.
  • Upload failed.
HTML 
<ul class="ss-c-messages ss-c-messages--toast" aria-label="Notifications" style="position: static">
            <li class="ss-c-toast ss-c-toast--debug">Cache warmed.</li>
            <li class="ss-c-toast ss-c-toast--info">3 new comments.</li>
            <li class="ss-c-toast ss-c-toast--success">Profile updated.</li>
            <li class="ss-c-toast ss-c-toast--warning">Connection is slow.</li>
            <li class="ss-c-toast ss-c-toast--error"><span role="alert">Upload failed.</span></li>
        </ul>

Jinja2 template

The stylescape/macros/messages.html.jinja macro renders exactly this:

Jinja 
{% if messages %}
<ul class="ss-c-messages" aria-label="Messages">
    {% for message in messages %}
    <li class="ss-c-alert ss-c-alert--{{ message.level_tag }}">
        {%- if message.level_tag == "error" %}<span role="alert">{{ message }}</span>
        {%- else %}{{ message }}{% endif -%}
    </li>
    {% endfor %}
</ul>
{% endif %}