5 Helpers

Small classe to manage details in the page.

5.1 Text alignment

Description

Text alignement classes.

Default styling

Example of text. In hac habitasse platea dictumst. Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui. Nullam sagittis. Morbi nec metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Modifiers

.align-right

right-aligned text

Example of align-right text. In hac habitasse platea dictumst. Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui. Nullam sagittis. Morbi nec metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

.align-left

left-aligned text

Example of align-left text. In hac habitasse platea dictumst. Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui. Nullam sagittis. Morbi nec metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

.align-center

centered text

Example of align-center text. In hac habitasse platea dictumst. Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui. Nullam sagittis. Morbi nec metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

.align-justify

justified text

Example of align-justify text. In hac habitasse platea dictumst. Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui. Nullam sagittis. Morbi nec metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

Markup

Compiled HTML
Template

<p class="">Example of text. In hac habitasse platea dictumst. Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui. Nullam sagittis. Morbi nec metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

<p class="{{ modifier_class }}">Example of {{ modifier_class }} text. In hac habitasse platea dictumst. Sed augue ipsum, egestas nec, vestibulum et, malesuada adipiscing, dui. Nullam sagittis. Morbi nec metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>

Source: src/styl/_helpers/_align.styl, line 2

5.2 Borders

Description

A set of light gray solid and dotted borders.

.btd: border top dotted
.brd: border right dotted
.bbd: border bottom dotted
.bld: border left dotted
.bts: border top solid
.brs: border right solid
.bbs: border bottom solid
.bls: border left solid

Example

Example of top and bottom solid border class.

Example of top and bottom dotted border class.

Markup

Compiled HTML
Template

<p class="bts bbs pa1">Example of top and bottom solid border class.</p>
<p class="btd bbd pa1">Example of top and bottom dotted border class.</p>

<p class="bts bbs pa1">Example of top and bottom solid border class.</p>
<p class="btd bbd pa1">Example of top and bottom dotted border class.</p>

Source: src/styl/_helpers/_borders.styl, line 1

5.3 Helpers.Colors

5.3.1 Background colors

Description

Generic styles for background colors.

Example

Couleur par défaut .bg-base
Actualité générales .bg-default
Sport .bg-sport
Entertainment .bg-entertainment
Economie .bg-economy
Communauté .bg-community
T’as vu .bg-weird
Partenaire .bg-partner
Planète .bg-planet
Video et images .bg-media
High-tech .bg-hightech
Native .bg-native
Native premier-plan .bg-native-foreground

Markup

Compiled HTML
Template

