DoDont
Le couple "Faire / Ne pas faire" : la bonne façon et le mauvais côté côte à côte, chacun avec son pourquoi.
Sur cette page
Playground
À faire
Verbe et objet.
À éviter
« OK » ne dit pas quoi.
Fond
<div class="pair feitio-dodont"><div class="do"><p class="verdict"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-check"></use></svg>À faire</p><div class="demo"><button class="feitio-button" type="button" data-variant="primary">Enregistrer</button></div><p class="why">Verbe et objet.</p></div><div class="dont"><p class="verdict"><svg class="feitio-icon" aria-hidden="true"><use href="/feitio/icons/sprite.svg#feitio-close"></use></svg>À éviter</p><div class="demo"><button class="feitio-button" type="button" data-variant="primary">OK</button></div><p class="why">« OK » ne dit pas quoi.</p></div></div>Quand l'utiliser
- Pour chaque règle qui devient plus claire lorsque vous voyez l'erreur : dans la documentation, dans les directives.
Quand ne pas l'utiliser
- Pour montrer des variations qui sont toutes acceptables : Exemple.
Exemples
Do
Verbe et objet.
Don’t
"OK" ne dit pas quoi.
Une paire
Le bon à gauche, en mousse ; le mauvais à droite, en vin. Sous chacun, le pourquoi en une seule phrase.
Afficher le code
<div class="feitio-dodont">
<div class="do"><p class="verdict">…Faça assim</p><div class="demo">…</div><p class="why">Verbo e objeto.</p></div>
<div class="dont"><p class="verdict">…Não faça</p><div class="demo">…</div><p class="why">"OK" não diz o quê.</p></div>
</div>Règles
- Le mauvais est une vraie erreur qui se produit, pas un caricature.
- Le pourquoi tient dans une seule phrase.
- Le verdict a icône et mot, pas juste la couleur.
Attributs
| Attribut | Valeurs | Pour quoi |
|---|---|---|
class="feitio-dodont" | autour | Les deux côte à côte ; sur mobile, empilés. |
class="do", "dont" | chaque côté | Mousse pour le droit, vin pour le tort. |
class="verdict", "demo", "why" | les parties | Le verdict, l'exemple et le pourquoi. |