Categoria: Sviluppo
Generatore di scala di spaziature fluida
Costruisci un insieme di token di spaziatura basati su clamp()
Indica una dimensione di base per un viewport stretto e uno largo più un rapporto di scala, e ottieni un intero set di custom property --space-*, ciascuna un proprio clamp() che scala in modo fluido tra i due, pronto da incollare in :root.
| Token | Output |
|---|---|
| --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);
}Ogni token è un clamp() a sé, quindi ogni passo scala in modo fluido tra le due larghezze di viewport.
Tutto ciò che c'è in questa pagina viene elaborato nel tuo browser. Niente viene caricato.
A cosa serve
Un singolo clamp() fluido è utile per un valore, ma la maggior parte dei layout ha bisogno di un'intera scala di passi di spaziatura coerenti, e scrivere a mano un clamp() per ciascuno moltiplica gli stessi errori aritmetici su ogni token. Questo strumento prende una dimensione di base a ciascun estremo del tuo intervallo di viewport e un rapporto, poi genera una scala simmetrica di token intorno a un passo centrale allo stesso modo in cui si costruisce una scala tipografica, così l'intero set resta proporzionalmente coerente al variare del viewport.
Come si usa
- Imposta la dimensione di base alle larghezze di viewport stretta e larga.
- Imposta il rapporto di scala tra i passi.
- Copia il blocco :root generato con le custom property --space-*.
Privacy
Questo strumento funziona interamente nel tuo browser. Quello che inserisci non viene mai caricato, salvato o condiviso: chiudendo la scheda sparisce.
Domande frequenti
- Perché nove passi?
- Nove dà quattro passi sotto e quattro sopra un valore centrale, il che copre la maggior parte dei layout, dagli spazi inline ravvicinati alle grandi spaziature tra sezioni, senza dover inventare altri nomi in seguito.
- Viene inviato qualcosa a un server?
- No. Ogni clamp() è calcolato nella pagina a partire dai numeri che digiti, ed è per questo che la tabella e l'output CSS si aggiornano all'istante.
- Posso usarli insieme al Generatore di CSS clamp?
- Sì. Questo strumento costruisce un'intera scala da un unico set di valori; il Generatore di CSS clamp serve per un singolo valore occasionale, come una dimensione di titolo, usando la stessa matematica di fondo.