<ul style="display: flex; flex-wrap: wrap; align-items: stretch; justify-content: flex-start; padding: 0; margin: 0 0 2rem; list-style: none;">
    <li style="width: 14rem; overflow: hidden; font-size: 14px; padding: .3rem; margin: .5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 0 0 0.0625rem var(--co-box-edge-color), 0 0.0625rem 0.25rem 0.0625rem rgba(0,0,0,0.06)">
        <div class="bg-base" style="height: 3em; border-radius: 0.5em;"></div>
        <p style="flex: 1; display: block; padding: 0.2em; border-radius: 0.25em; text-align: center; color: var(--co-color-min); background-color: var(--co-color-bg-base);">
            <strong style="display: block;">Couleur par défaut</strong>
            <code>.bg-base</code>
        </p>
    </li>
    <li style="width: 14rem; overflow: hidden; font-size: 14px; padding: .3rem; margin: .5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 0 0 0.0625rem var(--co-box-edge-color), 0 0.0625rem 0.25rem 0.0625rem rgba(0,0,0,0.06)">
        <div class="bg-default" style="height: 3em; border-radius: 0.5em;"></div>
        <p style="flex: 1; display: block; padding: 0.2em; border-radius: 0.25em; text-align: center; color: var(--co-color-min); background-color: var(--co-color-bg-base);">
            <strong style="display: block;">Actualité générales</strong>
            <code>.bg-default</code>
        </p>
    </li>
    <li style="width: 14rem; overflow: hidden; font-size: 14px; padding: .3rem; margin: .5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 0 0 0.0625rem var(--co-box-edge-color), 0 0.0625rem 0.25rem 0.0625rem rgba(0,0,0,0.06)">
        <div class="bg-sport" style="height: 3em; border-radius: 0.5em;"></div>
        <p style="flex: 1; display: block; padding: 0.2em; border-radius: 0.25em; text-align: center; color: var(--co-color-min); background-color: var(--co-color-bg-base);">
            <strong style="display: block;">Sport</strong>
            <code>.bg-sport</code>
        </p>
    </li>
    <li style="width: 14rem; overflow: hidden; font-size: 14px; padding: .3rem; margin: .5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 0 0 0.0625rem var(--co-box-edge-color), 0 0.0625rem 0.25rem 0.0625rem rgba(0,0,0,0.06)">
        <div class="bg-entertainment" style="height: 3em; border-radius: 0.5em;"></div>
        <p style="flex: 1; display: block; padding: 0.2em; border-radius: 0.25em; text-align: center; color: var(--co-color-min); background-color: var(--co-color-bg-base);">
            <strong style="display: block;">Entertainment</strong>
            <code>.bg-entertainment</code>
        </p>
    </li>
    <li style="width: 14rem; overflow: hidden; font-size: 14px; padding: .3rem; margin: .5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 0 0 0.0625rem var(--co-box-edge-color), 0 0.0625rem 0.25rem 0.0625rem rgba(0,0,0,0.06)">
        <div class="bg-economy" style="height: 3em; border-radius: 0.5em;"></div>
        <p style="flex: 1; display: block; padding: 0.2em; border-radius: 0.25em; text-align: center; color: var(--co-color-min); background-color: var(--co-color-bg-base);">
            <strong style="display: block;">Economie</strong>
            <code>.bg-economy</code>
        </p>
    </li>
    <li style="width: 14rem; overflow: hidden; font-size: 14px; padding: .3rem; margin: .5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 0 0 0.0625rem var(--co-box-edge-color), 0 0.0625rem 0.25rem 0.0625rem rgba(0,0,0,0.06)">
        <div class="bg-community" style="height: 3em; border-radius: 0.5em;"></div>
        <p style="flex: 1; display: block; padding: 0.2em; border-radius: 0.25em; text-align: center; color: var(--co-color-min); background-color: var(--co-color-bg-base);">
            <strong style="display: block;">Communauté</strong>
            <code>.bg-community</code>
        </p>
    </li>
    <li style="width: 14rem; overflow: hidden; font-size: 14px; padding: .3rem; margin: .5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 0 0 0.0625rem var(--co-box-edge-color), 0 0.0625rem 0.25rem 0.0625rem rgba(0,0,0,0.06)">
        <div class="bg-weird" style="height: 3em; border-radius: 0.5em;"></div>
        <p style="flex: 1; display: block; padding: 0.2em; border-radius: 0.25em; text-align: center; color: var(--co-color-min); background-color: var(--co-color-bg-base);">
            <strong style="display: block;">T’as vu</strong>
            <code>.bg-weird</code>
        </p>
    </li>
    <li style="width: 14rem; overflow: hidden; font-size: 14px; padding: .3rem; margin: .5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 0 0 0.0625rem var(--co-box-edge-color), 0 0.0625rem 0.25rem 0.0625rem rgba(0,0,0,0.06)">
        <div class="bg-partner" style="height: 3em; border-radius: 0.5em;"></div>
        <p style="flex: 1; display: block; padding: 0.2em; border-radius: 0.25em; text-align: center; color: var(--co-color-min); background-color: var(--co-color-bg-base);">
            <strong style="display: block;">Partenaire</strong>
            <code>.bg-partner</code>
        </p>
    </li>
    <li style="width: 14rem; overflow: hidden; font-size: 14px; padding: .3rem; margin: .5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 0 0 0.0625rem var(--co-box-edge-color), 0 0.0625rem 0.25rem 0.0625rem rgba(0,0,0,0.06)">
        <div class="bg-planet" style="height: 3em; border-radius: 0.5em;"></div>
        <p style="flex: 1; display: block; padding: 0.2em; border-radius: 0.25em; text-align: center; color: var(--co-color-min); background-color: var(--co-color-bg-base);">
            <strong style="display: block;">Planète</strong>
            <code>.bg-planet</code>
        </p>
    </li>
    <li style="width: 14rem; overflow: hidden; font-size: 14px; padding: .3rem; margin: .5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 0 0 0.0625rem var(--co-box-edge-color), 0 0.0625rem 0.25rem 0.0625rem rgba(0,0,0,0.06)">
        <div class="bg-media" style="height: 3em; border-radius: 0.5em;"></div>
        <p style="flex: 1; display: block; padding: 0.2em; border-radius: 0.25em; text-align: center; color: var(--co-color-min); background-color: var(--co-color-bg-base);">
            <strong style="display: block;">Video et images</strong>
            <code>.bg-media</code>
        </p>
    </li>
    <li style="width: 14rem; overflow: hidden; font-size: 14px; padding: .3rem; margin: .5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 0 0 0.0625rem var(--co-box-edge-color), 0 0.0625rem 0.25rem 0.0625rem rgba(0,0,0,0.06)">
        <div class="bg-hightech" style="height: 3em; border-radius: 0.5em;"></div>
        <p style="flex: 1; display: block; padding: 0.2em; border-radius: 0.25em; text-align: center; color: var(--co-color-min); background-color: var(--co-color-bg-base);">
            <strong style="display: block;">High-tech</strong>
            <code>.bg-hightech</code>
        </p>
    </li>
    <li style="width: 14rem; overflow: hidden; font-size: 14px; padding: .3rem; margin: .5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 0 0 0.0625rem var(--co-box-edge-color), 0 0.0625rem 0.25rem 0.0625rem rgba(0,0,0,0.06)">
        <div class="bg-native" style="height: 3em; border-radius: 0.5em;"></div>
        <p style="flex: 1; display: block; padding: 0.2em; border-radius: 0.25em; text-align: center; color: var(--co-color-min); background-color: var(--co-color-bg-base);">
            <strong style="display: block;">Native</strong>
            <code>.bg-native</code>
        </p>
    </li>
    <li style="width: 14rem; overflow: hidden; font-size: 14px; padding: .3rem; margin: .5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 0 0 0.0625rem var(--co-box-edge-color), 0 0.0625rem 0.25rem 0.0625rem rgba(0,0,0,0.06)">
        <div class="bg-native-foreground" style="height: 3em; border-radius: 0.5em;"></div>
        <p style="flex: 1; display: block; padding: 0.2em; border-radius: 0.25em; text-align: center; color: var(--co-color-min); background-color: var(--co-color-bg-base);">
            <strong style="display: block;">Native premier-plan</strong>
            <code>.bg-native-foreground</code>
        </p>
    </li>
</ul>

<ul style="display: flex; flex-wrap: wrap; align-items: stretch; justify-content: flex-start; padding: 0; margin: 0 0 2rem; list-style: none;">
    {% for key, name in colors %}
        <li style="width: 14rem; overflow: hidden; font-size: 14px; padding: .3rem; margin: .5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 0 0 0.0625rem var(--co-box-edge-color), 0 0.0625rem 0.25rem 0.0625rem rgba(0,0,0,0.06)">
            <div class="bg-{{ key }}" style="height: 3em; border-radius: 0.5em;"></div>
            <p style="flex: 1; display: block; padding: 0.2em; border-radius: 0.25em; text-align: center; color: var(--co-color-min); background-color: var(--co-color-bg-base);">
                <strong style="display: block;">{{ name }}</strong>
                <code>.bg-{{ key }}</code>
            </p>
        </li>
    {% endfor %}
</ul>

Source: src/styl/_helpers/_colorsBg.styl, line 1

5.3.2 Border colors

Description

Generic styles for border colors.

Example

Couleur par défaut .border-color-base
Actualité générales .border-color-default
Sport .border-color-sport
Entertainment .border-color-entertainment
Economie .border-color-economy
Communauté .border-color-community
T’as vu .border-color-weird
Partenaire .border-color-partner
Planète .border-color-planet
Video et images .border-color-media
High-tech .border-color-hightech
Native .border-color-native
Native premier-plan .border-color-native-foreground

Markup

Compiled HTML
Template

