Styleguide

Avatar

Ajouté à la version :

Changelog:

  • 0.0.1: Ajout du composant

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
Laurent Sutterlity 
<div class="avatar">
  <div class="avatar-thumb">
    <img src="http://cabestan-styleguide-stg.s3-website.eu-central-1.amazonaws.com/0.1.0/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).

Laurent Sutterlity 
<div class="avatar">
  <div class="avatar-thumb">
    <img src="http://cabestan-styleguide-stg.s3-website.eu-central-1.amazonaws.com/0.1.0/assets/img/placeholder/avatar@1x.jpg"
         srcset="http://cabestan-styleguide-stg.s3-website.eu-central-1.amazonaws.com/0.1.0/assets/img/placeholder/avatar@1x.jpg 1x,
                 http://cabestan-styleguide-stg.s3-website.eu-central-1.amazonaws.com/0.1.0/assets/img/placeholder/avatar@2x.jpg 2x"
         width="40" height="40" alt="Laurent Sutterlity" />
  </div>
</div>

Bouton

Ajouté à la version :
Mises à jour :

Changelog:

  • 0.1.0: Ajout du Style tertiaire, du style neutre et de l'état actif
  • 0.0.1: Ajout du composant

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 tertiaire

Le style tertiaire convient pour les boutons d'action secondaire sur fond noir, rouge et bleu.

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

Ajouter aussi une classe utilitaire de couleurs à l'élément parent afin de faire hériter la couleur de texte de l'utilitaire au composant.

Quitter 
<div class="u-bkgClr0Dark u-txtClr0Dark u-paM">
  <a class="button button--tertiary" href="#" role="button">Quitter</a>
  <button class="button button--tertiary">Quitter</button>
  <input class="button button--tertiary" type="submit" value="Quitter">
</div>
Quitter 
<div class="u-bkgClr1 u-txtClr1 u-paM">
  <a class="button button--tertiary" href="#" role="button">Quitter</a>
  <button class="button button--tertiary">Quitter</button>
  <input class="button button--tertiary" type="submit" value="Quitter">
</div>
Quitter 
<div class="u-bkgClr3 u-txtClr3 u-paM">
  <a class="button button--tertiary" href="#" role="button">Quitter</a>
  <button class="button button--tertiary">Quitter</button>
  <input class="button button--tertiary" type="submit" value="Quitter">
</div>

Style neutre

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

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

Quitter 
<a class="button button--neutral" href="#" role="button">Quitter</a>
<button class="button button--neutral">Quitter</button>
<input class="button button--neutral" 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 actif

Ajouter la classe d'état .is-active sur le composant .button afin de modifier son apparence.

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

<div class="u-bkgClr0Dark u-txtClr0Dark u-paM u-mtM">
  <button class="button button--tertiary is-active">Quitter</button>
   <a class="button button--ghostAlphaLight is-active" href="#" role="button">Connexion</a>
</div>

<div class="u-bkgClr1 u-paM">
  <a class="button button--ghostAlphaDark is-active" href="#" role="button">Connexion</a>
</div>

État désactivé

  • <a> : Ajouter la classe d'état .is-disabled
  • <input /> ou <button /> : Ajouter l'attribut disabled
Sauvegarder
Connexion
Connexion 
<a class="button is-disabled" href="#" role="button">Sauvegarder</a>
<button class="button button--secondary" disabled>Quitter</button>
<button class="button button--neutral" 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-bkgClr0Dark u-txtClr0Dark u-paM u-mtM">
  <button class="button button--tertiary" disabled>Quitter</button>
  <a class="button button--ghostAlphaLight is-disabled" href="#" role="button">Connexion</a>
</div>

<div class="u-bkgClr1 u-paM">
  <a class="button button--ghostAlphaDark is-disabled" href="#" role="button">Connexion</a>
</div>

<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>

Boutons circulaires

Ajouté à la version :

Changelog:

  • 0.0.1: Ajout du composant

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>

Bouton avec icône

Ajouté à la version :

Changelog:

  • 0.0.1: Ajout du composant

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>
Ajouté à la version :
Mises à jour :

