Ayudantes CSS de POM

POM Theme incluye su capa de utilidades para la construcción del sitio además del subconjunto de utilidades/rejilla de Bootstrap incluido por el tema. Usa las utilidades para decisiones de diseño pequeñas y explícitas; usa una clase de componente con nombre cuando varias declaraciones describan un único diseño reutilizable.

Los administradores que necesiten reemplazar intencionadamente el componente Helpers generado pueden usar Settings → POM Theme → Advanced → Custom CSS → Component CSS → Helpers and utilities. Usa el campo global Custom CSS para pequeñas adiciones o anulaciones aisladas. Las reglas de accesibilidad de screen-reader-text pertenecen al componente independiente Visibility and display utilities y deben preservarse al reemplazarlo; consulta Display and visibility helpers.

Puntos de ruptura

Las utilidades responsive de estilo Bootstrap se aplican desde el ancho mínimo indicado en adelante.

Temas

• Ayudantes de espaciado y separación
• Ayudantes de rejilla y columnas
• Ayudantes de visualización y visibilidad
• Ayudantes de alineación
• Variantes responsive

Ejemplos específicos de POM

<div class="web-gap-2" aria-hidden="true"></div>
<img class="web-img-fit rounded" alt="…" src="…">
<section class="web-full-height">…</section>

Los elementos de espaciado fijos disponibles son web-gap-075, web-gap-125, web-gap-2, web-gap-3, web-gap-4, web-gap-8 y web-gap-12, que representan los mismos valores en rem. Prefiere los controles de espaciado de fila/columna o el gap de CSS para el diseño estructural: el ayudante de espaciado resulta más útil para marcado simple heredado o de plantilla.

Otros pequeños ayudantes incluyen hidden, clear, zi-0 hasta zi-5, zi-999, circle, rounded, web-img-fit, web-img-stretch, web-full-height, web-viewport, bg-transparent, dib, din y db.

Las utilidades de paleta están disponibles como text-main-1 hasta text-main-15, bg-main-1 hasta bg-main-15 y border-main-1 hasta border-main-15. Resuelven la propiedad --color-main-* correspondiente generada en Base and body, en lugar de incrustar una segunda copia de cada valor hexadecimal. Un reemplazo completo de Base debe conservar todas las propiedades de paleta requeridas por las utilidades usadas en el sitio.

No asumas que todas las utilidades de una versión más reciente de Bootstrap existen. Este capítulo documenta las utilidades incluidas por POM, no el framework externo completo.