Avatar

v.0.0.1

Le composant d'avatar se déclare avec la classe .avatar.

Un border radius est appliqué directement sur l'image. L'image doit avoir ces caractéristiques :

Ratio : carré
Taille : 40*40 px
Format : jpg, png, gif

<div class="avatar">
  <div class="avatar-thumb">
    <img src="/assets/img/placeholder/avatar@1x.jpg" width="40" height="40" alt="Laurent Sutterlity" />
  </div>
</div>

Il est possible d'avoir une image rétina en utilisant l'attribut srcset (voir support navigateur).

<div class="avatar">
  <div class="avatar-thumb">
    <img src="assets/img/placeholder/avatar@1x.jpg"
         srcset="/assets/img/placeholder/avatar@1x.jpg 1x,
                 /assets/img/placeholder/avatar@2x.jpg 2x"
         width="40" height="40" alt="Laurent Sutterlity" />
  </div>
</div>

Bouton

v.0.0.1

Style de base

Le style de base convient pour les boutons d'action primaire.

Ajouter la classe .button aux éléments <a>, <button>, ou <input />.

Enregistrer

<a class="button" href="#" role="button">Enregistrer</a>
<button class="button">Enregistrer</button>
<input class="button" type="submit" value="Enregistrer">

Style secondaire

Le style secondaire convient pour les boutons d'action secondaire.

Ajouter la classe de modification .button--secondary à l'élément ayant la classe .button afin de modifier son style.

Quitter

<a class="button button--secondary" href="#" role="button">Quitter</a>
<button class="button button--secondary">Quitter</button>
<input class="button button--secondary" type="submit" value="Quitter">

Style ghost

Le style ghost convient pour les boutons sur fond blanc.

Ajouter la classe de modification .button--ghost à l'élément ayant la classe .button afin de modifier son style.

Connexion

<a class="button button--ghost" href="#" role="button">Connexion</a>
<button class="button button--ghost">Connexion</button>
<input class="button button--ghost" type="submit" value="Connexion">

Style ghostAlphaDark

Le style ghostAlphaDark convient pour les boutons sur fond rouge et bleu.

Ajouter la classe de modification .button--ghostAlphaDark à l'élément ayant la classe .button afin de modifier son style.

Connexion

<div class="u-bkgClr1 u-paM">
  <a class="button button--ghostAlphaDark" href="#" role="button">Connexion</a>
  <button class="button button--ghostAlphaDark">Connexion</button>
  <input class="button button--ghostAlphaDark" type="submit" value="Connexion">
</div>

Connexion

<div class="u-bkgClr3 u-paM">
  <a class="button button--ghostAlphaDark" href="#" role="button">Connexion</a>
  <button class="button button--ghostAlphaDark">Connexion</button>
  <input class="button button--ghostAlphaDark" type="submit" value="Connexion">
</div>

Style ghostAlphaLight

Le style ghostAlphaLight convient pour les boutons sur fond rouge et bleu.

Ajouter la classe de modification .button--ghostAlphaLight à l'élément ayant la classe .button afin de modifier son style.

Connexion

<div class="u-bkgClr0Dark u-paM">
  <a class="button button--ghostAlphaLight" href="#" role="button">Connexion</a>
  <button class="button button--ghostAlphaLight">Connexion</button>
  <input class="button button--ghostAlphaLight" type="submit" value="Connexion">
</div>

Style ghostAlternate

Le style ghostAlternate convient pour les boutons alternattifs

Ajouter la classe de modification .button--ghostAlternate à l'élément ayant la classe .button afin de modifier son style.

Connexion

<a class="button button--ghostAlternate" href="#" role="button">Connexion</a>
<button class="button button--ghostAlternate">Connexion</button>
<input class="button button--ghostAlternate" type="submit" value="Connexion">

État désactivé

<a> : Ajouter la classe d'état .is-disabled
<input /> ou <button /> : Ajouter l'attribut disabled

Sauvegarder

<a class="button is-disabled" href="#" role="button">Sauvegarder</a>
<button class="button button--secondary" disabled>Quitter</button>
<input class="button button--ghost" type="submit" value="Connexion" disabled>
<input class="button button--ghostAlternate" type="submit" value="Connexion" disabled>

<div class="u-bkgClr3 u-paM">
  <input class="button button--ghostAlphaDark" type="submit" value="Connexion" disabled>
</div>

<div class="u-bkgClr0Dark u-paM">
  <input class="button button--ghostAlphaLight" type="submit" value="Connexion" disabled>
</div>

Bouton pleine largeur

Ajouter la classe de modification .button--block à l'élément ayant la classe .button afin qu'il prenne toute la largeur de son parent.

Sauvegarder

<a class="button button--block" href="#" role="button">Sauvegarder</a>

Bouton avec icône

v.0.0.1

Bouton avec icône uniquement

Ajouter les classes .icon .icon-xxx à l'élément .button.