Changelog:

  • 0.1.0: Mise à jour de la documentation, plus de data-attributes et de comportement js
  • 0.0.1: Ajout du composant

Les éléments dropdown et dropdown-content prennent la classe is-open lors de l'ouverture du dropdown. Les styles inline sont là pour les besoins du styleguide, et ne sont pas obligatoires.

L'élément dropdown-content peut également tout à fait être positionné dans le et non dans son parent.

Toute l'équipe 
<div class="dropdown is-open">
  <div class="dropdown-button" role="button">
    Toute l'équipe
    <span class="icon icon--down"></span>
  </div>
  <ul class="dropdown-content is-open" style="position: relative; margin-top: 10px;">
    <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>
Laurent sutterlity 
<div class="dropdown is-open">
  <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 is-open" style="position: relative; margin-top: 10px;">
    <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>
Toute l'équipe 
<div class="u-bkgClr1 u-paM">
  <div class="dropdown is-open">
    <div class="dropdown-button dropdown-button--light" role="button">
      Toute l'équipe
      <span class="icon icon--down"></span>
    </div>
    <ul class="dropdown-content is-open" style="position: relative; margin-top: 10px;">
      <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>

Formulaire

Ajouté à la version :

Changelog:

  • 0.0.1: Ajout du composant

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

mot de passe oublié ?

<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.

<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

Ajouté à la version :
Mises à jour :

Changelog:

  • 0.1.0: Bugfixes (background-color sur inputRadio / inputCheckbox)
  • 0.0.1: Ajout du composant

Input text

<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

<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

<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

<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

<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

Ajouté à la version :

Changelog:

  • 0.0.1: Ajout du composant
  1. Ajouter la classe .form-group-input--icon à l'élément .form-group-input.
  2. Ajouter un composant d'icône dans .form-group-input
<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

Ajouté à la version :

Changelog:

  • 0.0.1: Ajout du composant

État : disabled

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

Fake label

<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.

Shit, that label's taken. Try another.

Fake label

<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.

Shit, that label's taken. Try another.

Fake label

<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

Ajouté à la version :

Changelog:

  • 0.0.1: Ajout du composant

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

Ajouté à la version :

Changelog:

  • 0.0.1: Ajout du composant

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>
Ajouté à la version :
Mises à jour :

Changelog:

  • 0.1.0: Passage en position absolute, fix min-width
  • 0.0.1: Ajout du composant

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://cabestan-styleguide-stg.s3-website.eu-central-1.amazonaws.com/0.1.0/assets/img/placeholder/avatar@1x.jpg 1x, http://cabestan-styleguide-stg.s3-website.eu-central-1.amazonaws.com/0.1.0/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

Ajouté à la version :

Changelog:

  • 0.0.1: Ajout du composant

Lien par défaut

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

Partager
<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
Partager
<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.

Partager
<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.

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

Listes

Ajouté à la version :
Mises à jour :

Changelog:

  • 0.1.0: Bugfix list-inline
  • 0.0.1: Ajout du composant

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>
Ajouté à la version :
Mises à jour :

Changelog:

  • 0.1.0: Ajout du menu vertical
  • 0.0.1: Ajout du composant

Composant de base

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>

Composant de menu vertical

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

<nav class="menu menu--vertical">
  <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

Ajouté à la version :

Changelog:

  • 0.0.1: Ajout du composant

Pastille de notification seule

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

Pastille de notification dans un bouton

<button class="button button--circular button--ghostAlternate icon icon--notif">
  <div class="notifNumber">88</div>
  <span>Menu</span>
</button>
Ajouté à la version :
Mises à jour :

Changelog:

  • 0.1.0: Fix z-index
  • 0.0.1: Ajout du composant
Cabestan
Aide 
<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">Journey</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">Campagnes</div>
    </a>
    <a class="sidebar-link" href="#">
      <div class="sidebar-link-icon icon icon--content"></div>
      <div class="sidebar-link-legend">Contenus</div>
    </a>
    <a class="sidebar-link" href="#">
      <div class="sidebar-link-icon icon icon--report"></div>
      <div class="sidebar-link-legend">Performances</div>
    </a>
    <a class="sidebar-link" href="#">
      <div class="sidebar-link-icon icon icon--data"></div>
      <div class="sidebar-link-legend">Data</div>
    </a>
  </nav>
  <div class="sidebar-footer">
    <a class="sidebar-footer-link" href="#">
      <div class="icon icon--circleInfos"></div><span class="u-visuallyHidden">Aide</span></a>
  </div>
