Categoría: Desarrollo
Generador de escala de espaciado fluido
Crea un conjunto de tokens de espaciado basados en clamp()
Indica un tamaño base de espaciado en un viewport estrecho y en uno ancho más un ratio de escala, y obtén un conjunto completo de propiedades personalizadas --space-*, cada una con su propio clamp() que escala con suavidad entre ambos, listo para pegar en :root.
| Token | Salida |
|---|---|
| --space-3xs | clamp(0.0988rem, 0.0601rem + 0.1718vw, 0.1975rem) |
| --space-2xs | clamp(0.1481rem, 0.0902rem + 0.2576vw, 0.2963rem) |
| --space-xs | clamp(0.2222rem, 0.1353rem + 0.3865vw, 0.4444rem) |
| --space-sm | clamp(0.3333rem, 0.2029rem + 0.5797vw, 0.6667rem) |
| --space-md | clamp(0.5rem, 0.3043rem + 0.8696vw, 1rem) |
| --space-lg | clamp(0.75rem, 0.4565rem + 1.3043vw, 1.5rem) |
| --space-xl | clamp(1.125rem, 0.6848rem + 1.9565vw, 2.25rem) |
| --space-2xl | clamp(1.6875rem, 1.0272rem + 2.9348vw, 3.375rem) |
| --space-3xl | clamp(2.5313rem, 1.5408rem + 4.4022vw, 5.0625rem) |
:root {
--space-3xs: clamp(0.0988rem, 0.0601rem + 0.1718vw, 0.1975rem);
--space-2xs: clamp(0.1481rem, 0.0902rem + 0.2576vw, 0.2963rem);
--space-xs: clamp(0.2222rem, 0.1353rem + 0.3865vw, 0.4444rem);
--space-sm: clamp(0.3333rem, 0.2029rem + 0.5797vw, 0.6667rem);
--space-md: clamp(0.5rem, 0.3043rem + 0.8696vw, 1rem);
--space-lg: clamp(0.75rem, 0.4565rem + 1.3043vw, 1.5rem);
--space-xl: clamp(1.125rem, 0.6848rem + 1.9565vw, 2.25rem);
--space-2xl: clamp(1.6875rem, 1.0272rem + 2.9348vw, 3.375rem);
--space-3xl: clamp(2.5313rem, 1.5408rem + 4.4022vw, 5.0625rem);
}Cada token tiene su propio clamp(), así que cada paso escala con suavidad entre los dos anchos de viewport.
Todo lo de esta página se procesa en tu navegador. No se sube nada.
Para qué sirve
Un solo clamp() fluido es útil para un valor, pero la mayoría de los layouts necesitan toda una escala de pasos de espaciado consistentes, y escribir a mano un clamp() para cada uno multiplica los mismos errores aritméticos en cada token. Esta herramienta toma un tamaño base en cada extremo de tu rango de viewport y un ratio, y genera una escala simétrica de tokens alrededor de un paso central de la misma forma en que se construye una escala tipográfica, de modo que todo el conjunto se mantiene proporcionalmente consistente a medida que cambia el viewport.
Cómo se usa
- Define el tamaño base de espaciado en tus anchos de viewport estrecho y ancho.
- Define el ratio de escala entre pasos.
- Copia el bloque :root generado con las propiedades personalizadas --space-*.
Privacidad
Esta herramienta funciona íntegramente en tu navegador. Lo que introduces nunca se sube, se guarda ni se comparte: al cerrar la pestaña desaparece.
Preguntas frecuentes
- ¿Por qué nueve pasos?
- Nueve da cuatro pasos por debajo y por encima de un valor central, lo que cubre la mayoría de los layouts, desde huecos en línea ajustados hasta grandes espaciados de sección, sin necesidad de inventar más nombres después.
- ¿Se envía algo a un servidor?
- No. Cada clamp() se calcula en la página a partir de los números que escribes, por eso la tabla y el CSS resultante se actualizan al instante.
- ¿Puedo usar esto junto con el Generador de CSS clamp?
- Sí. Esta herramienta construye toda una escala a partir de un único conjunto de datos; el Generador de CSS clamp sirve para un valor puntual como el tamaño de un titular, usando las mismas matemáticas de base.