7 Themes

Super class able to modify apparence of some components or elements.

7.1 Block link skin

Description

Add a style on the teaser of a content preview.

Note that the .blockLinkSkin-# class is applied on a content preview selector which must contain a .teaser child

Default styling

Label

This is the content title

This is the summary lorm ipsum sic amet color baba orum.

Footer line

Modifiers

.blockLinkSkin-communication

Teaser summary background color: native yellow

Label

This is the content title

This is the summary lorm ipsum sic amet color baba orum.

Footer line

.blockLinkSkin-brand

Block article background color: native yellow

Label

This is the content title

This is the summary lorm ipsum sic amet color baba orum.

Footer line

Markup

Compiled HTML
Template

<article class="box ">
    <figure class="media">
        <div class="media-wrap">
            <img src="http://img.20mn.fr/gmiJ0COJRYqUQM6w1jeBlw/648x415_20mn-11765.jpg" alt="This is an image" />
        </div>
    </figure>
    <div class="teaser">
        <p class="teaser-headline color-default">Label</p>
        <p class="teaser-title">This is the content title</p>
        <p class="teaser-summary">This is the summary lorm ipsum sic amet color baba orum.</p>
    </div>
    <p class="box-footer pa1">Footer line</p>
</article>

<article class="box {{ modifier_class }}">
    <figure class="media">
        <div class="media-wrap">
            <img src="http://img.20mn.fr/gmiJ0COJRYqUQM6w1jeBlw/648x415_20mn-11765.jpg" alt="This is an image" />
        </div>
    </figure>
    <div class="teaser">
        <p class="teaser-headline color-default">Label</p>
        <p class="teaser-title">This is the content title</p>
        <p class="teaser-summary">This is the summary lorm ipsum sic amet color baba orum.</p>
    </div>
    <p class="box-footer pa1">Footer line</p>
</article>

Source: src/styl/_themes/_blockLinkSkin.styl, line 1

7.2 Buttons skins

Description

All editorial colors are available to style the button according to its context.

Text color is choosen for contrast between white and black. But native and snapchat buttons have text in $color-base.

This skin can be used on .btn, .btnIcon and .icon.

Default styling

Call to action With left icon With right icon

Call to action

Newspaper Newspaper

Modifiers

.btnSkin-default

default color button

Call to action With left icon With right icon

Call to action

Newspaper Newspaper

.btnSkin-sport

sport color button

Call to action With left icon With right icon

Call to action

Newspaper Newspaper

.btnSkin-entertainment

entertainment color button

Call to action With left icon With right icon

Call to action

Newspaper Newspaper

.btnSkin-economy

economy color button

Call to action With left icon With right icon

Call to action

Newspaper Newspaper

.btnSkin-community

community color button

Call to action With left icon With right icon

Call to action

Newspaper Newspaper

.btnSkin-weird

weird color button

Call to action With left icon With right icon

Call to action

Newspaper Newspaper

.btnSkin-partner

partner color button

Call to action With left icon With right icon

Call to action

Newspaper Newspaper

.btnSkin-planet

planet color button

Call to action With left icon With right icon

Call to action

Newspaper Newspaper

.btnSkin-media

media color button

Call to action With left icon With right icon

Call to action

Newspaper Newspaper

.btnSkin-hightech

hightech color button

Call to action With left icon With right icon

Call to action

Newspaper Newspaper

.btnSkin-summer

summer color button

Call to action With left icon With right icon

Call to action

Newspaper Newspaper

Markup

Compiled HTML
Template

<div class="mb2">
    <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>
</div>
<div class="mb2">
    <p>
        <a href="#" class="btn btn-line mr1">Call to action</a>
        <a href="#" class="btn  btn-line 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  btn-line 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  btn-line mr1" type="submit">Submit</button>
        <button class="btn  btn-line mr1" disabled type="submit">Submit (disabled)</button>
    </p>
</div>
<div class="mb2">
    <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>