</div>

Titre

Ajouté à la version :

Changelog:

  • 0.0.1: Ajout du composant

Titre niveau 1

Style pour les grands titres et les chiffres.

Indicateurs 25%

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

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

Ajouté à la version :

Changelog:

  • 0.0.1: Ajout du composant

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

Ajouté à la version :

Changelog:

  • 0.0.1: Ajout du composant

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

Ajouté à la version :

Changelog:

  • 0.0.1: Ajout du composant

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

Ajouté à la version :

Changelog:

  • 0.0.1: Ajout du composant

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

Ajouté à la version :

Changelog:

  • 0.0.1: Ajout du composant

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

Ajouté à la version :

Changelog:

  • 0.0.1: Ajout du composant

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

Ajouté à la version :

Changelog:

  • 0.0.1: Ajout du composant

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

Ajouté à la version :

Changelog:

  • 0.0.1: Ajout du composant

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

Ajouté à la version :

Changelog:

  • 0.0.1: Ajout du composant

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:









Radio Buttons:




Checkboxes:






HTML5-specific Form Elements












42



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

Ajouté à la version :

Changelog:

  • 0.0.1: Ajout du composant

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

É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

  1. Élement de liste 1
  2. Élement de liste 2
  3. É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
  4. É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>

Icones

Ajouté à la version :
Mises à jour :

Changelog:

  • 0.1.0: Ajout des icones circleAlert, circleCheck, circleClose, circleInProgress, circleInfos, circlePause, clock, code, comment, desktop, dmp, downAlt, extend, fatArrowTop, import, layoutBlocks, layoutList, menu, mobile, settings, tablet, world
  • 0.0.1: Ajout du composant

Icones disponibles :

<span class="icon icon--add"></span>

<span class="icon icon--audience"></span>

<span class="icon icon--camp"></span>

<span class="icon icon--circleAlert"></span>

<span class="icon icon--circleCheck"></span>

<span class="icon icon--circleClose"></span>

<span class="icon icon--circleInProgress"></span>

<span class="icon icon--circleInfos"></span>

<span class="icon icon--circlePause"></span>

<span class="icon icon--clock"></span>

<span class="icon icon--close"></span>

<span class="icon icon--code"></span>

<span class="icon icon--comment"></span>

<span class="icon icon--content"></span>

<span class="icon icon--data"></span>

<span class="icon icon--desktop"></span>

<span class="icon icon--disconnect"></span>

<span class="icon icon--dmp"></span>

<span class="icon icon--down"></span>

<span class="icon icon--downAlt"></span>

<span class="icon icon--duplicate"></span>

<span class="icon icon--extend"></span>

<span class="icon icon--fatArrowTop"></span>

<span class="icon icon--folder"></span>

<span class="icon icon--home"></span>

<span class="icon icon--import"></span>

<span class="icon icon--journey"></span>

<span class="icon icon--layoutBlocks"></span>

<span class="icon icon--layoutList"></span>

<span class="icon icon--menu"></span>

<span class="icon icon--mobile"></span>

<span class="icon icon--next"></span>

<span class="icon icon--notif"></span>

<span class="icon icon--prev"></span>

<span class="icon icon--report"></span>

<span class="icon icon--search"></span>

<span class="icon icon--settings"></span>

<span class="icon icon--share"></span>

<span class="icon icon--tablet"></span>

<span class="icon icon--trash"></span>

<span class="icon icon--up"></span>

<span class="icon icon--world"></span>

Modifiers :

La classe .icon--mLeft permet d'ajouter une marge à gauche d'une icône.

<span class="icon icon--add icon--mLeft"></span>
<span class="icon icon--trash icon--mLeft"></span>

La classe .icon--mRight permet d'ajouter une marge à droite d'une icône.

<span class="icon icon--add icon--mRight"></span>
<span class="icon icon--trash icon--mRight"></span>