Un sistema de layout con CSS Grid y columnas nombradas
Cómo construir un sistema de anchos de contenido flexible usando CSS Grid con líneas nombradas. El patrón que uso en todos mis proyectos.
11 artículos con esta etiqueta.
Cómo construir un sistema de anchos de contenido flexible usando CSS Grid con líneas nombradas. El patrón que uso en todos mis proyectos.
Desglose línea por línea del patrón CSS visually-hidden: por qué cada propiedad existe, qué problema resuelve, y por qué no puedes simplemente usar display:none.
Cómo usar la media query prefers-reduced-motion para desactivar animaciones cuando el usuario lo ha pedido. Con ejemplos prácticos y la filosofía detrás.
Casos prácticos del selector :has() de CSS: formularios reactivos, navegación contextual y layouts que responden al contenido. Sin JavaScript y con progressive enhancement.
Cómo usar una variable CSS alimentada por el scroll del navegador para crear animaciones complejas sin librerías. La técnica detrás de la versión anterior de paigar.es.
Cómo crear una barra de progreso de lectura sin una sola línea de JavaScript, desde el truco clásico del gradiente diagonal hasta scroll-driven animations.
Cómo construir un sistema de temas sin frameworks ni JavaScript innecesario. Solo custom properties, un atributo data y un par de líneas de JS.
Cómo usar clamp() para crear una escala tipográfica que se adapta al viewport sin necesidad de breakpoints. Con ejemplos prácticos y la lógica detrás de los valores.
Las custom properties de CSS hacen innecesario Sass para la mayoría de proyectos. Comparación práctica con ejemplos de lo que puedes hacer con CSS nativo que antes requería un preprocesador.
Estrategias para usar tipografías web sin penalizar el rendimiento. font-display, preload, subsetting y cuándo usar system fonts.
Cómo y por qué he reconstruido mi web personal desde cero con Eleventy, CSS puro y muy pocas dependencias.