2 Elements

Every littles UI elements.

2.1 Alerts

Description

Default styles for alerts.

Default styling

Example of alert with a link

Modifiers

.alert-info

info alert

Example of alert-info alert with a link

.alert-success

success alert

Example of alert-success alert with a link

.alert-warning

warning alert

Example of alert-warning alert with a link

.alert-error

error alert

Example of alert-error alert with a link

Markup 
<p class="alert  pa1">Example of alert <a href="#">with a link</a></p>
<p class="alert {{ modifier_class }} pa1">Example of {{ modifier_class }} alert <a href="#">with a link</a></p>

Source: src/styl/_elements/_alert.styl, line 1

2.2 Avatar

Description

Use a square image.

Avatar element use em so we can and should modify its font-size to manage the size of the element.

Example

Markup 
<div class="avatar">
    <img src="./img/72x72_avatar.png" alt="" />
</div>
<div class="avatar">
    <svg width="72" height="72">
        <use xlink:href="#symbol-user"></use>
    </svg>
</div>
<div class="avatar">
    <img src="./img/72x72_avatar.png" alt="" />
</div>
<div class="avatar">
    <svg width="72" height="72"><use xlink:href="#symbol-user"></use></svg>
</div>

Source: src/styl/_elements/_avatar.styl, line 1

2.3 Breadcrumb

Example

Markup 
<nav class="breadcrumb" role="navigation" aria-label="Vous êtes ici :">
    <ol class="breadcrumb-list" itemscope itemtype="http://schema.org/BreadcrumbList">
        <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemscope itemtype="http://schema.org/Thing" itemprop="item" href="#"><span itemprop="name">Accueil</span></a>
            <meta itemprop="position" content="0" />
        </li>
        <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemscope itemtype="http://schema.org/Thing" itemprop="item" href="#"><span itemprop="name">Région</span></a>
            <meta itemprop="position" content="1" />
        </li>
        <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a itemscope itemtype="http://schema.org/Thing" itemprop="item" href="#"><span itemprop="name">Aquitaine</span></a>
            <meta itemprop="position" content="2" />
        </li>
    </ol>
</nav>
{% spaceless %}
<nav class="breadcrumb" role="navigation" aria-label="Vous êtes ici :">
    <ol class="breadcrumb-list" itemscope itemtype="http://schema.org/BreadcrumbList">
        {% for item in breadcrumb -%}
        <li itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
            <a itemscope itemtype="http://schema.org/Thing"
            itemprop="item" href="{{ item.uri }}">
                <span itemprop="name">{{ item.title }}</span>
            </a>
            <meta itemprop="position" content="{{ loop.index0 }}" />
        </li>
        {% endfor -%}
    </ol>
</nav>
{% endspaceless %}

Source: src/styl/_elements/_breadcrumb.styl, line 1

2.4 Buttons

Description

Colette comes with basic styles for call to action / buttons.

Default styling

Call to action With left icon With right icon

Modifiers

.btn-line

btn lined

Call to action With left icon With right icon

Markup 
<p>
    <a href="#" class="btn  mr1">Call to action</a>
    <a href="#" class="btn   mr1">
        <svg class="btn-picto btn-picto-left" height="14" width="14">
            <use xlink:href="#symbol-more"></use>
        </svg>
        With left icon
    </a>
    <a href="#" class="btn   mr1">
        With right icon
        <svg class="btn-picto btn-picto-right" height="14" width="14">
            <use xlink:href="#symbol-arrow-right"></use>
        </svg>
    </a>
</p>
<p class="mt2">
    <button class="btn   mr1" type="submit">Submit</button>
    <button class="btn   mr1" disabled type="submit">Submit (disabled)</button>
</p>
{%- set classes = classes|default([]) -%}
{%- if modifier_class %}{% set classes = classes|merge([modifier_class]) %}{% endif -%}
<p>
    <a href="#" class="btn {{ ' ' ~ classes|join(' ') }} mr1">Call to action</a>
    <a href="#" class="btn {{ ' ' ~ classes|join(' ') }} mr1">
        <svg class="btn-picto btn-picto-left" height="14" width="14"><use xlink:href="#symbol-more"></use></svg>
        With left icon
    </a>
    <a href="#" class="btn {{ ' ' ~ classes|join(' ') }} mr1">
        With right icon
        <svg class="btn-picto btn-picto-right" height="14" width="14"><use xlink:href="#symbol-arrow-right"></use></svg>
    </a>