<ul style="display: flex; flex-wrap: wrap; align-items: stretch; justify-content: flex-start; padding: 0; margin: 0 0 2rem; list-style: none;">
    <li style="width: 14rem; overflow: hidden; font-size: 14px; padding: .3rem; margin: .5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 0 0 0.0625rem var(--co-box-edge-color), 0 0.0625rem 0.25rem 0.0625rem rgba(0,0,0,0.06)">
        <div class="border-color-base" style="height: 3em; border-radius: 0.5em; border-width: 2px; border-style: solid;"></div>
        <p style="flex: 1; display: block; padding: 0.2em; border-radius: 0.25em; text-align: center; color: var(--co-color-min); background-color: var(--co-color-bg-base);">
            <strong style="display: block;">Couleur par défaut</strong>
            <code>.border-color-base</code>
        </p>
    </li>
    <li style="width: 14rem; overflow: hidden; font-size: 14px; padding: .3rem; margin: .5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 0 0 0.0625rem var(--co-box-edge-color), 0 0.0625rem 0.25rem 0.0625rem rgba(0,0,0,0.06)">
        <div class="border-color-default" style="height: 3em; border-radius: 0.5em; border-width: 2px; border-style: solid;"></div>
        <p style="flex: 1; display: block; padding: 0.2em; border-radius: 0.25em; text-align: center; color: var(--co-color-min); background-color: var(--co-color-bg-base);">
            <strong style="display: block;">Actualité générales</strong>
            <code>.border-color-default</code>
        </p>
    </li>
    <li style="width: 14rem; overflow: hidden; font-size: 14px; padding: .3rem; margin: .5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 0 0 0.0625rem var(--co-box-edge-color), 0 0.0625rem 0.25rem 0.0625rem rgba(0,0,0,0.06)">
        <div class="border-color-sport" style="height: 3em; border-radius: 0.5em; border-width: 2px; border-style: solid;"></div>
        <p style="flex: 1; display: block; padding: 0.2em; border-radius: 0.25em; text-align: center; color: var(--co-color-min); background-color: var(--co-color-bg-base);">
            <strong style="display: block;">Sport</strong>
            <code>.border-color-sport</code>
        </p>
    </li>
    <li style="width: 14rem; overflow: hidden; font-size: 14px; padding: .3rem; margin: .5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 0 0 0.0625rem var(--co-box-edge-color), 0 0.0625rem 0.25rem 0.0625rem rgba(0,0,0,0.06)">
        <div class="border-color-entertainment" style="height: 3em; border-radius: 0.5em; border-width: 2px; border-style: solid;"></div>
        <p style="flex: 1; display: block; padding: 0.2em; border-radius: 0.25em; text-align: center; color: var(--co-color-min); background-color: var(--co-color-bg-base);">
            <strong style="display: block;">Entertainment</strong>
            <code>.border-color-entertainment</code>
        </p>
    </li>
    <li style="width: 14rem; overflow: hidden; font-size: 14px; padding: .3rem; margin: .5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 0 0 0.0625rem var(--co-box-edge-color), 0 0.0625rem 0.25rem 0.0625rem rgba(0,0,0,0.06)">
        <div class="border-color-economy" style="height: 3em; border-radius: 0.5em; border-width: 2px; border-style: solid;"></div>
        <p style="flex: 1; display: block; padding: 0.2em; border-radius: 0.25em; text-align: center; color: var(--co-color-min); background-color: var(--co-color-bg-base);">
            <strong style="display: block;">Economie</strong>
            <code>.border-color-economy</code>
        </p>
    </li>
    <li style="width: 14rem; overflow: hidden; font-size: 14px; padding: .3rem; margin: .5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 0 0 0.0625rem var(--co-box-edge-color), 0 0.0625rem 0.25rem 0.0625rem rgba(0,0,0,0.06)">
        <div class="border-color-community" style="height: 3em; border-radius: 0.5em; border-width: 2px; border-style: solid;"></div>
        <p style="flex: 1; display: block; padding: 0.2em; border-radius: 0.25em; text-align: center; color: var(--co-color-min); background-color: var(--co-color-bg-base);">
            <strong style="display: block;">Communauté</strong>
            <code>.border-color-community</code>
        </p>
    </li>
    <li style="width: 14rem; overflow: hidden; font-size: 14px; padding: .3rem; margin: .5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 0 0 0.0625rem var(--co-box-edge-color), 0 0.0625rem 0.25rem 0.0625rem rgba(0,0,0,0.06)">
        <div class="border-color-weird" style="height: 3em; border-radius: 0.5em; border-width: 2px; border-style: solid;"></div>
        <p style="flex: 1; display: block; padding: 0.2em; border-radius: 0.25em; text-align: center; color: var(--co-color-min); background-color: var(--co-color-bg-base);">
            <strong style="display: block;">T’as vu</strong>
            <code>.border-color-weird</code>
        </p>
    </li>
    <li style="width: 14rem; overflow: hidden; font-size: 14px; padding: .3rem; margin: .5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 0 0 0.0625rem var(--co-box-edge-color), 0 0.0625rem 0.25rem 0.0625rem rgba(0,0,0,0.06)">
        <div class="border-color-partner" style="height: 3em; border-radius: 0.5em; border-width: 2px; border-style: solid;"></div>
        <p style="flex: 1; display: block; padding: 0.2em; border-radius: 0.25em; text-align: center; color: var(--co-color-min); background-color: var(--co-color-bg-base);">
            <strong style="display: block;">Partenaire</strong>
            <code>.border-color-partner</code>
        </p>
    </li>
    <li style="width: 14rem; overflow: hidden; font-size: 14px; padding: .3rem; margin: .5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 0 0 0.0625rem var(--co-box-edge-color), 0 0.0625rem 0.25rem 0.0625rem rgba(0,0,0,0.06)">
        <div class="border-color-planet" style="height: 3em; border-radius: 0.5em; border-width: 2px; border-style: solid;"></div>
        <p style="flex: 1; display: block; padding: 0.2em; border-radius: 0.25em; text-align: center; color: var(--co-color-min); background-color: var(--co-color-bg-base);">
            <strong style="display: block;">Planète</strong>
            <code>.border-color-planet</code>
        </p>
    </li>
    <li style="width: 14rem; overflow: hidden; font-size: 14px; padding: .3rem; margin: .5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 0 0 0.0625rem var(--co-box-edge-color), 0 0.0625rem 0.25rem 0.0625rem rgba(0,0,0,0.06)">
        <div class="border-color-media" style="height: 3em; border-radius: 0.5em; border-width: 2px; border-style: solid;"></div>
        <p style="flex: 1; display: block; padding: 0.2em; border-radius: 0.25em; text-align: center; color: var(--co-color-min); background-color: var(--co-color-bg-base);">
            <strong style="display: block;">Video et images</strong>
            <code>.border-color-media</code>
        </p>
    </li>
    <li style="width: 14rem; overflow: hidden; font-size: 14px; padding: .3rem; margin: .5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 0 0 0.0625rem var(--co-box-edge-color), 0 0.0625rem 0.25rem 0.0625rem rgba(0,0,0,0.06)">
        <div class="border-color-hightech" style="height: 3em; border-radius: 0.5em; border-width: 2px; border-style: solid;"></div>
        <p style="flex: 1; display: block; padding: 0.2em; border-radius: 0.25em; text-align: center; color: var(--co-color-min); background-color: var(--co-color-bg-base);">
            <strong style="display: block;">High-tech</strong>
            <code>.border-color-hightech</code>
        </p>
    </li>
    <li style="width: 14rem; overflow: hidden; font-size: 14px; padding: .3rem; margin: .5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 0 0 0.0625rem var(--co-box-edge-color), 0 0.0625rem 0.25rem 0.0625rem rgba(0,0,0,0.06)">
        <div class="border-color-native" style="height: 3em; border-radius: 0.5em; border-width: 2px; border-style: solid;"></div>
        <p style="flex: 1; display: block; padding: 0.2em; border-radius: 0.25em; text-align: center; color: var(--co-color-min); background-color: var(--co-color-bg-base);">
            <strong style="display: block;">Native</strong>
            <code>.border-color-native</code>
        </p>
    </li>
    <li style="width: 14rem; overflow: hidden; font-size: 14px; padding: .3rem; margin: .5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 0 0 0.0625rem var(--co-box-edge-color), 0 0.0625rem 0.25rem 0.0625rem rgba(0,0,0,0.06)">
        <div class="border-color-native-foreground" style="height: 3em; border-radius: 0.5em; border-width: 2px; border-style: solid;"></div>
        <p style="flex: 1; display: block; padding: 0.2em; border-radius: 0.25em; text-align: center; color: var(--co-color-min); background-color: var(--co-color-bg-base);">
            <strong style="display: block;">Native premier-plan</strong>
            <code>.border-color-native-foreground</code>
        </p>
    </li>
