{% extends "richie/base.html" %} {% load static %} {% block breadcrumbs %}{% endblock breadcrumbs %} {% block head_title %}Styleguide{% endblock head_title %} {% block content %}

Styleguide

Typography


Font families

{% for name in STYLEGUIDE.fonts %}

{{ name }}

{% include "richie/styleguide/fragment_inline_markup.html" %}

{% endfor %}

Base text

{% include "richie/styleguide/fragment_inline_markup.html" %}

{% lorem 1 p random %}
    {% for i in "35256"|make_list %}
  • {% lorem i w random %}
  • {% endfor %}

Thickness

{% for name in STYLEGUIDE.fonts %}

{{ name|title }}

Extra Bold text.

Boldest text.

Bolder text.

Bold text.

Normal weight text.

Light weight text.

Lighter weight text.

Italic text.

{% endfor %}

Sizes

{% for i in "123456"|make_list %} <h{{ i }}> {% lorem 2 w random %} {% endfor %}
{% for i in "123456"|make_list %}

<p.h{{ i }}> {% lorem 2 w random %}

{% endfor %}

<p> {% lorem 2 w random %}

Palette

{% for item in STYLEGUIDE.palette %}

{{ item }}

{% endfor %} {% for item in STYLEGUIDE.gradient_colors %}

{{ item }}

{% endfor %}

As text

{% for item in STYLEGUIDE.palette %}

.text-{{ item }}: Bold, Title 4, Title 3

{% endfor %}

Color schemes

{% for item in STYLEGUIDE.schemes %}

{{ item }}

{% for i in "23456"|make_list %}

{% lorem 2 w random %}

{% endfor %}

{% include "richie/styleguide/fragment_inline_markup.html" %}

{% lorem 1 p random %}
{% if not forloop.last %}
{% endif %} {% endfor %}

Controls

Buttons


Element support

Default .button as <p>

Default .button as <a>

Color scheme modifiers

Uncolored {% for item in STYLEGUIDE.schemes %} {{ item }} {% endfor %}

Size modifiers


Form factors


Mixin combination samples

Social badges samples

Accordion

    {% for level1_counter in "123"|make_list %}
    • {% for level2_counter in "ABC"|make_list %}
      • {% for level3_counter in "abc"|make_list %}
        • {% for level4_counter in "12"|make_list %}
        • Item {{ level1_counter }}.{{ level2_counter }}.{{ level3_counter }}.{{ level4_counter }}
        • {% endfor %}
      • {% endfor %}
    • {% endfor %}
  • {% endfor %}

Form

Default state

This field expects a date (DD/MM/YYYY)


Error state

Field 1 is required.

This field expects a date (DD/MM/YYYY)

There is an error.

There is an error.

There is an error.

There is an error.

There is an error.

{% endblock content %}