Chuleta de Diseño de Interfaces Web

Flexbox

Grid

.layout {  display: grid;  grid-template-columns: 240px 1fr;  grid-template-areas: "cab cab" "menu main" "pie pie";  gap: 1rem;}.cabecera { grid-area: cab; }.tarjetas {  display: grid;  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));}.destacada { grid-column: span 2; }

Responsive

/* móvil primero */.menu { display: none; }@media (min-width: 48rem) { .menu { display: flex; } }h1 { font-size: clamp(1.5rem, 4vw, 3rem); }img { max-width: 100%; height: auto; }.tarjeta-contenedor { container-type: inline-size; }@container (min-width: 400px) { .tarjeta { display: flex; } }

Necesita <meta name="viewport" content="width=device-width, initial-scale=1"> en el HTML. Unidades: rem (raíz), em (padre), % (contenedor), vw/vh (ventana), fr (fracción de grid).

Variables y Sass

:root { --primario: #2563eb; --espacio: 1rem; }.boton { background: var(--primario); padding: var(--espacio); } $acento: #f59e0b;$breakpoints: (md: 48rem, lg: 64rem);@mixin desde($bp) { @media (min-width: map-get($breakpoints, $bp)) { @content; } }.tarjeta {  padding: 1rem;  &__titulo { font-weight: 700; }  &--destacada { border: 2px solid $acento; }  &:hover { transform: translateY(-2px); }  @include desde(md) { padding: 2rem; }}

Parciales _variables.scss con @use "variables" as v; @extend %placeholder; funciones como color.adjust.

BEM

Transiciones y animaciones

.boton { transition: transform .2s ease, background-color .2s; }.boton:hover { transform: scale(1.05); }@keyframes aparecer {  from { opacity: 0; transform: translateY(1rem); }  to   { opacity: 1; transform: none; }}.aviso { animation: aparecer .4s ease-out both; }@media (prefers-reduced-motion: reduce) {  * { animation: none !important; transition: none !important; }}

Anima transform y opacity: no recalculan la maquetación y van fluidos.

Multimedia

Accesibilidad (WCAG 2.2)

Usabilidad

Diseño visual