Le texte doit être contenu dans une balise <span> (accessible uniquement aux lecteurs d'écran)

Dupliquer Quitter Supprimer

<a class="button icon icon--duplicate" href="#" role="button">
  <span>Dupliquer</span>
</a>

<a class="button button--secondary icon icon--close" href="#" role="button">
  <span>Quitter</span>
</a>

<a class="button button--ghost icon icon--trash" href="#" role="button">
  <span>Supprimer</span>
</a>

Bouton avec icône et texte

Ajouter un composant d'icône .icon.icon-xxx dans l'élément .button.

Il est possible d'ajouter des marges en fonction de la position de l'icône :

.icon.icon-xxx.icon--mRight : marge à droite
.icon.icon-xxx.icon--mleft : marge à gauche

Dupliquer Quitter Supprimer

<a class="button" href="#" role="button">
  <span class="icon icon--duplicate icon--mRight"></span> Dupliquer
</a>

<a class="button button--secondary" href="#" role="button">
  Quitter <span class="icon icon--close icon--mLeft"></span>
</a>

<a class="button button--ghost" href="#" role="button">
  <span class="icon icon--trash icon--mRight"></span> Supprimer
</a>

Boutons circulaires

v.0.0.1

Ajouter la classe de modification .button--circular à l'élément ayant la classe .button afin de modifier son style.

<button class="button button--circular icon icon--add">
  <span>Ajouter</span>
</button>
<button class="button button--circular button--secondary icon icon--folder">
  <span>Mes fichiers/span>
</button>
<button class="button button--circular button--ghostAlternate icon icon--notif">
  <div class="notifNumber">88</div>
  <span>Menu</span>
</button>

v.0.0.1

Pour ajouter le bon comportement au dropdown, le container prends des data-attributes :

data-cb-dropdown contient le selecteur du dropdown (doit être un enfant)
data-cb-dropdown-trigger contient le selecteur du déclencheur du dropdown (doit être un enfant)
data-cb-dropdown-align peut prendre les valeurs right (défaut) ou left. Gère l'alignement du dropdown

<div class="dropdown" data-cb-dropdown=".dropdown-content" data-cb-dropdown-trigger=".dropdown-button">
  <div class="dropdown-button" role="button">
    Toute l'équipe
    <span class="icon icon--down"></span>
  </div>
  <ul class="dropdown-content">
    <li class="dropdown-item">
      <a href="#" class="dropdown-link">Moi</a>
    </li>
    <li class="dropdown-item">
      <a href="#" class="dropdown-link">Rémi Fericelli</a>
    </li>
    <li class="dropdown-item">
      <a href="#" class="dropdown-link">Muriel Kaplan</a>
    </li>
  </ul>
</div>

<div class="dropdown" data-cb-dropdown=".dropdown-content" data-cb-dropdown-trigger=".dropdown-button">
  <div class="dropdown-button" role="button">
    <div class="avatar">
      <div class="avatar-thumb">
        <img src="https://avatars0.githubusercontent.com/u/709456?v=3&amp;s=460" width="40" height="40" alt="Laurent sutterlity" />
      </div>
    </div>
    <span class="icon icon--down"></span>
  </div>
  <ul class="dropdown-content">
    <li class="dropdown-item">
      <a href="#" class="dropdown-link">Mon compte</a>
    </li>
    <li class="dropdown-item">
      <a href="#" class="dropdown-link">Adminstration</a>
    </li>
    <li class="dropdown-item">
      <a href="#" class="dropdown-link">
      <span class="icon icon--disconnect icon--mRight"></span> Déconnexion</a>
    </li>
  </ul>
</div>

Ajouter le data-attribute data-cb-dropdown-align="left"

<div class="dropdown" data-cb-dropdown=".dropdown-content" data-cb-dropdown-trigger=".dropdown-button" data-cb-dropdown-align="left">
  <div class="dropdown-button" role="button">
    Toute l'équipe
    <span class="icon icon--down"></span>
  </div>
  <ul class="dropdown-content">
    <li class="dropdown-item">
      <a href="#" class="dropdown-link">Moi</a>
    </li>
    <li class="dropdown-item">
      <a href="#" class="dropdown-link">Rémi Fericelli</a>
    </li>
    <li class="dropdown-item">
      <a href="#" class="dropdown-link">Muriel Kaplan</a>
    </li>
  </ul>
</div>

Formulaire

v.0.0.1

Formulaire type

Les éléments de type <form> prennent la classe .form
Chaque ligne d'inputs est contenu dans un wrapper .form-group, gérant les marges entre chaque lignes
Les inputs et les labels possèdent également leur propres classes

<form class="form" action="">

  <div class="form-group">
    <label for="login" class="form-group-label">Identifiant</label>
    <div class="form-group-input">
      <input id="login" type="text" name="login" placeholder="Identifiant">
    </div>
  </div>

  <div class="form-group">
    <label for="password" class="form-group-label">Mot de passe</label>
    <div class="form-group-input">
      <input id="password" type="password" name="password" placeholder="Mot de passe">
    </div>
  </div>

  <div class="form-footer u-txtCenter">
    <input class="button" type="submit" value="connexion">
    <p><a href="">mot de passe oublié ?</a></p>
  </div>

</form>

Élément sans label

Ajouter la classe de modification .form-group--noLabel à l'élément ayant la classe .form-group pour cacher les labels sauf aux lecteur d'écrans.

Label

<div class="form-group form-group--noLabel">
  <label for="input-base" class="form-group-label">Label</label>
  <div class="form-group-input">
    <input id="input-base" type="text" name="input-base" placeholder="Your placeholder">
  </div>
</div>

Inputs

v.0.0.1

Input text

Label

<div class="form-group">
  <label for="input-base" class="form-group-label">Label</label>
  <div class="form-group-input">
    <input id="input-base" type="text" name="input-base" placeholder="Your placeholder">
  </div>
</div>

Input radio

Fake label

Radio A

Radio B

<div class="form-group">
  <p class="form-group-label">Fake label</p>
  <div class="form-group-input">
    <div class="inputRadio">
      <input id="inputRadio-base-1" type="radio" name="inputRadio-base">
      <label for="inputRadio-base-1">Radio A</label>
    </div>
    <div class="inputRadio">
      <input id="inputRadio-base-2" type="radio" name="inputRadio-base">
      <label for="inputRadio-base-2">Radio B</label>
    </div>
  </div>
</div>

Input radio inline

Fake label

Radio A

Radio B

<div class="form-group">
  <p class="form-group-label">Fake label</p>
  <div class="form-group-input form-group-input--inline">
    <div class="inputRadio">
      <input id="inputRadio-inline-1" type="radio" name="inputRadio-inline">
      <label for="inputRadio-inline-1">Radio A</label>
    </div>
    <div class="inputRadio">
      <input id="inputRadio-inline-2" type="radio" name="inputRadio-inline">
      <label for="inputRadio-inline-2">Radio B</label>
    </div>
  </div>
</div>

Input checkbox

Checkbox

<div class="form-group">
  <div class="form-group-input">
    <div class="inputCheckbox">
      <input id="inputCheckbox" type="checkbox" value="inputCheckbox">
      <label for="inputCheckbox">Checkbox</label>
    </div>
  </div>
</div>

Input radio toggle

Paramètres Calcul

<div class="form-group">
  <div class="radioToggle">
    <input id="inputRadioToggle-1" type="radio" name="inputRadioToggle" checked="checked">
    <label for="inputRadioToggle-1">Paramètres</label>
    <input id="inputRadioToggle-2" type="radio" name="inputRadioToggle">
    <label for="inputRadioToggle-2">Calcul</label>
  </div>
</div>

Input avec icône

v.0.0.1

Ajouter la classe .form-group-input--icon à l'élément .form-group-input.
Ajouter un composant d'icône dans .form-group-input

Right icon

<div class="form-group">
  <label for="right-icon" class="form-group-label">Right icon</label>
  <div class="form-group-input form-group-input--icon">
    <span class="icon icon--search"></span>
    <input id="right-icon" type="text" name="right-icon" placeholder="Your placeholder">
  </div>
</div>

État d'input

v.0.0.1

État : disabled

Ajouter la classe .form-group--disabled à l'élément .form-group.
Ajouter un attribut disabled sur les éléments <input />.

<div class="form-group form-group--disabled">
  <label for="input-disabled" class="form-group-label">Label</label>
  <div class="form-group-input">
    <input id="input-disabled" type="text" name="input-disabled" placeholder="Placeholder" disabled>
  </div>
</div>

<div class="form-group form-group--disabled">
  <p class="form-group-label">Fake label</p>
  <div class="form-group-input form-group-input--inline">
    <div class="inputRadio">
      <input id="inputRadio-disabled-1" type="radio" name="inputRadio-disabled" disabled>
      <label for="inputRadio-disabled-1">Radio A</label>
    </div>
    <div class="inputRadio">
      <input id="inputRadio-disabled-2" type="radio" name="inputRadio-disabled" disabled>
      <label for="inputRadio-disabled-2">Radio B</label>
    </div>
  </div>
</div>

<div class="form-group form-group--disabled">
  <div class="form-group-input">
    <div class="inputCheckbox">
      <input id="inputCheckbox-disabled" type="checkbox" value="inputCheckbox-disabled" disabled>
      <label for="inputCheckbox-disabled">Checkbox</label>
    </div>
  </div>
</div>
<div class="form-group form-group--disabled">
  <div class="radioToggle">
    <input id="inputRadioToggle-1-disabled" type="radio" name="inputRadioToggle-disabled" checked="checked" disabled>
    <label for="inputRadioToggle-1-disabled">Paramètres</label>
    <input id="inputRadioToggle-2-disabled" type="radio" name="inputRadioToggle-disabled" disabled=>
    <label for="inputRadioToggle-2-disabled">Calcul</label>
  </div>
</div>
<div class="form-footer">
  <input class="button is-disabled" type="submit" value="Submit" disabled>
</div>

État : succés

Ajouter la classe .form-group--success à l'élément .form-group.

Label

Shit, that label's taken. Try another.

Fake label

Radio A

Radio B

Checkbox

<div class="form-group form-group--success">
  <label for="input-success" class="form-group-label">Label</label>
  <div class="form-group-input">
    <input id="input-success" type="text" name="input-success" placeholder="Placeholder">
  </div>
  <div class="form-group-feedback">Shit, that label's taken. Try another.</div>
</div>
<div class="form-group form-group--success">
  <p class="form-group-label">Fake label</p>
  <div class="form-group-input form-group-input--inline">
    <div class="inputRadio">
      <input id="inputRadio-success-1" type="radio" name="inputRadio-success" checked="checked">
      <label for="inputRadio-success-1">Radio A</label>
    </div>
    <div class="inputRadio">
      <input id="inputRadio-success-2" type="radio" name="inputRadio-success">
      <label for="inputRadio-success-2">Radio B</label>
    </div>
  </div>
</div>
<div class="form-group form-group--success">
  <div class="form-group-input">
    <div class="inputCheckbox">
      <input id="inputCheckbox-success" type="checkbox" value="inputCheckbox-success" checked="checked">
      <label for="inputCheckbox-success">Checkbox</label>
    </div>
  </div>
</div>

État : erreur

Ajouter la classe .form-group--error à l'élément .form-group.

Label

Shit, that label's taken. Try another.

Fake label

Radio A

Radio B

Checkbox

<div class="form-group form-group--error">
  <label for="input-error" class="form-group-label">Label</label>
  <div class="form-group-input">
    <input id="input-error" type="text" name="input-error" placeholder="Placeholder">
  </div>
  <div class="form-group-feedback">Shit, that label's taken. Try another.</div>
</div>
<div class="form-group form-group--error">
  <p class="form-group-label">Fake label</p>
  <div class="form-group-input form-group-input--inline">
    <div class="inputRadio">
      <input id="inputRadio-error-1" type="radio" name="inputRadio-error">
      <label for="inputRadio-error-1">Radio A</label>
    </div>
    <div class="inputRadio">
      <input id="inputRadio-error-2" type="radio" name="inputRadio-error">
      <label for="inputRadio-error-2">Radio B</label>
    </div>
  </div>
</div>
<div class="form-group form-group--error">
  <div class="form-group-input">
    <div class="inputCheckbox">
      <input id="inputCheckbox-error" type="checkbox" value="inputCheckbox-error">
      <label for="inputCheckbox-error">Checkbox</label>
    </div>
  </div>
</div>

Formulaire en grille

v.0.0.1

Comme tous les autres éléments, les formulaires peuvent être inclus dans une grille. Voir la documentation sur les grilles

<form class="form" action="">

  <div class="grid">

    <div class="form-group grid-w50">
      <label for="login" class="form-group-label">Login</label>
      <div class="form-group-input">
        <input id="login" type="text" name="login">
      </div>
    </div>

    <div class="form-group grid-w50">
      <label for="password" class="form-group-label">Password</label>
      <div class="form-group-input">
        <input id="password" type="password" name="password">
      </div>
    </div>

  </div>

  <div class="grid">

    <div class="form-group grid-w33">
      <label for="label-3" class="form-group-label">label</label>
      <div class="form-group-input">
        <input id="label-3" type="text" name="label-3">
      </div>
    </div>

    <div class="form-group grid-w33">
      <label for="label-4" class="form-group-label">label</label>
      <div class="form-group-input">
        <input id="label-4" type="text" name="label-4">
      </div>
    </div>

     <div class="form-group grid-w33">
      <label for="label-5" class="form-group-label">label</label>
      <div class="form-group-input">
        <input id="label-4" type="text" name="label-5">
      </div>
    </div>

  </div>
</form>

Grille

v.0.0.1

Une définition de grille est composée d'un élément .grid, puis d'enfants avec une classe .grid-wX.

Tailles de grille disponibles :

25% : .grid-w25
33% : .grid-w33
50% : .grid-w50
66% : .grid-w66
75% : .grid-w75
100% : .grid-w100

<div class="grid">
  <div class="grid-w50"></div>
  <div class="grid-w25"></div>
  <div class="grid-w25"></div>
  <div class="grid-w50"></div>
  <div class="grid-w50"></div>
  <div class="grid-w33"></div>
  <div class="grid-w33"></div>
  <div class="grid-w33"></div>
  <div class="grid-w66"></div>
  <div class="grid-w33"></div>
  <div class="grid-w100"></div>
  <div class="grid-w25"></div>
  <div class="grid-w25"></div>
  <div class="grid-w25"></div>
  <div class="grid-w25"></div>
  <div class="grid-w75"></div>
  <div class="grid-w25"></div>
  <div class="grid-w20"></div>
  <div class="grid-w20"></div>
  <div class="grid-w20"></div>
  <div class="grid-w20"></div>
  <div class="grid-w20"></div>
  <div class="grid-w20"></div>
  <div class="grid-w80"></div>
  <div class="grid-w40"></div>
  <div class="grid-w60"></div>
</div>

v.0.0.1

Header (structure)

<header class="header" role="banner">
  <div class="header-wrapper">
    <div class="header-inner">
      Aligné à gauche
    </div>
    <div class="header-inner header-inner--push">
      Aligné à droite
    </div>
  </div>
</header>

Header (exemple complexe)

Se référer à la documentation sur le Menu pour les variations de menu.

<header class="header" role="banner">
  <div class="header-wrapper">
    <div class="header-inner">
      <nav class="menu">
        <ul class="menu-inner menu-inner--push">
          <li class="menu-item"><a class="menu-link is-active" href="#">Accueil</a></li>
          <li class="menu-item"><a class="menu-link" href="#">Indicateurs</a></li>
          <li class="menu-item"><a class="menu-link" href="#">Calendrier</a></li>
        </ul>
      </nav>
    </div>
    <div class="header-inner header-inner--push">
      <div class="header-status">Dernière modification il y a 10 heures…</div>
      <div class="dropdown" data-cb-dropdown=".dropdown-content" data-cb-dropdown-trigger=".dropdown-button">
        <div class="dropdown-button" role="button">
          <div class="avatar">
            <div class="avatar-thumb"><img src="assets/img/placeholder/avatar@1x.jpg" srcset="http://localhost:3000/assets/img/placeholder/avatar@1x.jpg 1x, http://localhost:3000/assets/img/placeholder/avatar@2x.jpg 2x" width="40" height="40" alt="Laurent Sutterlity"></div>
          </div><span class="icon icon--down"></span>
        </div>
        <ul class="dropdown-content">
          <li class="dropdown-item"><a class="dropdown-link" href="#">Mon compte</a></li>
          <li class="dropdown-item"><a class="dropdown-link" href="#">Adminstration</a></li>
          <li class="dropdown-item"><a class="dropdown-link" href="#"><span class="icon icon--disconnect icon--mRight"></span> Déconnexion</a></li>
        </ul>
      </div>
      <button class="button button--circular button--ghostAlternate icon icon--notif">
        <div class="notifNumber">88</div><span>Menu</span>
      </button>
    </div>
  </div>
</header>

Lien

v.0.0.1

Lien par défaut

Ajouter la classe .link aux éléments <a>.

<a href="#" class="link">Partager</a>

Lien avec icône

Ajouter un composant d'icône .icon.icon-xxx dans l'élément .link.

Il est possible d'ajouter des marges en fonction de la position de l'icône :

.icon.icon-xxx.icon--mRight : marge à droite
.icon.icon-xxx.icon--mleft : marge à gauche

<a href="#" class="link"><span class="icon icon--share icon--mRight"></span>Partager</a>

Lien désactivé

Ajouter la classe d'état .is-disabled à l'élément ayant la classe .link pour désactiver le composant.

<a href="#" class="link is-disabled">Partager</a>

Lien sur fond gris

Ajouter la classe de modification .link--light à l'élément ayant la classe .link afin de modifier son style.

<div class="u-bkgClr0lightestAlternate u-paM">
  <a href="#" class="link link--light">Partager</a>
</div>

Listes

v.0.0.1

Reset de liste

Désactive les puces, le padding, les marges…

Item 1
Item 2
Item 3
Item 4

<ul class="listReset">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

Liste inline

Aligne horizontalement les élements <li> de listes.

Item 1
Item 2
Item 3
Item 4

<ul class="listInline">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

v.0.0.1

Le menu affiche des liens de navigation.

La classe d'état .is-active permet d'highlighter l'élément .menu-link actif.

<nav class="menu">
  <ul class="menu-inner">
    <li class="menu-item"><a class="menu-link is-active" href="#">Accueil</a></li>
    <li class="menu-item"><a class="menu-link" href="#">Indicateurs</a></li>
    <li class="menu-item"><a class="menu-link" href="#">Calendrier</a></li>
  </ul>
</nav>

Pastille de notification

v.0.0.1

Pastille de notifaction seule

88

<div class="notifNumber">88</div>

Pastille de notifaction dans un bouton

<button class="button button--circular button--ghostAlternate icon icon--notif">
  <div class="notifNumber">88</div>
  <span>Menu</span>
</button>

v.0.0.1

<div class="sidebar">
  <div class="sidebar-header"><img src="/assets/img/logo-cabestan-min-light.svg" alt="Cabestan" width="27" height="34"></div>
  <nav class="sidebar-nav">
    <a class="sidebar-link" href="#">
      <div class="sidebar-link-icon icon icon--home"></div>
      <div class="sidebar-link-legend">Accueil</div>
    </a>
    <a class="sidebar-link" href="#">
      <div class="sidebar-link-icon icon icon--journey"></div>
      <div class="sidebar-link-legend">Lorem ipsum</div>
    </a>
    <a class="sidebar-link" href="#">
      <div class="sidebar-link-icon icon icon--audience"></div>
      <div class="sidebar-link-legend">Audience</div>
    </a>
    <a class="sidebar-link" href="#">
      <div class="sidebar-link-icon icon icon--camp"></div>
      <div class="sidebar-link-legend">Lorem ipsum</div>
    </a>
    <a class="sidebar-link" href="#">
      <div class="sidebar-link-icon icon icon--content"></div>
      <div class="sidebar-link-legend">Lorem ipsum</div>
    </a>
    <a class="sidebar-link" href="#">
      <div class="sidebar-link-icon icon icon--report"></div>
      <div class="sidebar-link-legend">Lorem ipsum</div>
    </a>
    <a class="sidebar-link" href="#">
      <div class="sidebar-link-icon icon icon--data"></div>
      <div class="sidebar-link-legend">Lorem ipsum</div>
    </a>
  </nav>
  <div class="sidebar-footer">
    <a class="sidebar-footer-link" href="#">
      <div class="icon icon--infos"></div><span class="u-visuallyHidden">Aide</span></a>
  </div>
</div>

Titre

v.0.0.1

Titre niveau 1

Style pour les grands titres et les chiffres.

Indicateurs 25_%

<p class="title title--level1">Indicateurs 25<sub>%</sub></p>
<h2 class="title title--level1">Indicateurs 25<sub>%</sub></h2>

Titre niveau 2

Style pour les sous-titres.

Caraibes_FR75_Fidélité_Offre_Juin_2016

<p class="title title--level2">Caraibes_FR75_Fidélité_Offre_Juin_2016</p>
<h2 class="title title--level2">Caraibes_FR75_Fidélité_Offre_Juin_2016</h2>

Background color

v.0.0.1

Les utilitaires de background permettent de modifier les fonds de couleurs des éléments.

Couleur : Light

Class	Usage
`.u-bkgClrLight`	background-color: #fff

Couleur : Clr0

Class	Usage
`.u-bkgClr0Darker`	background-color: #202122
`.u-bkgClr0Dark`	background-color: #282b2c
`.u-bkgClr0`	background-color: #616566
`.u-bkgClr0Light`	background-color: #949ea1
`.u-bkgClr0Lighter`	background-color: #bdc3c5
`.u-bkgClr0Lightest`	background-color: #e9eeee
`.u-bkgClr0LightestAlternate`	background-color: #f2f2f2

Couleur : Clr1

Class	Usage
`.u-bkgClr1Darker`	background-color: #993225
`.u-bkgClr1Dark`	background-color: #d84633
`.u-bkgClr1`	background-color: #fb523c
`.u-bkgClr1Light`	background-color: #fda397
`.u-bkgClr1Lighter`	background-color: #fee0dc

Couleur : Clr2

Class	Usage
`.u-bkgClr2Darker`	background-color: #9f7000
`.u-bkgClr2Dark`	background-color: #db9b00
`.u-bkgClr2`	background-color: #ffb400
`.u-bkgClr2Light`	background-color: #ffd571
`.u-bkgClr2Lighter`	background-color: #fff1cf

Couleur : Clr3

Class	Usage
`.u-bkgClr3Darker`	background-color: #0c3549
`.u-bkgClr3Dark`	background-color: #114f6d
`.u-bkgClr3`	background-color: #186b96
`.u-bkgClr3Light`	background-color: #85afc4
`.u-bkgClr3Lighter`	background-color: #c8e5f3

Couleur : Clr4

Class	Usage
`.u-bkgClr4`	background-color: #29b8ff

Layout

v.0.0.1

Les utilitaires de Layout sont des helpers permettant de facilement appliquer certaines modifications de layout à un élément. (clearFix, floats, fix de "contexte de formattage de bloc"...)

Class	Usage
`.u-cf`	Empêcher les flottants de dépasser de leur conteneur. Plus d'informations sur le fonctionnement dans cet article d'Alsacréations.
`.u-floatLeft`	Ajoute un float: left à l'élément.
`.u-floatRight`	Ajoute un float: right à l'élément.
`.u-noBfc`	Supprime le contexte de formatage de block. Plus d'information dans cet article d'Alsacréations sur le contexte de formatage block en CSS.
`.u-flexPushleft`	Décale un enfant direct d'un parent en display:flex vers la droite

Show / hide

v.0.0.1

Les utilitaires Show-Hide permettent cacher ou afficher les élements.

Class	Usage
`.u-visuallyHidden`	Cache visuelement les élements, sauf pour les lecteurs d'écrans

Espacement

v.0.0.1

Les utilitaires d'espacement permettent facilement d'appliquer des margin / padding sur un élément. A utiliser pour assembler différents composants sans avoir à définir une nouvelle classe de wrapper.

Définition :

p, m = padding, margin
a, t, r, b, l = all, top, right, bottom, left
S, M, L, N = Small (10 px), Medium (20 px), Large (40 px) , None (0)

Margin

Class	Usage
`.u-maS`	margin: 10 px;
`.u-maM`	margin: 20 px;
`.u-maL`	margin: 40 px;
`.u-maN`	margin: 0;
`.u-mtS`	margin-top: 10 px;
`.u-mtM`	margin-top: 20 px;
`.u-mtL`	margin-top: 40 px;
`.u-mtN`	margin-top: 0;
`.u-mrS`	margin-right: 10 px;
`.u-mrM`	margin-right: 20 px;
`.u-mrL`	margin-right: 40 px;
`.u-mrN`	margin-right: 0;
`.u-mbS`	margin-bottom: 10 px;
`.u-mbM`	margin-bottom: 20 px;
`.u-mbL`	margin-bottom: 40 px;
`.u-mbN`	margin-bottom: 0;
`.u-mlS`	margin-left: 10 px;
`.u-mlM`	margin-left: 20 px;
`.u-mlL`	margin-left: 40 px;
`.u-mlN`	margin-left: 0;

Padding

Class	Usage
`.u-paS`	padding: 10 px;
`.u-paM`	padding: 20 px;
`.u-paL`	padding: 40 px;
`.u-paN`	padding: 0;
`.u-ptS`	padding-top: 10 px;
`.u-ptM`	padding-top: 20 px;
`.u-ptL`	padding-top: 40 px;
`.u-ptN`	padding-top: 0;
`.u-prS`	padding-right: 10 px;
`.u-prM`	padding-right: 20 px;
`.u-prL`	padding-right: 40 px;
`.u-prN`	padding-right: 0;
`.u-pbS`	padding-bottom: 10 px;
`.u-pbM`	padding-bottom: 20 px;
`.u-pbL`	padding-bottom: 40 px;
`.u-pbN`	padding-bottom: 0;
`.u-plS`	padding-left: 10 px;
`.u-plM`	padding-left: 20 px;
`.u-plL`	padding-left: 40 px;
`.u-plN`	padding-left: 0;

Texte

v.0.0.1

Les utilitaires de texte permettent de modifier les styles de texte des éléments.

Modification de style

Class	Usage
`.u-txtUpper`	Texte tout en capitales
`.u-txtLower`	Texte tout en minuscules
`.u-txtCenter`	Texte centré
`.u-txtLeft`	Texte aligné à droite
`.u-txtRight`	Texte aligné à gauche
`.u-txtBreak`	Indique que les mots normalement incassables peuvent être rompus à des points arbitraires s'il n'y a pas des points de rupture par ailleurs acceptables dans la ligne.
`.u-txtTruncate`	Tronque le texte avec ellipsis

Modification de taille

Class	Usage
`.u-txtXXL`	font-size: 40 px
`.u-txtXL`	font-size: 30 px
`.u-txtL`	font-size: 18 px
`.u-txtM`	font-size: 15 px
`.u-txtS`	font-size: 14 px
`.u-txtXS`	font-size: 12 px
`.u-txtXXS`	font-size: 10 px

Text Color

v.0.0.1

Les utilitaires de couleurs permettent de modifier les couleurs des éléments.

Couleur : Light

Class	Usage
`.u-txtClrLight`	color: #fff

Couleur : Clr0

Class	Usage
`.u-txtClr0`	color: #616566
`.u-txtClr0Light`	color: #949ea1
`.u-txtClr0Lighter`	color: #bdc3c5
`.u-txtClr0Dark`	color: #282b2c
`.u-txtClr0Darker`	color: #202122

Couleur : Clr1

Class	Usage
`.u-txtClr1Darker`	color: #993225
`.u-txtClr1Dark`	color: #d84633
`.u-txtClr1`	color: #fb523c
`.u-txtClr1Light`	color: #fda397
`.u-txtClr1Lighter`	color: #fee0dc

Couleur : Clr2

Class	Usage
`.u-txtClr2Darker`	color: #9f7000
`.u-txtClr2Dark`	color: #db9b00
`.u-txtClr2`	color: #ffb400
`.u-txtClr2Light`	color: #ffd571
`.u-txtClr2Lighter`	color: #fff1cf

Couleur : Clr3

Class	Usage
`.u-txtClr3Darker`	color: #0c3549
`.u-txtClr3Dark`	color: #114f6d
`.u-txtClr3`	color: #186b96
`.u-txtClr3Light`	color: #85afc4
`.u-txtClr3Lighter`	color: #c8e5f3

Couleur : Clr4

Class	Usage
`.u-txtClr4`	color: #29b8ff

Taille

v.0.0.1

Les utilitaires de taille permettent modifier la taille des élements.

Class	Usage
`.u-w20`	width: 20%
`.u-w25`	width: 25%
`.u-w33`	width: 33.333%
`.u-w40`	width: 40%
`.u-w50`	width: 50%
`.u-w60`	width: 50%
`.u-w66`	width: 66.666%
`.u-w75`	width: 75%
`.u-w80`	width: 80%
`.u-w100`	width: 100%

Embed

v.0.0.1

Les éléments ci-dessous sont juste là à titre indicatif afin de voir le rendu des éléments sans style de module. Vous pouvez utiliser cette page pour voir si des effets de bords s'appliquent aux éléments des bases.

Audio

<audio controls="">
  <source src="http://www.w3schools.com/tags/horse.ogg" type="audio/ogg">
  <source src="http://www.w3schools.com/tags/horse.mp3" type="audio/mpeg">  Your browser does not support the audio element.
</audio>

Vidéo

<video width="320" height="240" controls="">
  <source src="http://www.w3schools.com/tags/movie.mp4" type="video/mp4">
  <source src="http://www.w3schools.com/tags/movie.ogg" type="video/ogg">  Your browser does not support the video tag.
</video>

Iframe

<iframe width="640" height="360" src="https://www.youtube.com/embed/bJ9r8LMU9bQ" frameborder="0" allowfullscreen></iframe>

Formulaire

v.0.0.1

Les éléments ci-dessous sont juste là à titre indicatif afin de voir le rendu des éléments sans style de module. Vous pouvez utiliser cette page pour voir si des effets de bords s'appliquent aux éléments des bases.

Vous devez utiliser les styles de composants définis sur cette page : Composants de formulaire.

Legend

The Form:

Text Field:

Disabled Text Field:

Readonly Text Field:

Text Area:

Disabled Text Area:
I'm disabled

Readonly Text Area:
I'm readonly

Select Element:

Disabled Select Element:

Radio Buttons:
Radio 1
Radio 2
Radio 3
Radio Disabled

Checkboxes:
Checkbox 1
Checkbox 2
Checkbox 3
Checkbox Disabled

Password:

File Input:

HTML5-specific Form Elements

Email:

URL:

Telephone:

Number:

Search:

Date:

Time:

Color:

Datalist:

Range:

Output:
42

Progress:

Meter:
350 degrees

<fieldset>
  <legend>Legend</legend>
  <p>The Form:</p>
  <form>
    <p>
      <label for="text_field">Text Field:</label>
      <br>
      <input id="text_field" type="text">
    </p>
    <p>
      <label for="text_field_disabled">Disabled Text Field:</label>
      <br>
      <input id="text_field_disabled" type="text" disabled="" value="I'm disabled">
    </p>
    <p>
      <label for="text_field_readonly">Readonly Text Field:</label>
      <br>
      <input id="text_field_readonly" type="text" readonly="" value="I'm readonly">
    </p>
    <p>
      <label for="text_area">Text Area:</label>
      <br>
      <textarea id="text_area"></textarea>
    </p>
    <p>
      <label for="text_area_disabled">Disabled Text Area:</label>
      <br>
      <textarea id="text_area_disabled" disabled="">I'm disabled</textarea>
    </p>
    <p>
      <label for="text_area">Readonly Text Area:</label>
      <br>
      <textarea id="text_area" readonly="">I'm readonly</textarea>
    </p>
    <p>
      <label for="select_element">Select Element:</label>
      <br>
      <select id="select_element">
        <optgroup label="Option Group 1">
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
        </optgroup>
        <optgroup label="Option Group 2">
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
          <option value="3" disabled="">Disabled Option</option>
        </optgroup>
      </select>
    </p>
    <p>
      <label for="select_element_disabled">Disabled Select Element:</label>
      <br>
      <select id="select_element_disabled" disabled="">
        <option value="1">Unselectable Option</option>
        <option value="2">This option should not even be seen</option>
      </select>
    </p>
    <p>Radio Buttons:
      <br>
      <label>
        <input class="radio" type="radio" name="radio_button" value="radio_1"> Radio 1
      </label>
      <br>
      <label>
        <input class="radio" type="radio" name="radio_button" value="radio_2"> Radio 2
      </label>
      <br>
      <label>
        <input class="radio" type="radio" name="radio_button" value="radio_3"> Radio 3
      </label>
      <br>
      <label>
        <input class="radio" type="radio" name="radio_button" value="radio_4" disabled=""> Radio Disabled
      </label>
      <br>
    </p>
    <p>Checkboxes:
      <br>
      <label>
        <input class="checkbox" type="checkbox" name="checkboxes" value="check_1"> Checkbox 1
      </label>
      <br>
      <label>
        <input class="checkbox" type="checkbox" name="checkboxes" value="check_2"> Checkbox 2
      </label>
      <br>
      <label>
        <input class="checkbox" type="checkbox" name="checkboxes" value="check_3"> Checkbox 3
      </label>
      <br>
      <label>
        <input class="checkbox" type="checkbox" name="checkboxes" value="check_4" disabled=""> Checkbox Disabled
      </label>
      <br>
    </p>
    <p>
      <label for="password">Password:</label>
      <br>
      <input class="password" id="password" type="password">
    </p>
    <p>
      <label for="file">File Input:</label>
      <br>
      <input class="file" id="file" type="file">
    </p>
    <h3>HTML5-specific Form Elements</h3>
    <p>
      <label for="email">Email:</label>
      <br>
      <input id="email" type="email">
    </p>
    <p>
      <label for="url">URL:</label>
      <br>
      <input id="url" type="url">
    </p>
    <p>
      <label for="tel">Telephone:</label>
      <br>
      <input id="tel" type="tel">
    </p>
    <p>
      <label for="number">Number:</label>
      <br>
      <input id="number" type="number" min="0" max="10" step="1" value="5">
    </p>
    <p>
      <label for="search">Search:</label>
      <br>
      <input id="search" type="search">
    </p>
    <p>
      <label for="date">Date:</label>
      <br>
      <input id="date" type="date">
    </p>
    <p>
      <label for="time">Time:</label>
      <br>
      <input id="time" type="time">
    </p>
    <p>
      <label for="color">Color:</label>
      <br>
      <input id="color" type="color">
    </p>
    <p>
      <label for="datalist">Datalist:</label>
      <br>
      <input id="datalist" list="browsers" name="browser" type="datalist">
      <datalist id="browsers">
        <option value="Internet Explorer"></option>
        <option value="Firefox"></option>
        <option value="Chrome"></option>
        <option value="Opera"></option>
        <option value="Safari"></option>
      </datalist>
    </p>
    <p>
      <label for="range">Range:</label>
      <br>
      <input id="range" type="range" name="points" min="1" max="10">
    </p>
    <p>
      <label for="output">Output:</label>
      <br>
      <output id="output" name="result">42</output>
    </p>
    <p>
      <label for="progress">Progress:</label>
      <br>
      <progress id="progress" value="65" max="100"></progress>
    </p>
    <p>
      <label for="meter">Meter:</label>
      <br>
      <meter id="meter" min="200" max="500" value="350">350 degrees</meter>
    </p>
    <p>
      <button>Button Element</button>
    </p>
    <p>
      <input type="reset" value="Clear">
    </p>
    <p>
      <input type="submit" value="Submit">
    </p>
  </form>
</fieldset>

Typographie

v.0.0.1

Les éléments ci-dessous sont juste là à titre indicatif afin de voir le rendu des éléments sans style de module. Vous pouvez utiliser cette page pour voir si des effets de bords s'appliquent aux éléments des bases.

Vous devez utiliser les styles de composants définis sur cette page : Composants de titres.

Balises de titre

Balise H1

Balise H2

Balise H3

Balise H4

Balise H5

Balise H6

<h1>Balise H1</h1>
<h2>Balise H2</h2>
<h3>Balise H3</h2>
<h4>Balise H4</h3>
<h5>Balise H5</h4>
<h6>Balise H6</h5>

Blocs de textes

L'albatros

Souvent, pour s'amuser, les hommes d'équipage prennent des albatros, vastes oiseaux des mers, qui suivent, indolents compagnons de voyage, le navire glissant sur les gouffres amers.

A peine les ont-ils déposés sur les planches, que ces rois de l'azur, maladroits et honteux, laissent piteusement leurs grandes ailes blanches comme des avirons traîner à côté d'eux.

Ce voyageur ailé, comme il est gauche et veule ! Lui, naguère si beau, qu'il est comique et laid ! L'un agace son bec avec un brûle-gueule, L'autre mime, en boitant, l'infirme qui volait !

Le Poète est semblable au prince des nuées qui hante la tempête et se rit de l'archer ; exilé sur le sol au milieu des huées, ses ailes de géant l'empêchent de marcher.

Charles Baudelaire : Les Fleurs du mal

<h1>L'albatros</h1>
<p>Souvent, pour s'amuser, les hommes d'équipage prennent des albatros, vastes oiseaux des mers, qui suivent, indolents compagnons de voyage, le navire glissant sur les gouffres amers.</p>
<p>A peine les ont-ils déposés sur les planches, que ces rois de l'azur, maladroits et honteux, laissent piteusement leurs grandes ailes blanches comme des avirons traîner à côté d'eux.</p>
<p>Ce voyageur ailé, comme il est gauche et veule ! Lui, naguère si beau, qu'il est comique et laid ! L'un agace son bec avec un brûle-gueule, L'autre mime, en boitant, l'infirme qui volait !</p>
<p>Le Poète est semblable au prince des nuées qui hante la tempête et se rit de l'archer ; exilé sur le sol au milieu des huées, ses ailes de géant l'empêchent de marcher.</p>
<p>Charles Baudelaire : <em>Les Fleurs du mal</em></p>

Éléments de typographie

Élement de lien et de lien externe

Élement abbr et abbr avec un attibut title

Élement ACRONYM

Élement b

Élement cite

Élement code

Élement data

Élement ~~del~~

Élement dfn et dfn avec attribut title

Élement em

Élement i

Élement ins

Élement kbd

Élement mark

Élement q

Élement s

Élement samp

Élement small

Élement span

Élement strong

Élement _sub

Élement ^sup

Élement time

Élement u

<p>Élement de <a href="#">lien</a> et de <a href="http://example.com" target="_blank">lien externe</a></p>
<p>Élement <abbr>abbr</abbr> et <abbr title="Abbreviation">abbr</abbr> avec un attibut title</p>
<p>Élement <acronym title="Mon attribut title">ACRONYM</acronym></p>
<p>Élement <b>b</b></p>
<p>Élement <cite>cite</cite></p>
<p>Élement <code>code</code></p>
<p>Élement <data value="666">data</data></p>
<p>Élement <del>del</del></p>
<p>Élement <dfn>dfn</dfn> et <dfn title="Mon attribut title">dfn avec attribut title</dfn></p>
<p>Élement <em>em</em><p>
<p>Élement <i>i</i></p>
<p>Élement <ins>ins</ins></p>
<p>Élement <kbd>kbd</kbd></p>
<p>Élement <mark>mark</mark></p>
<p>Élement <q>q</q></p>
<p>Élement <s>s</s></p>
<p>Élement <samp>samp</samp></p>
<p>Élement <small>small</small></p>
<p>Élement <span>span</span></p>
<p>Élement <strong>strong</strong></p>
<p>Élement <sub>sub</sub></p>
<p>Élement <sup>sup</sup></p>
<p>Élement <time datatime="2005-05-15 19:00">time</time></p>
<p>Élement <u>u</u></p>

Éléments de liste

Liste ordonnée

Élement de liste 1
Élement de liste 2
Élement de liste 3
- Élement de liste 3.1
- Élement de liste 3.2
  - Élement de liste 3.2.1
  - Élement de liste 3.2.2
- Élement de liste 3.3
Élement de liste 4

<ul>
  <li>Élement de liste 1</li>
  <li>Élement de liste 2</li>
  <li>Élement de liste 3
    <ul>
      <li>Élement de liste 3.1</li>
      <li>Élement de liste 3.2
        <ul>
          <li>Élement de liste 3.2.1</li>
          <li>Élement de liste 3.2.2</li>
        </ul>
      </li>
      <li>Élement de liste 3.3</li>
    </ul>
  </li>
  <li>Élement de liste 4</li>
</ul>

Liste non ordonnée

Élement de liste 1
Élement de liste 2
Élement de liste 3
1. Élement de liste 3.1
2. Élement de liste 3.2
  1. Élement de liste 3.2.1
  2. Élement de liste 3.2.2
3. Élement de liste 3.3
Élement de liste 4

<ol>
  <li>Élement de liste 1</li>
  <li>Élement de liste 2</li>
  <li>Élement de liste 3
    <ol>
      <li>Élement de liste 3.1</li>
      <li>Élement de liste 3.2
        <ol>
          <li>Élement de liste 3.2.1</li>
          <li>Élement de liste 3.2.2</li>
        </ol>
      </li>
      <li>Élement de liste 3.3</li>
    </ol>
  </li>
  <li>Élement de liste 4</li>
</ol>

Liste de définition

Définition 1: Description de la défnition 1
Définition 2: Description de la défnition 2

<dl>
  <dt>Définition 1</dt>
  <dd>Description de la défnition 1</dd>
  <dt>Définition 2</dt>
  <dd>Description de la défnition 2</dd>
</dl>

Tableau

Élement caption
Table Header 1	Table Header 2	Table Header 3
Division 1	Division 2	Division 3
Division 1	Division 2	Division 3
Division 1	Division 2	Division 3
A row with a cell spanning all 3 columns
Table Footer 1	Table Footer 2	Table Footer 3

<table cellspacing="0" cellpadding="0">
  <caption>Élement caption</caption>
  <thead>
    <tr>
      <th>Table Header 1</th>
      <th>Table Header 2</th>
      <th>Table Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Division 1</td>
      <td>Division 2</td>
      <td>Division 3</td>
    </tr>
    <tr class="even">
      <td>Division 1</td>
      <td>Division 2</td>
      <td>Division 3</td>
    </tr>
    <tr>
      <td>Division 1</td>
      <td>Division 2</td>
      <td>Division 3</td>
    </tr>
    <tr>
      <td colspan="3">A row with a cell spanning all 3 columns</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th>Table Footer 1</th>
      <th>Table Footer 2</th>
      <th>Table Footer 3</th>
    </tr>
  </tfoot>
</table>

Avatar

Bouton

Style de base

Style secondaire

Style ghost

Style ghostAlphaDark

Style ghostAlphaLight

Style ghostAlternate

État désactivé

Bouton pleine largeur

Bouton avec icône

Bouton avec icône uniquement

Bouton avec icône et texte

Boutons circulaires

Dropdown

Dropdown avec texte

Dropdown avec avatar

Dropdown avec contenu aligné à gauche

Formulaire

Formulaire type

Élément sans label

Inputs

Input text

Input radio

Input radio inline

Input checkbox

Input radio toggle

Input avec icône

État d'input

État : disabled

État : succés

État : erreur

Formulaire en grille

Grille

Header

Header (structure)

Header (exemple complexe)

Lien

Lien par défaut

Lien avec icône

Lien désactivé

Lien sur fond gris

Listes

Reset de liste

Liste inline

Menu

Pastille de notification

Pastille de notifaction seule

Pastille de notifaction dans un bouton

Sidebar

Titre

Titre niveau 1

Indicateurs 25%

Titre niveau 2

Caraibes_FR75_Fidélité_Offre_Juin_2016

Background color

Couleur : Light

Couleur : Clr0

Couleur : Clr1

Couleur : Clr2

Couleur : Clr3

Couleur : Clr4

Layout

Show / hide

Espacement

Définition :

Margin

Padding

Texte

Modification de style

Modification de taille

Text Color

Couleur : Light

Couleur : Clr0

Couleur : Clr1

Couleur : Clr2

Couleur : Clr3

Couleur : Clr4

Taille

Embed

Indicateurs 25_%