</p>
<p class="mt2">
    <button class="btn {{ ' ' ~ classes|join(' ') }} mr1" type="submit">Submit</button>
    <button class="btn {{ ' ' ~ classes|join(' ') }} mr1" disabled type="submit">Submit (disabled)</button>
</p>

Source: src/styl/_elements/_btn.styl, line 1

2.5 Icon

Description

Button with icon and label.

It can be styled by btnSkin

Default styling

Newspaper

Modifiers

.icon-inline

inline version

Newspaper
Markup 
<span class="icon ">
    <svg class="icon-picto">
        <use xlink:href="#symbol-newspaper" />
    </svg>
    <span class="icon-label">
        Newspaper
    </span>
</span>
{%- set classes = classes|default([]) -%}
{%- if modifier_class %}{% set classes = classes|merge([modifier_class]) %}{% endif -%}
<span class="icon {{ ' ' ~ classes|join(' ') }}">
    <svg class="icon-picto"><use xlink:href="#symbol-newspaper"/></svg>
    <span class="icon-label">
        Newspaper
    </span>
</span>

Source: src/styl/_elements/_icon.styl, line 1

2.6 Link with icon

Description

Colette comes with a basic style for a link associated with an SVG (placed in front of it).

Example

Plus d’articles
Markup 
<a class="linkIcon " href="#">
    <svg height="11" width="11">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#symbol-more"></use>
    </svg>
    <span class="mask">Plus</span>
    <span class="linkIcon-label">d’articles</span>
</a>
<a class="linkIcon {{ modifier_class }}" href="#">
    <svg height="11" width="11">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#symbol-more"></use>
    </svg>
    <span class="mask">Plus</span>
    <span class="linkIcon-label">d’articles</span>
</a>

Source: src/styl/_elements/_linkIcon.styl, line 1

2.7 Loading

Description

Loading animation is inspired from Tobias Ahlin's Spinkit animations.

Example

Markup 
<div class="loading"></div>
<div class="loading loading-small"></div>
<div class="loading"></div>
<div class="loading loading-small"></div>

Source: src/styl/_elements/_loading.styl, line 1

2.8 Media

Description

A media is either an image or a video, displayed with caption and/or credit mention.

  • Video: videos are made responsive, on the basis of a 16/9 ratio
  • Empty media: if the media (image or video) is not available for any reason, the block display a default N/A image instead

Example