</ul>

<ul style="display: flex; flex-wrap: wrap; align-items: stretch; justify-content: flex-start; padding: 0; margin: 0 0 2rem; list-style: none;">
    {% for key, name in colors %}
        <li style="width: 14rem; overflow: hidden; font-size: 14px; padding: .3rem; margin: .5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 0 0 0.0625rem var(--co-box-edge-color), 0 0.0625rem 0.25rem 0.0625rem rgba(0,0,0,0.06)">
            <div class="border-color-{{ key }}" style="height: 3em; border-radius: 0.5em; border-width: 2px; border-style: solid;"></div>
            <p style="flex: 1; display: block; padding: 0.2em; border-radius: 0.25em; text-align: center; color: var(--co-color-min); background-color: var(--co-color-bg-base);">
                <strong style="display: block;">{{ name }}</strong>
                <code>.border-color-{{ key }}</code>
            </p>
        </li>
    {% endfor %}
</ul>

Source: src/styl/_helpers/_colorsBorder.styl, line 1

5.3.3 Fill colors

Description

Generic styles for fill colors.

Example

Couleur par défaut .fill-base
Actualité générales .fill-default
Sport .fill-sport
Entertainment .fill-entertainment
Economie .fill-economy
Communauté .fill-community
T’as vu .fill-weird
Partenaire .fill-partner
Planète .fill-planet
Video et images .fill-media
High-tech .fill-hightech
Native .fill-native
Native premier-plan .fill-native-foreground

Markup

Compiled HTML
Template

