In questo post vengono messe in evidenza alcune efficaci linee di CSS che svolgono alcune attività molto impegnative e ti aiutano a creare layout moderni e solidi.
I layout CSS moderni consentono agli sviluppatori di scrivere regole di stile davvero significative e solide con poche battute. La presentazione precedente e il post successivo esaminano 10 potenti linee di CSS che svolgono un lavoro pesante.
Per seguire la procedura o provare queste demo autonomamente, dai un'occhiata al codice Glitch incorporato sopra o visita la pagina 1linelayouts.glitch.me.
01. Super centrato: place-items: center
Per il primo layout "a riga singola", risolviamo il più grande mistero del mondo CSS: il centratura. Ti garantisco che è più facile di quanto pensi con place-items: center.
Specifica innanzitutto grid come metodo display, quindi scrivi place-items: center nello stesso elemento. place-items è una scorciatoia per impostare contemporaneamente align-items e justify-items. Se il criterio viene impostato su center, align-items e justify-items sono entrambi impostati su center.
.parent {
display: grid;
place-items: center;
}
In questo modo i contenuti sono perfettamente centrati all'interno del livello principale, a prescindere dalle dimensioni intrinseche.
02. The Deconstructed Pancake: flex: <grow> <shrink> <baseWidth>
Poi abbiamo la frittella destrutturata. Questo è un layout comune per i siti di marketing, ad esempio, che può avere una riga di 3 articoli, in genere con un'immagine, un titolo e del testo, che descrive alcune caratteristiche di un prodotto. Sui dispositivi mobili, vogliamo che si impilino bene e si espandano man mano che aumentiamo le dimensioni dello schermo.
Se utilizzi Flexbox per questo effetto, non avrai bisogno di query supporti per regolare il posizionamento di questi elementi quando lo schermo viene ridimensionato.
La forma abbreviata flex sta per: flex: <flex-grow> <flex-shrink> <flex-basis>.
Per questo motivo, se vuoi che le caselle vengano completate in base alle dimensioni <flex-basis>, si riducano per le dimensioni più piccole, ma non si allarghino per riempire eventuali spazi aggiuntivi, scrivi: flex: 0 1 <flex-basis>. In questo caso, <flex-basis> è 150px, quindi il codice sarà simile al seguente:
.parent {
display: flex;
}
.child {
flex: 0 1 150px;
}
Se vuoi che le caselle si allunghino e riempiano lo spazio quando si inseriscono nella riga successiva, imposta <flex-grow> su 1, in modo che il risultato sia il seguente:
.parent {
display: flex;
}
.child {
flex: 1 1 150px;
}
Ora, quando aumenti o diminuisci le dimensioni dello schermo, questi elementi flessibili si riducono e si espandono.
03. La barra laterale dice: grid-template-columns: minmax(<min>, <max>) …)
Questa demo sfrutta la funzione minmax per i layout della griglia. Qui stiamo impostando le dimensioni minime della barra laterale su 150px, ma su schermi più grandi, consentendo di estenderla fino a 25%. La barra laterale occuperà sempre 25% dello spazio orizzontale dell'elemento principale finché 25% non diventa inferiore a 150px.
Aggiungi questo valore come valore di grid-template-columns con il seguente valore:
minmax(150px, 25%) 1fr. L'elemento nella prima colonna (la barra laterale in questo caso) ottiene un valore minmax di 150px in 25% e il secondo elemento (la sezione main qui) occupa il resto dello spazio come una singola traccia 1fr.
.parent {
display: grid;
grid-template-columns: minmax(150px, 25%) 1fr;
}
04. Pila per pancake: grid-template-rows: auto 1fr auto
A differenza di Pancake destrutturato, questo esempio non inserisce un a capo nei suoi elementi secondari quando le dimensioni dello schermo cambiano. Comunemente noto come piè di pagina fisso, questo layout viene spesso utilizzato sia per i siti web che per le app, nelle applicazioni mobile (il piè di pagina è in genere una barra degli strumenti) e nei siti web (le applicazioni a pagina singola spesso utilizzano questo layout globale).
Se aggiungi display: grid al componente, otterrai una griglia a una colonna, ma l'area principale avrà l'altezza dei contenuti con il piè di pagina sottostante.
Per fare in modo che il piè di pagina si fermi in fondo, aggiungi:
.parent {
display: grid;
grid-template-rows: auto 1fr auto;
}
In questo modo, i contenuti dell'intestazione e del piè di pagina assumeranno automaticamente le dimensioni dei relativi elementi secondari e lo spazio rimanente (1fr) verrà applicato all'area principale, mentre la riga di dimensioni auto assumerà le dimensioni dei contenuti minimi dei relativi elementi secondari, quindi, man mano che le dimensioni dei contenuti aumentano, la riga stessa si adeguerà.
05. Layout del Santo Graal classico: grid-template: auto 1fr auto / auto 1fr auto
Questo layout classico include intestazione, piè di pagina, barra laterale sinistra, barra laterale destra e contenuti principali. È simile al layout precedente, ma ora con le barre laterali.
Per scrivere l'intera griglia utilizzando una singola riga di codice, utilizza la proprietà grid-template. In questo modo puoi impostare contemporaneamente sia le righe che le colonne.
La coppia proprietà e valore è: grid-template: auto 1fr auto / auto 1fr auto. La barra tra il primo e il secondo elenco separato da spazi indica la separazione tra righe e colonne.
.parent {
display: grid;
grid-template: auto 1fr auto / auto 1fr auto;
}
Come nell'ultimo esempio, in cui l'intestazione e il piè di pagina avevano contenuti con dimensioni automatiche, qui le barre laterali sinistra e destra vengono ridimensionate automaticamente in base alle dimensioni intrinseche dei relativi elementi secondari. Tuttavia, questa volta si tratta di dimensioni orizzontali (larghezza) anziché verticali (altezza).
06. Griglia a 12 intervalli: grid-template-columns: repeat(12, 1fr)
Ecco un'altra classica: la griglia a 12 campate. Puoi scrivere rapidamente griglie in CSS con la funzione repeat(). Se utilizzi repeat(12, 1fr); per le colonne del modello di griglia, ottieni 12 colonne ciascuna di 1fr.
.parent {
display: grid;
grid-template-columns: repeat(12, 1fr);
}
.child-span-12 {
grid-column: 1 / 13;
}
Ora che hai una griglia di canali con 12 colonne, possiamo posizionare i nostri elementi secondari nella griglia. Un modo per farlo è posizionarli utilizzando le linee della griglia. Ad esempio, grid-column: 1 / 13 si estenderà completamente dalla prima riga all'ultima (13a) e coprirà 12 colonne. grid-column: 1 / 5; copre i primi quattro.
In alternativa, puoi utilizzare la parola chiave span. Con span, imposti la riga iniziale e il numero di colonne da includere a partire da quel punto di partenza. In questo caso, grid-column: 1 / span 12 sarebbe equivalente a grid-column: 1 / 13 e grid-column: 2 / span 6 a grid-column: 2 / 8.
.child-span-12 {
grid-column: 1 / span 12;
}
07. RAM (ripetizione, automatico, min/max): grid-template-columns(auto-fit, minmax(<base>, 1fr))
Per questo settimo esempio, combina alcuni dei concetti che hai già appreso per creare un layout adattabile con elementi flessibili e posizionati automaticamente. Molto interessante. I termini chiave da ricordare in questo caso sono repeat, auto-(fit|fill) e minmax()', che ricordi con l'acronimo RAM.
Insieme hanno un aspetto simile a questo:
.parent {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
Utilizzi di nuovo l'istruzione repeat, ma questa volta con la parola chiave auto-fit anziché con un valore numerico esplicito. In questo modo viene attivato il posizionamento automatico di questi elementi secondari. Questi elementi secondari hanno anche un valore minimo di base di 150px con un valore massimo di 1fr, il che significa che su schermi più piccoli occuperanno l'intera larghezza di 1fr e, quando raggiungono ciascuno una larghezza di 150px, inizieranno a essere visualizzati nella stessa riga.
Con auto-fit, le caselle si allungheranno quando le dimensioni orizzontali superano i 150 px per riempire tutto lo spazio rimanente. Tuttavia, se lo imposti su auto-fill, non si estenderanno quando la dimensione di base nella funzione minmax viene superata:
.parent {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}
08. Line Up: justify-content: space-between
Per il layout successivo, il punto principale da dimostrare è justify-content: space-between, che posiziona il primo e l'ultimo elemento secondario ai bordi della relativa area delimitata, con lo spazio rimanente distribuito uniformemente tra gli elementi. Per queste schede, vengono posizionate in una modalità di visualizzazione Flexbox, con l'orientamento impostato su colonna utilizzando flex-direction: column.
In questo modo, il titolo, la descrizione e il blocco di immagini vengono posizionati in una colonna verticale all'interno della scheda principale. L'applicazione di justify-content: space-between ancora gli elementi primo (titolo) e ultimo (blocco di immagini) ai bordi del flexbox e il testo descrittivo intermedio viene posizionato con una spaziatura uguale a ciascun endpoint.
.parent {
display: flex;
flex-direction: column;
justify-content: space-between;
}
09. Blocco dello stile: clamp(<min>, <actual>, <max>)
In questo articolo ci soffermeremo su alcune tecniche che prevedono meno browser supportati, ma hanno alcune implicazioni molto interessanti per i layout e la progettazione della UI reattiva. In questa demo, imposti la larghezza utilizzando la funzione clamp come segue: width: clamp(<min>, <actual>, <max>).
Vengono impostate dimensioni minime e massime assolute e una dimensione effettiva. I valori possono avere il seguente aspetto:
.parent {
width: clamp(23ch, 60%, 46ch);
}
La dimensione minima è 23ch o 23 unità di carattere e la dimensione massima è 46ch, 46 caratteri. Le unità di larghezza dei caratteri si basano sulla dimensione del carattere dell'elemento (in particolare sulla larghezza del glifo 0). La dimensione "effettiva" è pari al 50%, che rappresenta il 50% della larghezza dell'elemento padre di questo elemento.
La funzione clamp() consente a questo elemento di mantenere una larghezza del 50% fino a quando il 50% non è maggiore di 46ch (in aree visibili più ampie) o minore di 23ch (in aree visibili più piccole). Puoi vedere che, se allungo e rimpicciolisco la dimensione principale, la larghezza di questa scheda aumenta fino al punto massimo bloccato e diminuisce al minimo bloccato. Rimane quindi centrato nell'elemento principale, poiché abbiamo applicato proprietà aggiuntive per centrarlo. Ciò consente layout più leggibili in quanto il testo non sarà troppo largo (sopra 46ch) né troppo stretto e stretto (meno di 23ch).
Questo è anche un ottimo modo per implementare la tipografia adattabile. Ad esempio, potresti scrivere: font-size: clamp(1.5rem, 20vw, 3rem). In questo caso, il font-size di un titolo rimarrebbe sempre compreso tra 1.5rem e 3rem, ma aumenterebbe e diminuirebbe in base al valore effettivo di 20vw per adattarsi alla larghezza dell'area visibile.
Si tratta di una tecnica ottima per garantire la leggibilità con un valore minimo e massimo delle dimensioni, ma ricorda che non è supportata in tutti i browser moderni, quindi assicurati di avere soluzioni di riserva ed esegui i test.
10. Rispetto dell'aspetto: aspect-ratio: <width> / <height>
Infine, questo ultimo strumento di layout è il più sperimentale del gruppo. Di recente è stata introdotta in Chrome Canary in Chromium 84 e Firefox sta lavorando attivamente per implementarla, ma al momento non è presente in nessuna versione stabile del browser.
Tuttavia, voglio menzionarlo perché si tratta di un problema molto comune. e questo significa semplicemente mantenere le proporzioni di un'immagine.
Con la proprietà aspect-ratio, mentre ridimensiono la scheda, il blocco visivo verde mantiene queste proporzioni 16 x 9. Rispettiamo le proporzioni con aspect-ratio: 16 / 9.
.video {
aspect-ratio: 16 / 9;
}
Per mantenere le proporzioni 16 x 9 senza questa proprietà, devi utilizzare un hack padding-top e aggiungere un padding di 56.25% per impostare un rapporto altezza/larghezza. A breve avremo una proprietà per evitare l'hack e la necessità di calcolare la percentuale. Puoi creare un'immagine quadrata con proporzioni 1 / 1, proporzioni 2:1 con 2 / 1 e qualsiasi altra immagine che ti serve per ridimensionare l'immagine con un rapporto di dimensioni impostato.
.square {
aspect-ratio: 1 / 1;
}
Questa funzione è ancora in fase di sviluppo, ma è una buona idea conoscere perché risolve molti problemi degli sviluppatori che ho affrontato molte volte io stessa, in particolare per quanto riguarda i video e iframe.
Conclusione
Grazie per aver seguito questo percorso attraverso 10 potenti righe di CSS. Per saperne di più, guarda il video completo e prova le demo.