</div>
<div class="mb2">
    <span class="icon mr1">
        <svg class="icon-picto">
            <use xlink:href="#symbol-newspaper" />
        </svg>
        <span class="icon-label">
            Newspaper
        </span>
    </span>
    <span class="icon icon-inline">
        <svg class="icon-picto">
            <use xlink:href="#symbol-newspaper" />
        </svg>
        <span class="icon-label">
            Newspaper
        </span>
    </span>
</div>

{%- set classes = classes|default([]) -%}
{%- if modifier_class %}{% set classes = classes|merge([modifier_class]) %}{% endif -%}

<div class="mb2">
    {% include '../_elements/btn.twig' with {'classes': classes} only %}
</div>
<div class="mb2">
    {% include '../_elements/btn.twig' with {'classes': classes|merge(['btn-line'])} only %}
</div>
<div class="mb2">
    {% include '../_elements/btnIcon.twig' with {'classes': classes} only %}
</div>
<div class="mb2">
    {% include '../_elements/icon.twig' with {'classes': classes|merge(['mr1'])} only %}
    {% include '../_elements/icon.twig' with {'classes': classes|merge(['icon-inline'])} only %}
</div>

Source: src/styl/_themes/_btnSkin.styl, line 2

7.2.1 Default Social Buttons skin

Description

All social colors are available to style the button according to its context.

Button skin are not supported for IE (css custom properties).

Social Button skins can be used with .btn and .btnIcon They are not compatible with .btn-line

Default styling

mail

Modifiers

.btnSkin-dailymotion

dailymotion color button

social-dailymotion

.btnSkin-facebook

facebook color button

social-facebook

.btnSkin-flipboard

flipboard color button

social-flipboard

.btnSkin-github

github color button

social-github

.btnSkin-googleplus

googleplus color button

social-googleplus

.btnSkin-hootsuite

hootsuite color button

social-hootsuite

.btnSkin-linkedin

linkedin color button

social-linkedin

.btnSkin-instagram

instagram color button

social-instagram

.btnSkin-messenger

messenger color button

social-messenger

.btnSkin-pinterest

pinterest color button

social-pinterest

.btnSkin-pocket

pocket color button

social-pocket

.btnSkin-sms

sms color button

social-sms

.btnSkin-snapchat

snapchat color button

social-snapchat

.btnSkin-twitter

twitter color button

social-twitter

.btnSkin-whatsapp

whatsapp color button

social-whatsapp

.btnSkin-youtube

youtube color button

social-youtube

Markup

Compiled HTML
Template

<div class="mb1">
    <a href="#" class="btnIcon mr1">
        <svg height="16" width="16">
            <use xlink:href="#symbol-mail"></use>
        </svg>
        <span class="mask">mail</span>
    </a>
    <button class="btnIcon  mr1">
        <svg height="16" width="16">
            <use xlink:href="#symbol-mail"></use>
        </svg>
        <span class="mask">mail</span>
    </button>
    <button class="btnIcon  mr1" disabled>
        <svg height="16" width="16">
            <use xlink:href="#symbol-mail"></use>
        </svg>
        <span class="mask">mail</span>
    </button>
</div>
<div class="mb1">
    <a href="#" class="btn  mr1">
        <svg class="btn-picto btn-picto-left" height="16" width="16">
            <use xlink:href="#symbol-mail"></use>
        </svg>
        mail
    </a>
    <button class="btn  mr1">
        <svg class="btn-picto btn-picto-left" height="16" width="16">
            <use xlink:href="#symbol-mail"></use>
        </svg>
        mail
    </button>
    <button class="btn  mr1" disabled>
        <svg class="btn-picto btn-picto-left" height="16" width="16">
            <use xlink:href="#symbol-mail"></use>
        </svg>
        mail
    </button>
</div>

{%- set classes = classes|default(['mr1']) -%}
{%- if modifier_class -%}
    {%- set classes = classes|merge([modifier_class]) -%}
    {%- set symbol = symbol|default('social-' ~ modifier_class|replace({'btnSkin-': ''})) -%}
{%- endif -%}
{%- set symbol = symbol|default('mail') -%}