<ul style="display: flex; flex-wrap: wrap; align-items: stretch; justify-content: flex-start; padding: 0; margin: 0; list-style: none;">
    <li style="width: 14rem; overflow: hidden; font-size: 14px; padding: .3rem; margin: .5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 0 0 0.0625rem var(--co-box-edge-color), 0 0.0625rem 0.25rem 0.0625rem rgba(0,0,0,0.06)">
        <svg class="fill-base" height="35" width="35" aria-hidden="true" focusable="false">
            <use class="view" xlink:href="#symbol-view"></use>
        </svg>
        <p style="flex: 1; display: block; padding: 0.2em; border-radius: 0.25em; text-align: center; color: var(--co-color-min); background-color: var(--co-color-bg-base);">
            <strong style="display: block;">Couleur par défaut</strong>
            <code>.fill-base</code>
        </p>
    </li>
    <li style="width: 14rem; overflow: hidden; font-size: 14px; padding: .3rem; margin: .5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 0 0 0.0625rem var(--co-box-edge-color), 0 0.0625rem 0.25rem 0.0625rem rgba(0,0,0,0.06)">
        <svg class="fill-default" height="35" width="35" aria-hidden="true" focusable="false">
            <use class="view" xlink:href="#symbol-view"></use>
        </svg>
        <p style="flex: 1; display: block; padding: 0.2em; border-radius: 0.25em; text-align: center; color: var(--co-color-min); background-color: var(--co-color-bg-base);">
            <strong style="display: block;">Actualité générales</strong>
            <code>.fill-default</code>
        </p>
    </li>
    <li style="width: 14rem; overflow: hidden; font-size: 14px; padding: .3rem; margin: .5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 0 0 0.0625rem var(--co-box-edge-color), 0 0.0625rem 0.25rem 0.0625rem rgba(0,0,0,0.06)">
        <svg class="fill-sport" height="35" width="35" aria-hidden="true" focusable="false">
            <use class="view" xlink:href="#symbol-view"></use>
        </svg>
        <p style="flex: 1; display: block; padding: 0.2em; border-radius: 0.25em; text-align: center; color: var(--co-color-min); background-color: var(--co-color-bg-base);">
            <strong style="display: block;">Sport</strong>
            <code>.fill-sport</code>
        </p>
    </li>
    <li style="width: 14rem; overflow: hidden; font-size: 14px; padding: .3rem; margin: .5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 0 0 0.0625rem var(--co-box-edge-color), 0 0.0625rem 0.25rem 0.0625rem rgba(0,0,0,0.06)">
        <svg class="fill-entertainment" height="35" width="35" aria-hidden="true" focusable="false">
            <use class="view" xlink:href="#symbol-view"></use>
        </svg>
        <p style="flex: 1; display: block; padding: 0.2em; border-radius: 0.25em; text-align: center; color: var(--co-color-min); background-color: var(--co-color-bg-base);">
            <strong style="display: block;">Entertainment</strong>
            <code>.fill-entertainment</code>
        </p>
    </li>
    <li style="width: 14rem; overflow: hidden; font-size: 14px; padding: .3rem; margin: .5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 0 0 0.0625rem var(--co-box-edge-color), 0 0.0625rem 0.25rem 0.0625rem rgba(0,0,0,0.06)">
        <svg class="fill-economy" height="35" width="35" aria-hidden="true" focusable="false">
            <use class="view" xlink:href="#symbol-view"></use>
        </svg>
        <p style="flex: 1; display: block; padding: 0.2em; border-radius: 0.25em; text-align: center; color: var(--co-color-min); background-color: var(--co-color-bg-base);">
            <strong style="display: block;">Economie</strong>
            <code>.fill-economy</code>
        </p>
    </li>
    <li style="width: 14rem; overflow: hidden; font-size: 14px; padding: .3rem; margin: .5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 0 0 0.0625rem var(--co-box-edge-color), 0 0.0625rem 0.25rem 0.0625rem rgba(0,0,0,0.06)">
        <svg class="fill-community" height="35" width="35" aria-hidden="true" focusable="false">
            <use class="view" xlink:href="#symbol-view"></use>
        </svg>
        <p style="flex: 1; display: block; padding: 0.2em; border-radius: 0.25em; text-align: center; color: var(--co-color-min); background-color: var(--co-color-bg-base);">
            <strong style="display: block;">Communauté</strong>
            <code>.fill-community</code>
        </p>
    </li>
    <li style="width: 14rem; overflow: hidden; font-size: 14px; padding: .3rem; margin: .5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 0 0 0.0625rem var(--co-box-edge-color), 0 0.0625rem 0.25rem 0.0625rem rgba(0,0,0,0.06)">
        <svg class="fill-weird" height="35" width="35" aria-hidden="true" focusable="false">
            <use class="view" xlink:href="#symbol-view"></use>
        </svg>
        <p style="flex: 1; display: block; padding: 0.2em; border-radius: 0.25em; text-align: center; color: var(--co-color-min); background-color: var(--co-color-bg-base);">
            <strong style="display: block;">T’as vu</strong>
            <code>.fill-weird</code>
        </p>
    </li>
    <li style="width: 14rem; overflow: hidden; font-size: 14px; padding: .3rem; margin: .5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 0 0 0.0625rem var(--co-box-edge-color), 0 0.0625rem 0.25rem 0.0625rem rgba(0,0,0,0.06)">
        <svg class="fill-partner" height="35" width="35" aria-hidden="true" focusable="false">
            <use class="view" xlink:href="#symbol-view"></use>
        </svg>
        <p style="flex: 1; display: block; padding: 0.2em; border-radius: 0.25em; text-align: center; color: var(--co-color-min); background-color: var(--co-color-bg-base);">
            <strong style="display: block;">Partenaire</strong>
            <code>.fill-partner</code>
        </p>
    </li>
    <li style="width: 14rem; overflow: hidden; font-size: 14px; padding: .3rem; margin: .5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 0 0 0.0625rem var(--co-box-edge-color), 0 0.0625rem 0.25rem 0.0625rem rgba(0,0,0,0.06)">
        <svg class="fill-planet" height="35" width="35" aria-hidden="true" focusable="false">
            <use class="view" xlink:href="#symbol-view"></use>
        </svg>
        <p style="flex: 1; display: block; padding: 0.2em; border-radius: 0.25em; text-align: center; color: var(--co-color-min); background-color: var(--co-color-bg-base);">
            <strong style="display: block;">Planète</strong>
            <code>.fill-planet</code>
        </p>
    </li>
    <li style="width: 14rem; overflow: hidden; font-size: 14px; padding: .3rem; margin: .5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 0 0 0.0625rem var(--co-box-edge-color), 0 0.0625rem 0.25rem 0.0625rem rgba(0,0,0,0.06)">
        <svg class="fill-media" height="35" width="35" aria-hidden="true" focusable="false">
            <use class="view" xlink:href="#symbol-view"></use>
        </svg>
        <p style="flex: 1; display: block; padding: 0.2em; border-radius: 0.25em; text-align: center; color: var(--co-color-min); background-color: var(--co-color-bg-base);">
            <strong style="display: block;">Video et images</strong>
            <code>.fill-media</code>
        </p>
    </li>
    <li style="width: 14rem; overflow: hidden; font-size: 14px; padding: .3rem; margin: .5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 0 0 0.0625rem var(--co-box-edge-color), 0 0.0625rem 0.25rem 0.0625rem rgba(0,0,0,0.06)">
        <svg class="fill-hightech" height="35" width="35" aria-hidden="true" focusable="false">
            <use class="view" xlink:href="#symbol-view"></use>
        </svg>
        <p style="flex: 1; display: block; padding: 0.2em; border-radius: 0.25em; text-align: center; color: var(--co-color-min); background-color: var(--co-color-bg-base);">
            <strong style="display: block;">High-tech</strong>
            <code>.fill-hightech</code>
        </p>
    </li>
    <li style="width: 14rem; overflow: hidden; font-size: 14px; padding: .3rem; margin: .5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 0 0 0.0625rem var(--co-box-edge-color), 0 0.0625rem 0.25rem 0.0625rem rgba(0,0,0,0.06)">
        <svg class="fill-native" height="35" width="35" aria-hidden="true" focusable="false">
            <use class="view" xlink:href="#symbol-view"></use>
        </svg>
        <p style="flex: 1; display: block; padding: 0.2em; border-radius: 0.25em; text-align: center; color: var(--co-color-min); background-color: var(--co-color-bg-base);">
            <strong style="display: block;">Native</strong>
            <code>.fill-native</code>
        </p>
    </li>
    <li style="width: 14rem; overflow: hidden; font-size: 14px; padding: .3rem; margin: .5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 0 0 0.0625rem var(--co-box-edge-color), 0 0.0625rem 0.25rem 0.0625rem rgba(0,0,0,0.06)">
        <svg class="fill-native-foreground" height="35" width="35" aria-hidden="true" focusable="false">
            <use class="view" xlink:href="#symbol-view"></use>
        </svg>
        <p style="flex: 1; display: block; padding: 0.2em; border-radius: 0.25em; text-align: center; color: var(--co-color-min); background-color: var(--co-color-bg-base);">
            <strong style="display: block;">Native premier-plan</strong>
            <code>.fill-native-foreground</code>
        </p>
    </li>
