Categoria: Desenvolvimento
Gerador de Escala de Espaçamento Fluido
Monte um conjunto de tokens de espaçamento baseados em clamp()
Informe um tamanho base de espaçamento em uma viewport estreita e outra larga, mais uma proporção de escala, e receba um conjunto completo de propriedades customizadas --space-*, cada uma seu próprio clamp() que escala suavemente entre as duas, prontas para colar em :root.
| Token | Saída |
|---|---|
| --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 é seu próprio clamp(), então cada passo escala suavemente entre as duas larguras de viewport.
Tudo nesta página é processado no seu navegador. Nada é enviado.
Para que serve
Um único clamp() fluido é útil para um valor, mas a maioria dos layouts precisa de uma escala inteira de passos de espaçamento consistentes, e escrever um clamp() à mão para cada um multiplica os mesmos erros de aritmética em todos os tokens. Esta ferramenta parte de um tamanho base em cada extremidade da sua faixa de viewport e uma proporção, depois gera uma escala simétrica de tokens em torno de um passo intermediário, da mesma forma que uma escala tipográfica é construída, então o conjunto inteiro permanece proporcionalmente consistente conforme a viewport muda.
Como usar
- Defina o tamanho base de espaçamento nas larguras de viewport estreita e larga.
- Defina a proporção de escala entre os passos.
- Copie o bloco :root gerado com as propriedades customizadas --space-*.
Privacidade
Esta ferramenta roda inteiramente no seu navegador. O que você digita nunca é enviado, salvo ou compartilhado — fechar a aba já remove tudo.
Perguntas frequentes
- Por que nove passos?
- Nove dá quatro passos abaixo e acima de um valor intermediário, o que cobre a maioria dos layouts, de espaçamentos internos apertados a grandes espaçamentos de seção, sem precisar inventar nomes extras depois.
- Algo é enviado a um servidor?
- Não. Cada clamp() é calculado na página a partir dos números que você digita, por isso a tabela e a saída CSS se atualizam na hora.
- Posso usar isso junto com o Gerador de CSS clamp?
- Sim. Esta ferramenta constrói uma escala inteira a partir de um conjunto de entradas; o Gerador de CSS clamp serve para um único valor pontual, como o tamanho de um título, usando a mesma matemática de base.