simple-styleguide.html.twig in Simple Style Guide 8

{{ attach_library('simple_styleguide/simple_styleguide.default') }}

<div class="simple-styleguide--site-styles">
    <div class="site-styles--shortcuts">

        {% if default_patterns is empty %}
          {% if custom_patterns is empty %}
            {% if default_colors is empty %}
                <p>You have not selected or created any styleguide patterns.</p>
                <p><a href="{{ url('simple_styleguide.styleguide_settings') }}" class="button">Configure Simple Styleguide</a></p>
            {% endif %}
          {% endif %}
        {% endif %}

        <div class="simple-styleguide-menu-group common">
            {% if default_patterns is defined and default_patterns is not empty %}
            <strong>Default patterns:</strong>
            <ul class="simple-styleguide--jump-nav">
                {% for default_pattern in default_patterns %}
                    <li><a href="#{{ default_pattern }}">{{ default_pattern }}</a></li>
                {% endfor %}
            </ul>
            {% endif %}

            {% if custom_patterns is defined and custom_patterns is not empty %}
            <strong>Custom patterns:</strong>
            <ul class="simple-styleguide--jump-nav">
                {% for custom_pattern in custom_patterns %}
                    <li><a href="#{{ custom_pattern.id }}">{{ custom_pattern.label|lower }}</a></li>
                {% endfor %}
            </ul>
            {% endif %}
        </div>
    </div><!-- end .shortcuts -->

    <div class="sections">
        {# -- COLORS ----------------------------------------------------------- #}
        {% if default_colors is defined and default_colors is not empty %}
            <a name="colors"></a>

            <h3 class="simple-styleguide--sectionhead">colors</h3>

            <div class="simple-styleguide">
                <div class="simple-styleguide--colors">
                {% for default_color in default_colors %}
                    <div class="simple-styleguide--color">
                        <div class="simple-styleguide--color--block {{ default_color.class }}" style="background-color: {{ default_color.hex }}"></div>
                        <div class="simple-styleguide--color--swatch">
                            <span class="simple-styleguide--color--swatch--class"><label>class:</label> {{ default_color.class }}</span>
                            <span class="simple-styleguide--color--swatch--values"><label>values:</label> {{ default_color.hex }} | rgb({{ default_color.rgb }})</span>
                            {% if default_color.description is not empty %}<span class="simple-styleguide--color--swatch--usage"><label>usage:</label> {{ default_color.description }}</span>{% endif %}
                        </div>
                    </div>
                {% endfor %}
                </div>
            </div>
        {% endif %}

        {# -- SEGMENTS ------------------------------------------------------ #}
        {% for default_pattern in default_patterns %}
            {% set pattern = '@simple_styleguide/includes/' ~ default_pattern ~ '.html.twig' %}
            {% include(pattern) %}
        {% endfor %}

        {# -- CUSTOM SEGMENTS ----------------------------------------------- #}
        {% if custom_patterns is defined and custom_patterns is not empty %}
            {% for custom_pattern in custom_patterns %}
                <a name="{{ custom_pattern.id }}"></a>
                <h3 class="simple-styleguide--sectionhead">{{ custom_pattern.label|lower }}</h3>
                <div class="simple-styleguide--pattern-description" data-pattern-id="{{ custom_pattern.id }}">{{ custom_pattern.description.value|raw }}</div>

                <div class="simple-styleguide">
                    {{ custom_pattern.template }}
                    <div class="simple-styleguide--pattern">
                        <button class="simple-styleguide--view-sourecode">View Source</button>
                        <pre>{{ custom_pattern.template|render|escape('html') }}</pre>
                    </div>
                </div>
            {% endfor %}
        {% endif %}

    </div><!-- end .sections -->
</div>