</ul>

<ul style="display: flex; flex-wrap: wrap; align-items: stretch; justify-content: flex-start; padding: 0; margin: 0; list-style: none;">
    {% for key, name in colors %}
        <li style="width: 14rem; overflow: hidden; font-size: 14px; padding: .3rem; margin: .5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 0 0 0.0625rem var(--co-box-edge-color), 0 0.0625rem 0.25rem 0.0625rem rgba(0,0,0,0.06)">
            <svg class="fill-{{ key }}" height="35" width="35" aria-hidden="true" focusable="false">
                <use class="view" xlink:href="#symbol-view"></use>
            </svg>
            <p style="flex: 1; display: block; padding: 0.2em; border-radius: 0.25em; text-align: center; color: var(--co-color-min); background-color: var(--co-color-bg-base);">
                <strong style="display: block;">{{ name }}</strong>
                <code>.fill-{{ key }}</code>
            </p>
        </li>
    {% endfor %}
</ul>

Source: src/styl/_helpers/_colorsFill.styl, line 1

5.3.4 Text colors

Description

Generic styles for text colors.

Example

Couleur par défaut

.color-base
Actualité générales

.color-default
Sport

.color-sport
Entertainment

.color-entertainment
Economie

.color-economy
Communauté

.color-community
T’as vu

.color-weird
Partenaire

.color-partner
Planète

.color-planet
Video et images

.color-media
High-tech

.color-hightech
Native

.color-native
Native premier-plan

.color-native-foreground

Markup

Compiled HTML
Template

<ul style="display: flex; flex-wrap: wrap; align-items: stretch; justify-content: flex-start; padding: 0; margin: 0 0 2rem; list-style: none;">
    <li style="width: 14rem; overflow: hidden; font-size: 14px; padding: .3rem; margin: .5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 0 0 0.0625rem var(--co-box-edge-color), 0 0.0625rem 0.25rem 0.0625rem rgba(0,0,0,0.06)">
        <div class="color-base">
            <strong style="display: block;">Couleur par défaut</strong>
        </div>
        <p style="flex: 1; display: block; padding: 0.2em; border-radius: 0.25em; text-align: center; color: var(--co-color-min); background-color: var(--co-color-bg-base);">
            <code>.color-base</code>
        </p>
    </li>
    <li style="width: 14rem; overflow: hidden; font-size: 14px; padding: .3rem; margin: .5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 0 0 0.0625rem var(--co-box-edge-color), 0 0.0625rem 0.25rem 0.0625rem rgba(0,0,0,0.06)">
        <div class="color-default">
            <strong style="display: block;">Actualité générales</strong>
        </div>
        <p style="flex: 1; display: block; padding: 0.2em; border-radius: 0.25em; text-align: center; color: var(--co-color-min); background-color: var(--co-color-bg-base);">
            <code>.color-default</code>
        </p>
    </li>
    <li style="width: 14rem; overflow: hidden; font-size: 14px; padding: .3rem; margin: .5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 0 0 0.0625rem var(--co-box-edge-color), 0 0.0625rem 0.25rem 0.0625rem rgba(0,0,0,0.06)">
        <div class="color-sport">
            <strong style="display: block;">Sport</strong>
        </div>
        <p style="flex: 1; display: block; padding: 0.2em; border-radius: 0.25em; text-align: center; color: var(--co-color-min); background-color: var(--co-color-bg-base);">
            <code>.color-sport</code>
        </p>
    </li>
    <li style="width: 14rem; overflow: hidden; font-size: 14px; padding: .3rem; margin: .5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 0 0 0.0625rem var(--co-box-edge-color), 0 0.0625rem 0.25rem 0.0625rem rgba(0,0,0,0.06)">
        <div class="color-entertainment">
            <strong style="display: block;">Entertainment</strong>
        </div>
        <p style="flex: 1; display: block; padding: 0.2em; border-radius: 0.25em; text-align: center; color: var(--co-color-min); background-color: var(--co-color-bg-base);">
            <code>.color-entertainment</code>
        </p>
    </li>
    <li style="width: 14rem; overflow: hidden; font-size: 14px; padding: .3rem; margin: .5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 0 0 0.0625rem var(--co-box-edge-color), 0 0.0625rem 0.25rem 0.0625rem rgba(0,0,0,0.06)">
        <div class="color-economy">
            <strong style="display: block;">Economie</strong>
        </div>
        <p style="flex: 1; display: block; padding: 0.2em; border-radius: 0.25em; text-align: center; color: var(--co-color-min); background-color: var(--co-color-bg-base);">
            <code>.color-economy</code>
        </p>
    </li>
    <li style="width: 14rem; overflow: hidden; font-size: 14px; padding: .3rem; margin: .5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 0 0 0.0625rem var(--co-box-edge-color), 0 0.0625rem 0.25rem 0.0625rem rgba(0,0,0,0.06)">
        <div class="color-community">
            <strong style="display: block;">Communauté</strong>
        </div>
        <p style="flex: 1; display: block; padding: 0.2em; border-radius: 0.25em; text-align: center; color: var(--co-color-min); background-color: var(--co-color-bg-base);">
            <code>.color-community</code>
        </p>
    </li>
    <li style="width: 14rem; overflow: hidden; font-size: 14px; padding: .3rem; margin: .5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 0 0 0.0625rem var(--co-box-edge-color), 0 0.0625rem 0.25rem 0.0625rem rgba(0,0,0,0.06)">
        <div class="color-weird">
            <strong style="display: block;">T’as vu</strong>
        </div>
        <p style="flex: 1; display: block; padding: 0.2em; border-radius: 0.25em; text-align: center; color: var(--co-color-min); background-color: var(--co-color-bg-base);">
            <code>.color-weird</code>
        </p>
    </li>
    <li style="width: 14rem; overflow: hidden; font-size: 14px; padding: .3rem; margin: .5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 0 0 0.0625rem var(--co-box-edge-color), 0 0.0625rem 0.25rem 0.0625rem rgba(0,0,0,0.06)">
        <div class="color-partner">
            <strong style="display: block;">Partenaire</strong>
        </div>
        <p style="flex: 1; display: block; padding: 0.2em; border-radius: 0.25em; text-align: center; color: var(--co-color-min); background-color: var(--co-color-bg-base);">
            <code>.color-partner</code>
        </p>
    </li>
    <li style="width: 14rem; overflow: hidden; font-size: 14px; padding: .3rem; margin: .5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 0 0 0.0625rem var(--co-box-edge-color), 0 0.0625rem 0.25rem 0.0625rem rgba(0,0,0,0.06)">
        <div class="color-planet">
            <strong style="display: block;">Planète</strong>
        </div>
        <p style="flex: 1; display: block; padding: 0.2em; border-radius: 0.25em; text-align: center; color: var(--co-color-min); background-color: var(--co-color-bg-base);">
            <code>.color-planet</code>
        </p>
    </li>
    <li style="width: 14rem; overflow: hidden; font-size: 14px; padding: .3rem; margin: .5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 0 0 0.0625rem var(--co-box-edge-color), 0 0.0625rem 0.25rem 0.0625rem rgba(0,0,0,0.06)">
        <div class="color-media">
            <strong style="display: block;">Video et images</strong>
        </div>
        <p style="flex: 1; display: block; padding: 0.2em; border-radius: 0.25em; text-align: center; color: var(--co-color-min); background-color: var(--co-color-bg-base);">
            <code>.color-media</code>
        </p>
    </li>
    <li style="width: 14rem; overflow: hidden; font-size: 14px; padding: .3rem; margin: .5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 0 0 0.0625rem var(--co-box-edge-color), 0 0.0625rem 0.25rem 0.0625rem rgba(0,0,0,0.06)">
        <div class="color-hightech">
            <strong style="display: block;">High-tech</strong>
        </div>
        <p style="flex: 1; display: block; padding: 0.2em; border-radius: 0.25em; text-align: center; color: var(--co-color-min); background-color: var(--co-color-bg-base);">
            <code>.color-hightech</code>
        </p>
    </li>
    <li style="width: 14rem; overflow: hidden; font-size: 14px; padding: .3rem; margin: .5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 0 0 0.0625rem var(--co-box-edge-color), 0 0.0625rem 0.25rem 0.0625rem rgba(0,0,0,0.06)">
        <div class="color-native">
            <strong style="display: block;">Native</strong>
        </div>
        <p style="flex: 1; display: block; padding: 0.2em; border-radius: 0.25em; text-align: center; color: var(--co-color-min); background-color: var(--co-color-bg-base);">
            <code>.color-native</code>
        </p>
    </li>
    <li style="width: 14rem; overflow: hidden; font-size: 14px; padding: .3rem; margin: .5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 0 0 0.0625rem var(--co-box-edge-color), 0 0.0625rem 0.25rem 0.0625rem rgba(0,0,0,0.06)">
        <div class="color-native-foreground">
            <strong style="display: block;">Native premier-plan</strong>
        </div>
        <p style="flex: 1; display: block; padding: 0.2em; border-radius: 0.25em; text-align: center; color: var(--co-color-min); background-color: var(--co-color-bg-base);">
            <code>.color-native-foreground</code>
        </p>
    </li>