<div class="mb1">
    <a href="#" class="btnIcon {{ ' ' ~ classes|join(' ') }}">
        <svg height="16" width="16"><use xlink:href="#symbol-{{ symbol }}"></use></svg>
        <span class="mask">{{ symbol }}</span>
    </a>
    <button class="btnIcon {{ ' ' ~ classes|join(' ') }}">
        <svg height="16" width="16"><use xlink:href="#symbol-{{ symbol }}"></use></svg>
        <span class="mask">{{ symbol }}</span>
    </button>
    <button class="btnIcon {{ ' ' ~ classes|join(' ') }}" disabled>
        <svg height="16" width="16"><use xlink:href="#symbol-{{ symbol }}"></use></svg>
        <span class="mask">{{ symbol }}</span>
    </button>
</div>
<div class="mb1">
    <a href="#" class="btn {{ ' ' ~ classes|join(' ') }}">
        <svg class="btn-picto btn-picto-left" height="16" width="16"><use xlink:href="#symbol-{{ symbol }}"></use></svg>
        {{ symbol }}
    </a>
    <button class="btn {{ ' ' ~ classes|join(' ') }}">
        <svg class="btn-picto btn-picto-left" height="16" width="16"><use xlink:href="#symbol-{{ symbol }}"></use></svg>
        {{ symbol }}
    </button>
    <button class="btn {{ ' ' ~ classes|join(' ') }}" disabled>
        <svg class="btn-picto btn-picto-left" height="16" width="16"><use xlink:href="#symbol-{{ symbol }}"></use></svg>
        {{ symbol }}
    </button>
</div>

Source: src/styl/_themes/_btnSkin.styl, line 27

7.3 Skins

Description

Add a skin over the image of a content block on listing pages, and depending on the skin, modify the teaser text and/or background colors. Note that:

the .skin-# class is applied on a content preview selector (which may contain .media | .teaser | .box-footer children)
the skin is applied on a <figure class="media"> tag,
the image must be placed within a <p> or a <div> tag for icon skins

Default styling

Label

This is the content title

This is the summary lorm ipsum sic amet color baba orum.

Footer line

Modifiers

.skin-blog

Text skin: "blog", text color: community

Label

This is the content title

This is the summary lorm ipsum sic amet color baba orum.

Footer line

.skin-bytheweb

Text skin: "by the web", text color: hightech

Label

This is the content title

This is the summary lorm ipsum sic amet color baba orum.

Footer line

.skin-chat

Text skin: "chat"

Label

This is the content title

This is the summary lorm ipsum sic amet color baba orum.

Footer line

.skin-exclusive

Text skin: "exclusif", text color: highlight

Label

This is the content title

This is the summary lorm ipsum sic amet color baba orum.

Footer line

.skin-fakeoff

Text skin: "fake off", text color: default

Label

This is the content title

This is the summary lorm ipsum sic amet color baba orum.

Footer line

.skin-alertInfo

Text skin: "alerte info", text color: white, background-color: highlight

Label

This is the content title

This is the summary lorm ipsum sic amet color baba orum.

Footer line

.skin-live

Text skin: "live", headline color: highlight

Label

This is the content title

This is the summary lorm ipsum sic amet color baba orum.

Footer line

.skin-partner

Text skin: "partenaire"

Label

This is the content title

This is the summary lorm ipsum sic amet color baba orum.

Footer line

.skin-people

Text skin: "people"

Label

This is the content title

This is the summary lorm ipsum sic amet color baba orum.

Footer line

.skin-quiz

Text skin: "quiz", title and description color: community

Label

This is the content title

This is the summary lorm ipsum sic amet color baba orum.

Footer line

.skin-weird

Text skin: "t'as vu"

Label

This is the content title

This is the summary lorm ipsum sic amet color baba orum.

