Styleguide

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

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

  • v.0.0.1

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

  • v.0.0.1
  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

  • v.0.0.1

É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

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