The media caption — by someone
The media caption — by someone
Markup 
    <figure class="media " role="group">
        <div class="media-wrap">
            <img class="" width="648" height="415" src="./img/648x415_article-preview.jpg" alt="The media caption — by someone" />
        </div>
        <figcaption class="media-caption">
            The media caption — <em>by someone</em> </figcaption>
    </figure>
{##
 # Base for media blocks
 #
 # @param array    media
 #                 -> src
 #                 -> caption
 #                 -> credit
 # @param string   defaultFormat  (optional) Images sizes format ( width x height )
 # @param array    mediaFormats   (optional) Images sizes formats ( width x height )
 # @param array    sizes          (optional) Images sizes attritute
 # @param array    classes        (optional) Additional classes
 # @param bool     displayCaption (optional) default false
 # @param bool     lazyloadImg    (optional) default false
 #
 # @block media                  (optional)
 # @block media_img              (optional)
 # @block media_caption          (optional)
 # @block block_classes          (optional)
 # @block block_attributes       (optional)
 # @block block_title_classes    (optional)
 # @block block_title_attributes (optional)
 #}
{%- set mediaFormats = mediaFormats is defined ? mediaFormats : [] -%}
{%- set sizes = sizes is defined ? sizes : [] -%}
{%- set classes = classes is defined ? classes : [] -%}
{%- set displayCaption = displayCaption == true -%}

{%- import '../../twig/macros/_img.twig' as _img -%}

{%- set alt = media.caption -%}
{%- if media.credit is not empty %}
    {% set alt = alt ~ ' — ' ~ media.credit  %}
{% endif -%}

{%- block media -%}
    <figure class="media{% block block_classes %} {{ classes|join(' ') }}{% endblock %}" role="group"{% block block_attributes '' %}>
        {% block media_figure %}
            <div class="media-wrap">
                {{ _img.img(
                    media.src,
                    defaultFormat,
                    mediaFormats,
                    alt,
                    lazyloadImg|default(false),
                    [],
                    '',
                    sizes
                ) }}
                {% block media_rank '' %}
            </div>
        {% endblock %}
        {% block media_caption -%}
            {% if displayCaption %}
                <figcaption class="media-caption">
                    {{ media.caption }}
                    {%- if media.credit is not empty %} — <em>{{ media.credit }}</em>{% endif %}
                </figcaption>
            {% endif %}
        {%- endblock %}
    </figure>
{%- endblock -%}

Source: src/styl/_elements/_media.styl, line 1

2.8.1 Media Empty

Description

If the media (image or video) is not available for any reason, the block display a default N/A image instead

Example

Missing image — by someone
Missing image — by someone
Markup 
    <figure class="media " role="group">
        <div class="media-wrap">
            <img class="" width="648" height="415" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='648'%20height='415'%3E%3C/svg%3E" alt="Missing image — by someone" />
        </div>
        <figcaption class="media-caption">
            Missing image — <em>by someone</em> </figcaption>
    </figure>
{% extends 'media.twig' %}

Source: src/styl/_elements/_media.styl, line 23

2.8.2 Media Video

Description

Videos are made responsive, on the basis of a 16/9 ratio

Default styling

Modifiers

.media-wrap-video-1_1

1/1 video ratio

.media-wrap-video-4_3

4/3 video ratio

.media-wrap-video-5_3

5/3 video ratio

Markup 
<figure class="media " role="group">
    <div class="media-wrap media-wrap-video "><iframe width="640" height="360" src="https://www.youtube.com/embed/9NC3S2eRXdo" frameborder="0" allowfullscreen></iframe></div>
</figure>
{##
 # Display media with video
 #
 # @param string   media
 #                 -> html
 # @param array    classes        Additional classes
 #}
{% extends 'media.twig' %}

{% block media_figure %}
    <div class="media-wrap media-wrap-video {{ modifier_class }}">{{ media.html|raw }}</div>
{% endblock %}

Source: src/styl/_elements/_media.styl, line 11

2.9 Pagers

Description

Colette comes with basic styles for paginations.

The default Pager is showing no list. It's a counter that's giving you the number of the page you're on, versus the total number of pages.

Example

Markup 
<div class="pager " role="navigation" aria-label="Pagination">
    <button class="pager-prev" disabled="disabled">
        <svg height="13" width="13">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#symbol-arrow-left"></use>
        </svg>
        <span class="mask">Previous</span>
    </button>
    <span class="pager-count">
        <span class="pager-current">1</span> on <span class="pager-max">5</span>
    </span>
    <button class="pager-next">
        <svg height="13" width="13">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#symbol-arrow-right"></use>
        </svg>
        <span class="mask">Next</span>
    </button>
</div>
{%- set classes = classes|default([]) -%}
{%- if modifier_class -%}{% set classes = classes|merge([modifier_class]) %}{% endif -%}
{%- set firstPage = 1 -%}
{%- set lastPage = (nbItems / nbItemsPerPage)|round(0, 'ceil') -%}
<div class="{% block classes %}pager{{ ' ' ~ classes|join(' ') }}{% endblock %}" role="navigation" aria-label="Pagination">
    {% block prev %}
        {% if js %}
            <button class="pager-prev" {{ (currentPage <= firstPage) ? ' disabled="disabled"'|raw }}>
                <svg height="13" width="13"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#symbol-arrow-left"></use></svg>
                <span class="mask">Previous</span>
            </button>
        {% elseif (currentPage <= firstPage) %}
            <span class="pager-prev" aria-hidden="true">
                <svg height="13" width="13"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#symbol-arrow-left"></use></svg>
            </span>
        {% else %}
            <a href="#" class="pager-prev">
                <svg height="13" width="13"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#symbol-arrow-left"></use></svg>
                <span class="mask">Previous page</span>
            </a>
        {% endif %}
    {% endblock %}
    {% block count %}
        <span class="pager-count">
            <span class="pager-current">{{ currentPage }}</span> on <span class="pager-max">{{ lastPage }}</span>
        </span>
    {% endblock %}
    {% block next %}
        {% if js %}
            <button class="pager-next" {{ (currentPage >= lastPage) ? ' disabled="disabled"'|raw }}>
                <svg height="13" width="13"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#symbol-arrow-right"></use></svg>
                <span class="mask">Next</span>
            </button>
        {% elseif (currentPage >= lastPage) %}
            <span class="pager-next" aria-hidden="true">
                <svg height="13" width="13"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#symbol-arrow-right"></use></svg>
            </span>
        {% else %}
            <a href="#" class="pager-next">
                <svg height="13" width="13"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#symbol-arrow-right"></use></svg>
                <span class="mask">Next page</span>
            </a>
        {% endif %}
    {% endblock %}
    {% block list '' %}
</div>

Source: src/styl/_elements/_pager.styl, line 1

2.9.1 Pager with a list

Description

This is the list version of the Pager.

Example

Markup 
<div class="pager  pager-withlist" role="navigation" aria-label="Pagination">
    <span class="pager-prev" aria-hidden="true">
        <svg height="13" width="13">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#symbol-arrow-left"></use>
        </svg>
    </span>
    <a href="#" class="pager-next">
        <svg height="13" width="13">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#symbol-arrow-right"></use>
        </svg>
        <span class="mask">Next page</span>
    </a>
    <ul class="pager-list">
        <li><strong><span class="mask">Current page: </span>1</strong></li>
        <li><a href="#"><span class="mask">Page </span>2</a></li>
        <li><a href="#"><span class="mask">Page </span>3</a></li>
        <li><a href="#"><span class="mask">Page </span>4</a></li>
        <li><a href="#"><span class="mask">Page </span>5</a></li>
    </ul>
</div>
{% extends 'pager.twig' %}

{% block classes parent() ~ ' pager-withlist' %}

{% block count '' %}

{% block list %}
    <ul class="pager-list">
        {%- for i in firstPage..lastPage -%}
            <li>
                {%- if i == currentPage -%}
                    <strong><span class="mask">Current page: </span>{{ i }}</strong>
                {%- else -%}
                    <a href="#"><span class="mask">Page </span>{{ i }}</a>
                {%- endif -%}
            </li>
        {%- endfor -%}
    </ul>
{% endblock %}

Source: src/styl/_elements/_pager.styl, line 11

2.10 Switch

Description

Switch to improve UI of a natural checkbox.

It’s possible to use a button with role="switch" (WAI-aria switch role).

In this case it need some javascript to change aria-checked attribute to true or false to switch it.

It can be modified by .color-* helpers but constrast with white text must be correct.

Default styling

Checkbox version:

Button version:

Modifiers

.color-default

theme default

Checkbox version:

Button version:

Markup 
<p>Checkbox version:</p>
<label for="checkbox-switch-default">
    <input id="checkbox-switch-default" type="checkbox" class="mask" />
    <span class="switch " aria-hidden="true">
        <span class="switch-wrap">
            <span class="switch-on">Yes</span>
            <svg class="switch-thumb" height="11" width="11">
                <use xlink:href="#symbol-tick"></use>
            </svg>
            <span class="switch-off">No</span>
        </span>
    </span>
    checkbox label
</label>

<p>Button version:</p>
<button role="switch" aria-checked="false" class="switch ">
    <span class="switch-wrap">
        <span class="switch-on">Yes</span>
        <svg class="switch-thumb" height="11" width="11">
            <use xlink:href="#symbol-tick"></use>
        </svg>
        <span class="switch-off">No</span>
    </span>
</button>
{% set id = 'checkbox-switch-' ~ modifier_class|default('default')|replace({' ': '_'}) %}
<p>Checkbox version:</p>
<label for="{{ id }}">
    <input id="{{ id }}" type="checkbox" class="mask" />
    <span class="switch {{ modifier_class }}" aria-hidden="true">
        <span class="switch-wrap">
            <span class="switch-on">Yes</span>
            <svg class="switch-thumb" height="11" width="11"><use xlink:href="#symbol-tick"></use></svg>
            <span class="switch-off">No</span>
        </span>
    </span>
    checkbox label
</label>

<p>Button version:</p>
<button role="switch" aria-checked="false" class="switch {{ modifier_class }}">
    <span class="switch-wrap">
        <span class="switch-on">Yes</span>
        <svg class="switch-thumb" height="11" width="11"><use xlink:href="#symbol-tick"></use></svg>
        <span class="switch-off">No</span>
    </span>
</button>

Source: src/styl/_elements/_switch.styl, line 1

2.11 Teaser

Description

Displayed in listings, a teaser is a content summary that contains:

  • a label
  • a title
  • a summary text

Example

News

The title of the article

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Markup 
<div class="teaser">
    <div class="teaser-headline color-default">News</div>
    <h2 class="teaser-title">The title of the article</h2>

    <p class="teaser-summary">Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

</div>
{##
 # Display teaser of content full page view
 #
 # @param string label         [required]
 # @param string summary       [optional]
 # @param string theme         [required] Color of the label
 # @param string title         [required]
 # @param string titleTag      [optional] default 'h2'
 #
 # @param array magazine       [optional] Magazine content info
 #              -> [catchline]   string (required)
 #              -> [type]        string (required)
 #}
 {% if magazine is defined and magazine is not empty %}
    {% set theme = magazine.type == 'production' ? 'production' : theme %}
{% endif %}

{% set titleTag = titleTag|default('h2') %}

<div class="teaser">
    <div class="teaser-headline color-{{ theme }}">{{ label }}</div>
    <{{ titleTag }} class="teaser-title">{{ title }}</{{ titleTag }}>

    {% if summary is defined %}
        <p class="teaser-summary">{{ summary }}</p>
    {% endif %}

    {% if magazine is defined and magazine is not empty %}
        <p class="teaser-catchline teaser-catchline-{{ magazine.type }}">{{ magazine.catchline }}</p>
    {% endif %}
</div>

Source: src/styl/_elements/_teaser.styl, line 1

2.12 Icon Buttons

Description

Icon buttons are icons in a colored circle.

Example

Call to action
Markup 
<a href="#" class="btnIcon  mr1">
    <svg height="16" width="16">
        <use xlink:href="#symbol-mail"></use>
    </svg>
    <span class="mask">Call to action</span>
</a>
<button class="btnIcon   mr1" type="button">
    <svg height="16" width="16">
        <use xlink:href="#symbol-mail"></use>
    </svg>
    <span class="mask">Button</span>
</button>
<button class="btnIcon  " disabled type="button">
    <svg height="16" width="16">
        <use xlink:href="#symbol-mail"></use>
    </svg>
    <span class="mask">Button (disabled)</span>
</button>
{%- set classes = classes|default([]) -%}
{%- if modifier_class %}{% set classes = classes|merge([modifier_class]) %}{% endif -%}
<a href="#" class="btnIcon {{ ' ' ~ classes|join(' ') }} mr1">
    <svg height="16" width="16"><use xlink:href="#symbol-mail"></use></svg>
    <span class="mask">Call to action</span>
</a>
<button class="btnIcon {{ ' ' ~ classes|join(' ') }} mr1" type="button">
    <svg height="16" width="16"><use xlink:href="#symbol-mail"></use></svg>
    <span class="mask">Button</span>
</button>
<button class="btnIcon {{ ' ' ~ classes|join(' ') }}" disabled type="button">
    <svg height="16" width="16"><use xlink:href="#symbol-mail"></use></svg>
    <span class="mask">Button (disabled)</span>
</button>

Source: src/styl/_elements/_btnIcon.styl, line 1