Footer line

.skin-summer

Text skin: 'L’info en série'

Label

This is the content title

This is the summary lorm ipsum sic amet color baba orum.

Footer line

.skin-community

Icon skin: 'community', text color: community

Label

This is the content title

This is the summary lorm ipsum sic amet color baba orum.

Footer line

.skin-gallery

Icon skin: 'images'

Label

This is the content title

This is the summary lorm ipsum sic amet color baba orum.

Footer line

.skin-podcast

Icon skin: 'podcast'

Label

This is the content title

This is the summary lorm ipsum sic amet color baba orum.

Footer line

.skin-video

Icon skin: 'play'

Label

This is the content title

This is the summary lorm ipsum sic amet color baba orum.

Footer line

Markup

Compiled HTML
Template

<article class="box ">
    <figure class="media">
        <div class="media-wrap">
            <img src="http://img.20mn.fr/gmiJ0COJRYqUQM6w1jeBlw/648x415_20mn-11765.jpg" alt="This is an image" />
        </div>
    </figure>
    <div class="teaser">
        <p class="teaser-headline color-default">Label</p>
        <p class="teaser-title">This is the content title</p>
        <p class="teaser-summary">This is the summary lorm ipsum sic amet color baba orum.</p>
    </div>
    <p class="box-footer pa1">Footer line</p>
</article>

<article class="box {{ modifier_class }}">
    <figure class="media">
        <div class="media-wrap">
            <img src="http://img.20mn.fr/gmiJ0COJRYqUQM6w1jeBlw/648x415_20mn-11765.jpg" alt="This is an image" />
        </div>
    </figure>
    <div class="teaser">
        <p class="teaser-headline color-default">Label</p>
        <p class="teaser-title">This is the content title</p>
        <p class="teaser-summary">This is the summary lorm ipsum sic amet color baba orum.</p>
    </div>
    <p class="box-footer pa1">Footer line</p>
</article>

Source: src/styl/_themes/_skin.styl, line 1

7.4 Second skin

Description

Add a style on the teaser of a content preview.

Note that the .secondSkin-# class is applied on a content preview selector which must contain a .teaser child

Default styling

Label

This is the content title

This is the summary lorm ipsum sic amet color baba orum.

Footer line

Modifiers

.secondSkin-live

Teaser summary color: highlight

Label

This is the content title

This is the summary lorm ipsum sic amet color baba orum.

Footer line

.secondSkin-community

Teaser summary color: community

Label

This is the content title

This is the summary lorm ipsum sic amet color baba orum.

Footer line

.secondSkin-community-all

Teaser title and summary color: community

Label

This is the content title

This is the summary lorm ipsum sic amet color baba orum.

Footer line

Markup

Compiled HTML
Template

<article class="box ">
    <figure class="media">
        <div class="media-wrap">
            <img src="http://img.20mn.fr/gmiJ0COJRYqUQM6w1jeBlw/648x415_20mn-11765.jpg" alt="This is an image" />
        </div>
    </figure>
    <div class="teaser">
        <p class="teaser-headline color-default">Label</p>
        <p class="teaser-title">This is the content title</p>
        <p class="teaser-summary">This is the summary lorm ipsum sic amet color baba orum.</p>
    </div>
    <p class="box-footer pa1">Footer line</p>
</article>

<article class="box {{ modifier_class }}">
    <figure class="media">
        <div class="media-wrap">
            <img src="http://img.20mn.fr/gmiJ0COJRYqUQM6w1jeBlw/648x415_20mn-11765.jpg" alt="This is an image" />
        </div>
    </figure>
    <div class="teaser">
        <p class="teaser-headline color-default">Label</p>
        <p class="teaser-title">This is the content title</p>
        <p class="teaser-summary">This is the summary lorm ipsum sic amet color baba orum.</p>
    </div>
    <p class="box-footer pa1">Footer line</p>
</article>

Source: src/styl/_themes/_secondSkin.styl, line 1