DoDont
El par "Hacer / No hacer": la forma correcta y el lado incorrecto al lado, cada uno con su por qué.
En esta página
Playground
Hazlo así
Verbo y objeto.
No lo hagas
"OK" no dice qué.
Fondo
<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>Hazlo así</p><div class="demo"><button class="feitio-button" type="button" data-variant="primary">Guardar cambios</button></div><p class="why">Verbo y objeto.</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>No lo hagas</p><div class="demo"><button class="feitio-button" type="button" data-variant="primary">OK</button></div><p class="why">"OK" no dice qué.</p></div></div>Cuándo usarlo
- Para cada regla que es más clara cuando ves el error: en la documentación, en las guías.
Cuándo no usarlo
- Para mostrar variaciones que están bien: Ejemplo.
Ejemplos
Do
Verbo y objeto.
Don’t
"OK" no dice qué.
Un par
El correcto a la izquierda, en musgo; el incorrecto a la derecha, en vino. Debajo de cada uno, el porqué en una sola frase.
Mostrar código
<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>Reglas
- El incorrecto es un error real que ocurre, no una caricatura.
- El porqué cabe en una sola frase.
- La sentencia tiene icono y palabra, no solo color.
Atributos
| Atributo | Valores | Para qué sirve |
|---|---|---|
class="feitio-dodont" | alrededor | Los dos lado a lado; en móvil, apilados. |
class="do", "dont" | cada lado | Moho para la derecha, vino para lo incorrecto. |
class="verdict", "demo", "why" | las partes | El veredicto, el ejemplo y el porqué. |