{% extends "base.html" %} {% from "library.j2" import box, icon %} {% set body_id = "no-lines" %} {% block head_lead %} Theme Demo – Snikket Web Portal {% endblock %} {% block style %} {% endblock %} {% block body %}

Theme Demo

This page is to demonstrate the Snikket Web Portal theme and allow development. You should not see this during normal use.

Disable rhythm linesEnable rhythm lines

Headings

This subsection is responsible for demonstrating the heading sizes, with the relation between the different headings and also the relation between headings and text.

Sub-heading

Repudiandae voluptatem ratione voluptatem facere. Rerum recusandae nemo commodi provident praesentium est dignissimos. Aut provident nisi omnis tempore veritatis voluptatem minus esse. Non nulla consequatur id est doloribus quos voluptates. Quae suscipit fugiat minima.

Nested Sub-heading

Omnis sit temporibus soluta et inventore. Doloribus velit unde placeat aut necessitatibus distinctio. Sapiente sunt corporis neque ducimus officiis qui. Maxime officia et architecto dolor quos autem expedita. Omnis architecto atque facilis iste dolorem voluptatem consectetur. Cupiditate et officiis accusantium inventore.

Deeper Sub-heading

Perferendis vitae doloribus praesentium natus non. Itaque hic numquam dolorum non vero et excepturi consequatur. Accusantium doloribus molestias impedit laudantium quis accusantium. Repellendus et assumenda voluptate aut ipsa quod. Dolores rerum accusantium cumque voluptatem rerum iure.

Paragraph heading

Suscipit quis tempora officiis voluptatem sint. Sed vel perferendis libero similique pariatur. Quo corporis perferendis omnis laboriosam nesciunt. Ut fuga quis deserunt maiores voluptas id fugiat odio. Omnis et facilis officia. Rerum quia quia exercitationem qui quibusdam quia et.

Another nested Sub-heading

Saepe distinctio illo et illum quia quo. Maxime eveniet voluptate non voluptatibus commodi et. Dicta consequuntur voluptatum sint ab voluptatem tenetur. Ad rem et eveniet ea animi voluptatum laborum.

The other column of this demo demonstrates the headings right beneath each other.

Main Title (h1)

Heading (h2)

Sub-Heading (h3)

Nested Sub-Heading (h4)

Deep Sub-Heading (h5)
Paragraph Heading (h6)

Text

Odit totam deleniti nam. Corporis ea dolorem aut quis nobis. Et sint quo ipsum molestiae.

Rerum quibusdam assumenda eos cupiditate tempore. Nisi repudiandae impedit laboriosam numquam qui qui consequatur officiis. Doloremque a at voluptate recusandae vitae praesentium voluptas error. Optio vero aliquam libero sit magni. Nulla beatae voluptas quis voluptatibus quam porro.

Neque libero dicta rem repellat eos. Mollitia commodi quos minima voluptatum sed. Omnis occaecati suscipit et veniam aperiam animi. Laudantium cupiditate natus est similique dolores voluptas consequatur.

Asperiores est eum qui culpa. Numquam dolor vero et. Incidunt culpa dolores alias voluptatem. Iusto maxime harum ducimus ea debitis et. Repellat a esse non rerum ratione. Illum tempore hic veniam sed laborum nemo eveniet.

Reprehenderit nihil vel qui laborum sed harum. Facere possimus assumenda et aut laudantium. Accusantium maxime ducimus sapiente.

  1. Un
  2. Deux
  3. Trois
  4. Quatre

Palette

gray
success
alert
accent
primary
gray
success
alert
accent
primary

Boxes

Boxes can be used to draw the attention to the user to a specific thing. In general, they will be used to inform the user about the result of an action or about an action item.

Full-size boxes

Full-size boxes visually separate the header and the following content into separate lines. This allows the use of all and multiple block format elements inside full-size boxes.

The following box contains an error message:

{% call box("alert", "Password change failed") %}

You need to provide a new password.

{% endcall %}

The following box contains a success message:

{% call box("success", "Bookmark created") %}

The channel was added to your list.

{% endcall %}

The following box contains a notice:

{% call box("warning", "Quota warning") %}

You have nearly reached your HTTP upload storage quota.

{% endcall %}

The following box contains a hint:

{% call box("hint", "Update available") %}

There is a new version of the Snikket Server available.

{% endcall %}

Finally, the following box has unspecified content:

{% call box("", "Something happened") %}

But we don’t know if it’s good or bad or anything.

{% endcall %}

Slim boxes

Slim boxes use inline elements only. They only support the <header/> and a single <p/>. Since, on the semantic level, the header and p are still separated, CSS is used to insert a colon for visual reading.

The following box contains an error message:

{% call box("alert", "Password change failed", slim=True) %}

You need to provide a new password.

{% endcall %}

The following box contains a success message:

{% call box("success", "Bookmark created", slim=True) %}

The channel was added to your list.

{% endcall %}

The following box contains a notice:

{% call box("warning", "Quota warning", slim=True) %}

You have nearly reached your HTTP upload storage quota.

{% endcall %}

The following box contains a hint:

{% call box("hint", "Update available", slim=True) %}

There is a new version of the Snikket Server available.

{% endcall %}

Finally, the following box has unspecified content:

{% call box("", "Something happened", slim=True) %}

But we don’t know if it’s good or bad or anything.

{% endcall %}

Elevation levels

Demonstrated with boxes:

Forms

Standard Forms (Expanded)

Forms support a single title (on any h-level to fit semantically), a description text and fields. Fields and their labels are on separate lines by default.

Random Preferences

This form illustrates the various controls supported by the theme, without being semantically useful.

The following demonstrate the different button styles. First normal buttons:

{#- -#} {#- -#} {#- -#} {#- -#}

Then the accentuated versions:

{#- -#} {#- -#} {#- -#} {#- -#}

And finally, the Danger Zone:

{#- -#} {#- -#} {#- -#} {#- -#}

The following demonstrate the different button styles. First normal buttons:

{#- -#} Tertiary {#- -#} Secondary {#- -#} Primary {#- -#}

Then the accentuated versions:

{#- -#} Tertiary {#- -#} Secondary {#- -#} Primary {#- -#}

And finally, the Danger Zone:

{#- -#} Tertiary {#- -#} Secondary {#- -#} Primary {#- -#}
{# {% for style in ["primary", "secondary", "tertiary"] %}

The following demonstrate the {{ style }} button styles:

{% endfor %} #}

Icons

Icons can be used in a variety of ways. For example in an enumeration:

Or, more importantly, on buttons:

Do the thing?

{#- -#} {% call icon("cancel") %}{% endcall %}No {#- -#} {% call icon("done") %}{% endcall %}Yes {#- -#}
{% endblock %}