DoDont
The "Do / Don’t" pair: the right way and the wrong way side by side, each with its why.
On this page
Playground
Do
Verb and object.
Don’t
"OK" does not say what.
Background
<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>Do</p><div class="demo"><button class="feitio-button" type="button" data-variant="primary">Save changes</button></div><p class="why">Verb and object.</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>Don’t</p><div class="demo"><button class="feitio-button" type="button" data-variant="primary">OK</button></div><p class="why">"OK" does not say what.</p></div></div>When to use
- For every rule that is clearer when you see the mistake: in documentation, in guidelines.
When not to use
- To show variations that are all right: Example.
Examples
Do
Verb and object.
Don’t
"OK" does not say what.
A pair
The right one on the left, in moss; the wrong one on the right, in wine. Under each, the why in one sentence.
Show 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>Rules
- The wrong one is a real mistake that happens, not a caricature.
- The why fits in one sentence.
- The verdict has icon and word, not just color.
Attributes
| Attribute | Values | What for |
|---|---|---|
class="feitio-dodont" | around | The two side by side; on mobile, stacked. |
class="do", "dont" | each side | Moss for right, wine for wrong. |
class="verdict", "demo", "why" | the parts | The verdict, the example and the why. |