Contenuti da aggiornare!!!
Questa lezione contiene dei contenuti che devono essere aggiornati perché la libreria Compass alla quale faccio riferimento è stata ritirata e non è più necessaria.
Se devo essere onesto con te, conosci già tutto il necessario per poter iniziare a sviluppare i tuoi layout sfruttando il modulo FlexBox. Se non desideri continuare a seguire questo corso, sei liberissimo di farlo; ma faresti un grande errore…
Almeno dal mio punto di vista.
Questo perché utilizzando il linguaggio Sass, che puoi approfondire grazie a questo corso, sarai in grado non soltanto di velocizzare il tuo lavoro ma anche di rendere i progetti che realizzi compatibili con il maggior numero di browser.
Non dovrebbe essere un segreto, quando parliamo di browser possiamo tranquillamente dire che ognuno fa un po’ quel che gli pare; almeno per quanto riguarda l’inserimento di nuove funzionalità.
Come ti ho confessato a inizio corso, il modulo FlexBox non è ancora entrato negli standard CSS e per questo ha subito diverse modifiche che lo hanno portato alla versione che stiamo utilizzando in questo corso.
Non perdiamoci nella storia
Sicuramente quello che non voglio fare è annoiarti raccontandoti come il W3C decide di implementare i nuovi standard all’interno delle sue specifiche, ma capire un po’ come FlexBox ha raggiunto questa versione è fondamentale per comprendere come sfruttare al meglio i concetti che ti presenterò successivamente.
Senza raccontarti le varie vicissitudini e scelte che sono state prese per raggiungere la versione odierna; diciamo soltanto che nell’arco di tempo in cui FlexBox è nato ed è arrivato ad una versione semi-stabile (come quella che ti ho presentato) ha subito 3 diversi cambiamenti.
Dal 2009, anno in cui è stata scritta la prima proposta, i cambiamenti sono stati diversi.
Proprietà, valori e la stessa logica è stata modificata; benché questo possa interessare poco per quanto riguarda la compatibilità con i browser moderni, dato che tutti (tranne Opera Mini) supportano l’ultima versione, è interessante notare che alcuni dei browser più datati avevano implementato questo modulo.
I browser che supportano le vecchie versioni sono veramente pochi ma se il tuo progetto necessita questa compatibilità è giusto sapere che grazie a Compass sarai in grado di implementare anche questi.
Compass ha un modulo FlexBox
Non spenderò troppo tempo a descriverti che cosa sia e come funzioni questa libreria di Mixin perché è stata dedicata una lezione specifica all’interno del corso su Sass, la cosa interessante da sapere è che grazie a questo sarai in grado di creare i tuoi layout FlexBox based in un lampo!
Se vai a consultare la pagina dedicata scoprirai che esistono un gran numero di Mixin che ti aiutano ad impostare il tuo layout; ma prima di andarli a scoprire vorrei farti vedere come potrai creare del codice compatibile con le varie versioni di questo modulo. Ecco subito un esempio in codice:
.riga {
/* Versione 1 */
@include flexbox( (
display: box,
box-orient: vertical
),
$version: 1);
/* Versione 2 */
@include flexbox( (
display: flexbox,
flex-direction: row
),
$version: 2);
/* Versione 3 */
@include flexbox( (
display: flex,
flex-direction: row
)
);
}Come puoi vedere tu stesso, grazie al Mixin flexbox() non soltanto sarai in grado di inserire le regole appartenenti a questo modulo, ma sarai anche in grado di specificarne la versione.
L’ho scritto prima e adesso lo confermo, per il resto di questa lezione non andremo ad analizzare ulteriormente l’argomento compatibilità perché non è il mio scopo, piuttosto voglio mostrarti come preparare un layout utilizzando FlexBox e Compass 😉
Che Cosa definisce un Layout
Come abbiamo scoperto nelle lezioni del corso Scopri le Fondamenta del Web, una pagina web generalmente si identifica grazie alle sezioni dalle quali è composta. Generalmente ogni pagina ha:
- una testata – la parte alta di qualsiasi sito web, quella che contiene il logo, il menu e talvolta il campo di ricerca è generalmente la parte che viene ripetuta più frequentemente all’interno del sito web. Di solito questa porzione occupa il 100% della finestra del browser, ma gli elementi contenuti al suo interno possono disporsi in modi diversi;
- contenitore – il contenitore è la sezione principale che contiene il corpo delle varie pagine. Tendenzialmente questo contiene anche la colonna principale (quella che contiene il contenuto della pagina stessa) ed una colonna secondaria (dove tendenzialmente trovano spazio immagini, menu secondari, ecc…). Il rapporto tra queste due colonne varia molto a seconda della struttura del sito (talvolta troviamo anche tre o più colonne) e dalla grafica che ci viene fornita, infatti può capitare che non esista affatto la colonna secondaria;
- pié pagina – la parte finale di qualsiasi pagina web, chiamata anche footer, tendenzialmente si trova all’interno di qualsiasi pagina web ed è un posto importantissimo nel quale inserire la P.IVA della propria attività, un modulo di contatti, l’indirizzo dei propri uffici ecc… Anche questa sezione, come la testata, generalmente viene ripetuta all’interno di tutte le pagine del sito e permette di ottenere un senso di immagine coordinata che accompagna il visitatore.
Queste sono le sezioni che aiutano a definire un layout, ma non sono sicuramente tutto quello di cui abbiamo bisogno. Dal punto di vista dello sviluppatore, le informazioni più importanti sono quelle che riguardano la disposizione degli oggetti (anche dal punto di vista di diverse risoluzioni), gli effetti da applicare alla pagina ecc…
Dato che in questo corso il nostro interesse è focalizzato ad apprendere l’uso di FlexBox e non la realizzazione di un completo sito web, cerchiamo di capire al meglio come sia possibile definire questo progetto partendo dalle grafiche del mio sito web personale. Iniziamo subito con qualche screenshot delle varie versioni.
Eccoti presentate le nuove grafiche che andrò ad applicare al mio sito persersonale, che ne pensi? Ti piacciono?
Non voglio assolutamente confonderti le idee con queste immagini ma da bravo sviluppatore che stai diventando dovrebbe essere chiaro ritrovare tutti gli elementi che ti ho presentato nella precedente lista. Se non sei ancora in grado di trovarli, vediamo se la seguente immagine può aiutare ulteriormente:
Ho preferito mantenere quest’immagine più snella rispetto alle altre, ma adesso non hai più scuse, la struttura che ti ho presentato precedentemente è adesso ben delineata anche grazie ai colori 😀
Da quanto è possibile vedere, tutte le sezioni hanno delle caratteristiche peculiari; la nostra pagina si divide principalmente nelle 3 sezioni che abbiamo appena evidenziato, ma ciascuna di queste presenta altre sezioni che devono essere personalizzate singolarmente. La testata, ad esempio, ha un logo (che dovrà restare sempre a sinistra), un menu ed un campo di ricerca; che a sua volta dovrà restare sempre a destra.
Il contenitore ha due colonne, la principale che ci permetterà di mostrare il riassunto dei nostri articoli mentre la secondaria che funziona da vera e propria sidebar. Concludendo, il footer è anch’esso diviso in tre sezioni che dovranno adattarsi ai vari ridimensionamenti ed eventualmente scomparire del tutto quando si raggiunge la versione più stretta.
Con un po’ di ragionamento possiamo dire che la seguente struttura HTML potrebbe essere un buon punto di partenza.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Struttura Sito Andrea</title> </head> <body> <div class="container"> <header class="testata"> <img src="" alt="" id="logo"> <nav></nav> <div class="search"></div> </header> <section class="content"> <div id="main"></div> <aside></aside> </section> <footer> <div class="sitemap"></div> <div class="contact"></div> <div class="offer"></div> </footer> </div> </body> </html>
Per il momento quello che ci interessa è capire come si deve ragionare quando ci troviamo di fronte allo sviluppo di un layout con i FlexBox, quindi ho preferito lasciare da parte tutti quegli elementi che interessavano il lato grafico per lasciare spazio a quello strutturale.
Creiamo il layout grazie a Compass
È tutta la lezione che ne parlo e finalmente siamo pronti, possiamo iniziare a scrivere il nostro codice SASS (ehm, Compass) per fare in modo di creare del codice CSS più compatibile, almeno con tutti quei browser che implementano l’ultima versione del modulo FlexBox.
La prima cosa da ricordare è la struttura degli elementi blocco, dove ciascuno di questi si dispone uno sotto l’altro andando ad occupare l’intera larghezza della finestra del browser, non abbiamo bisogno di utilizzare FlexBox perché i nostri browser sono già pronti 🙂
Quindi, al momento questo è il codice che ti consiglio di inserire all’interno del tuo file sass/style.scss :
@import "compass";
header, footer{
background-color: #43a047;
height: 150px;
}
section{
background-color: #fff59d;
height: 550px;
}
footer{
background-color: #ef5350;
}In fin dei conti ti basterebbe anche aggiungere soltanto @import 'compass'; dato che è l’unico comando veramente utile. Le altre dichiarazioni servono semplicemente a dare un po’ di dimensioni e colore a questi elementi che altrimenti rimarrebbero vuoti.
Niente di speciale quindi…
L’unica cosa di cui devi essere assolutamente sicuro è che il tuo sistema sia in grado di compilare il codice SASS; se hai qualche dubbio ti consiglio di tornare a consultare la lezione dedicata.
Ma andiamo un po’ ad analizzare la nostra struttura, iniziamo dalla testata. Sappiamo che questa deve contenere tre elementi, ma per far prima inseriamo direttamente la struttura qua sotto:
<header class="testata"> <img src="" alt="" id="logo"> <nav></nav> <div class="search"> <from action="#" method="post"> <input type="text"> <input type="submit" value="Cerca"> </from> </div> </header>
Come puoi notare, troviamo tre elementi completamente differenti. Un’immagine, una navigazione ed un modulo di ricerca. Sono sicuro che se scavi nella tua memoria da sviluppatore web il pensiero delle misure di questi elementi è uno dei primi che ti è balenato in mente; forse anche perché non ricordi che con FlexBox non è necessario fare questi ragionamenti.
Abbiamo visto qualche lezione fa la proprietà flex che ci permette di assegnare diversi valori in un colpo solo. Prima di andare a vedere il codice vorrei analizzare con te un’altra caratteristica che magari ti è passata di mente, ovvero come sia possibile disporre gli elementi con questo modulo.
A differenza di come siamo abituati con l’uso dei float, dove è possibile dichiarare come un determinato elemento si deve disporre rispetto agli altri, con FlexBox questa dichiarazione deve avvenire all’interno dell’elemento contenitore. In questo contesto vogliamo disporre gli elementi uno di fianco all’altro all’interno della riga definita dalla testata, non dobbiamo far altro che utilizzare flex-direction: row ed il nostro browser penserà al resto.
Andiamo a scoprire come sia possibile fare tutto questo utilizzando i comodi mixin che Compass ci mette a disposizione.
/* Impostazioni Header */
header{
@include display-flex;
@include flex-direction( row );
img{ @include flex( .5 0 110px ); }
nav{ @include flex( 1 0 250px ); }
.search{ @include flex( .5 0 100px ); }
}Cinque semplici regole che ci hanno permesso di avere già una struttura responsive pronta all’utilizzo, dì la verità; non sembra neanche vero 😀
Nell’immagine che ti ho inserito qua sopra stai vedendo tre colori di sfondo differenti, potrai vedere dove li imposto all’interno del video o nel codice presente su GitHub ma in fin dei conti penso che tu sappia benissimo come impostare un colore di sfondo 🙂
La cosa bella è che senza dichiarare nessuna percentuale, hai già realizzato una testata responsive. Proprio come faccio io all’interno del video, ti invito a ridimensionare la finestra del tuo browser per vedere come il contenuto si riadatta alle nuove dimensioni. Puoi anche inserire immagini e testo di esempio (qua sto puntando a farti comprendere il concetto) ma la cosa che mi interessa maggiormente è scoprire se hai visto cosa succede quando la finestra del browser raggiunge una certa misura…
Se hai ristretto la finestra andando a raggiungere una dimensione inferiore a 500px, circa, ti sarai sicuramente accorto che ha questo punto i vari elementi che compongono la testata hanno semplicemente smesso di rimpicciolirsi. In poche parole sarai in grado di stringere ancora la finestra ma perderai allo stesso tempo una porzione di pagina.
Questo succede perché tutti gli elementi hanno raggiunto il proprio flex-basis e il nostro browser non è in grado di ridurli ulteriormente. Ma non è soltanto questo il motivo per cui gli elementi smettono di ridursi; flex-basis non permette soltanto di definire una misura di base ma gestisce anche sia il rapporto di crescrita (flex-grow) che quello di riduzione (flex-shrink).
E il motivo per il quale i nostri elementi smettono di ridursi è perché gli abbiamo impedito di farlo impostando la proprietà flex-shrink a 0.
Prima di Passare Oltre
A questo punto sei in grado di realizzare da solo anche la struttura che dovrai ricreare all’interno del footer seguendo le indicazioni di layout che vengono presentate nella grafica realizzata per gli schermi più larghi di 993px. Come ti ho fatto notare, la proprietà flex-basis ti sarà utile sia per definire meglio le proporzioni dei vari elementi che per definire una determinata misura sotto la quale non vogliamo far ridurre ulteriormente il nostro elemento.
Questo è veramente utile perché senza dover neanche definire una percentuale o un min-width siamo in grado di creare degli elementi che si possono adattare tranquillamente, uno di fianco all’altro.
Se poi questo effetto proprio non ti piace, non devi far altro che usare flex con un unico valore ed il gioco è fatto.
Ma queste possibilità portano nuovi quesiti… Come faccio a impostare diverse dimensioni a seconda della finestra? Come cambiare l’ordinamento degli elementi? Come rendere il tutto più responsive?
Nella prossima lezione affronteremo velocemente alcuni concetti del responsive e della tecnica mobile first che ci permetterà di creare siti completamente responsive nel modo più veloce possibile.