</ul>

<ul style="display: flex; flex-wrap: wrap; align-items: stretch; justify-content: flex-start; padding: 0; margin: 0 0 2rem; list-style: none;">
    {% for key, name in colors %}
        <li style="width: 14rem; overflow: hidden; font-size: 14px; padding: .3rem; margin: .5rem; text-align: center; border-radius: 0.5rem; box-shadow: 0 0 0 0.0625rem var(--co-box-edge-color), 0 0.0625rem 0.25rem 0.0625rem rgba(0,0,0,0.06)">
            <div class="color-{{ key }}">
                <strong style="display: block;">{{ name }}</strong>
            </div>
            <p style="flex: 1; display: block; padding: 0.2em; border-radius: 0.25em; text-align: center; color: var(--co-color-min); background-color: var(--co-color-bg-base);">
                <code>.color-{{ key }}</code>
            </p>
        </li>
    {% endfor %}
</ul>

Source: src/styl/_helpers/_colorsText.styl, line 1

5.4 Cursor

Description

Change cursor in differents kind of specific situations

.cursor-zoom-in: Change cursor to a magnifying glass to indicate to the user a zoom + .

Example

Exemple of paragraph

Markup

Compiled HTML
Template

<div class="box cursor-zoomIn pa1">
    <p>Exemple of paragraph</p>
</div>

<div class="box cursor-zoomIn pa1">
    <p>Exemple of paragraph</p>
</div>

Source: src/styl/_helpers/_cursor.styl, line 1

5.5 Font sizes

Description

Colette provides a set of font-sizes helpers classes. It can be used on elements build with unit related to font-size.

Default styling

Font-size exemple

Modifiers

.fs11

Set font-size to 11px converted to rem

Font-size exemple

.fs12

Set font-size to 12px converted to rem

Font-size exemple

.fs13

Set font-size to 13px converted to rem

Font-size exemple

.fs14

Set font-size to 14px converted to rem

Font-size exemple

.fs15

Set font-size to 15px converted to rem

Font-size exemple

.fs16

Set font-size to 16px converted to rem

Font-size exemple

.fsSmall

Set font-size to .8em

Font-size exemple

.fsBig

Set font-size to 1.2em

Font-size exemple

Markup

Compiled HTML
Template

<p class="">Font-size exemple</p>

<p class="[modifier class]">Font-size exemple</p>

Source: src/styl/_helpers/_fs.styl, line 1

5.6 Lists

Description

Classes to handle list items display.

Default styling

List-item
List-item

Modifiers

.list-pos-outside

list-item with outside positionned marks

List-item list-pos-outside
List-item list-pos-outside

.list-type-none

list-item with no marks

List-item list-type-none
List-item list-type-none

Markup

Compiled HTML
Template

<ul class="">
    <li>List-item </li>
    <li>List-item </li>
</ul>

<ul class="{{ modifier_class }}">
    <li>List-item {{ modifier_class }}</li>
    <li>List-item {{ modifier_class }}</li>
</ul>

Source: src/styl/_helpers/_list.styl, line 1

5.7 Mask

Description

Hide text but keep it readable to screen-readers

Example

Hidden text but readable to screen-readers

Markup

Compiled HTML
Template

<span class="mask">Hidden text but readable to screen-readers</span>

<span class="mask">Hidden text but readable to screen-readers</span>

Source: src/styl/_helpers/_mask.styl, line 1

5.8 No Scroll

Description

.noscroll disable the scroll inside an element

Example

The scroll is disabled on the body

Markup

Compiled HTML
Template

<body class="noscroll">The scroll is disabled on the body</body>

<body class="noscroll">The scroll is disabled on the body</body>

Source: src/styl/_helpers/_noscroll.styl, line 1

5.9 Spaces

Description

Colette provides a set of margin and padding classes based on the $grid-gutter size.
Note that $grid-gutter value is defined in Colette’s settings, but it can be overridden in your project stylus file.

Margins or paddings are multipliers (from 1 to 6) of the gutter width, and can be applied either on top | right | bottom | left | all side(s) of an element.

The suffix of the class names indicates the multiplier of the gutter.

Default styling

Example of paragraph

Modifiers

.ma1

Sets margin to 1 x gutter size (also available: .ma2, .ma3, .ma4, .ma5, .ma6)

Example of ma1 paragraph

.mt1

Sets margin-to to 1 x gutter size (also available: .mr2, .mr3, .mr4, .mr5, .mr6)

Example of mt1 paragraph

.mr1

Sets margin-right to 1 x gutter size (also available: .mr2, .mr3, .mr4, .mr5, .mr6)

Example of mr1 paragraph

.mb1

Sets margin-bottom to 1 x gutter size (also available: .mb2, .mb3, .mb4, .mb5, .mb6)

Example of mb1 paragraph

.ml1

Sets margin-left to 1 x gutter size (also available: .ml2, .ml3, .ml4, .ml5, .ml6)

Example of ml1 paragraph

.pa1

Sets padding to 1 x gutter size (also available: .pa2, .pa3, .pa4, .pa5, .pa6)

Example of pa1 paragraph

.pt1

Sets padding-top to 1 x gutter size (also available: .pa2, .pa3, .pa4, .pa5, .pa6)

Example of pt1 paragraph

.pr1

Sets padding-right to 1 x gutter size (also available: .pr2, .pr3, .pr4, .pr5, .pr6)

Example of pr1 paragraph

.pb1

Sets padding-bottom to 1 x gutter size (also available: .pb2, .pb3, .pb4, .pb5, .pb6)

Example of pb1 paragraph

.pl1

Sets padding-left to 1 x gutter size (also available: .pl2, .pl3, .pl4, .pl5, .pl6)

Example of pl1 paragraph

Markup

Compiled HTML
Template

<p class=" box">Example of paragraph</p>

<p class="{{ modifier_class }} box">Example of {{ modifier_class }} paragraph</p>

Source: src/styl/_helpers/_spaces.styl, line 1

5.10 Text format

Description

Fonts helpers.

Default styling

Example of text

Modifiers

.bold

bold text

Example of bold text

.italic

italic text

Example of italic text

.uppercase

uppercase text

Example of uppercase text

.font-secondary

small uppercase text (used on labels and pagers for example)

Example of font-secondary text

Markup

Compiled HTML
Template

<p>Example of <span class=""> text</span></p>

<p>Example of <span class="{{ modifier_class }}">{{ modifier_class }} text</span></p>

Source: src/styl/_helpers/_text.styl, line 1

5.11 Helpers: Block elements

Description

Block elements helpers.

5.11.1 Flexbox blocks

Description

.d-flex: display flex of a block or a list
.d-iFlex: display inline-flex of a block or a list
.flx0: apply flex: 0
.flx1: apply flex: 1
.flx2: apply flex: 2
.flx3: apply flex: 3
.fd-row: apply flex direction in row to the flex-items
.fd-rowRev: apply flex direction in row-reverse to the flex-items
.fd-col: apply flex direction in column to the flex-items
.fd-colRev: apply flex direction in column-reverse to the flex-items
.ff-row: apply flex flow in row to the flex-items
.ff-rowRev: apply flex flow in row-reverse to the flex-items
.ff-col: apply flex flow in column to the flex-items
.ff-colRev: apply flex flow in column-reverse to the flex-items
.ff-wrap: apply flex flow in wrap to the flex-items
.ff-wrapRev: apply flex flow in wrap-reverse to the flex-items
.ff-nowrap: apply flex flow in nowrap to the flex-items
.fw-wrap: apply flex wrap in wrap to the flex-items
.fw-wrapRev: apply flex wrap in wrap-reverse to the flex-items
.fw-nowrap: apply flex wrap in nowrap to the flex-items
.jc-fStart: apply justify content in flex-start to the flex-items
.jc-fEnd: apply justify content in flex-end to the flex-items
.jc-cntr: apply justify content in center to the flex-items
.jc-sAround: apply justify content in space-around to the flex-items
.jc-sBetw: apply justify content in space-between to the flex-items
.jc-str: apply justify content in stretch to the flex-items
.ai-fStart: apply align items in flex-start to the flex-items
.ai-fEnd: apply align items in flex-end to the flex-items
.ai-cntr: apply align items in center to the flex-items
.ai-sAround: apply align items in space-around to the flex-items
.ai-sBetw: apply align items in space-between to the flex-items
.ai-str: apply align items in stretch to the flex-item

Usage example

<!-- With the class d-iFlex, a list is display inline-flex -->
<ul class="d-iFlex fd-col fw-wrap">
  <!-- All children are flex-item with a display inline-flex -->
  <!-- With the class fd-col on container, all the flex-items are in column position -->
  <!-- With the class fw-wrap on container, all the flex-items have a wrap spacing -->
  <li>…</li>
  <li>…</li>
</ul>

5.11.2 Floating blocks

Description

.float-left: float left
.float-right: float right
.clear: clear both
.clearfix: clear floats (must be applied on the parent container)

Usage examples

/* example 1 */
<div class="clearfix">
  <p class="float-right">…</p>
  <p class="float-left">…</p>
  <!-- `.clear` class will break floating -->
</div>

/* example 2 */
<p class="float-right">…</p>
<p class="float-left">…</p>
<p class="clear">`.clear` class will break floating</p>

5.11.3 Full width blocks

Description

.full-width: makes an element stretch full width of its parent container
.responsive: same as .full-width [deprecated]

Usage example

<div>
  <img class="responsive" src="…" />
  <!-- image will be full width, with height auto -->
</div>

5.11.4 Hidden blocks

Description

.hidden: display none
.vsb-hidden: visibility hidden

Usage example

<p class="hidden">…</p>
<p class="vsb-hidden">…</p>

5.11.5 Inline blocks

Description

.inline: display inline of a block or a list
.inline-block: display inline-block

Usage example

<ul class="inline">
  <!-- Applied on a list, .inline class will make all list-item display inline -->
  <li>…</li>
  <li>…</li>
</ul>

<p class="inline-block">…</p>