Fondamenti di web design 18: SASS e la direttiva @EXTEND

Le direttive in SASS esistono per semplificare un lavoro e con la direttiva @extend drguito da un selettore di richiamo formato da simbolo percentuale e da un nome, é possibile ulteriormente richiamare dei valori nelle nostre regole di stile. Abbiamo già visto in precedenza da articoli come https://umbriawayinfo.wordpress.com/2021/01/04/fondamenti-di-web-design-17-nesting-in-sass-potenza-degli-annidamenti/ , delle situazioni in cui dichiarando delle variabili potevo prendere il nome della variabile e inserirlo nella regola per esempio:

$colorselezionato:#ff9900;
$fontselezionato:verdana;
 
body {
    color:$colorselezionato;
    font-family: $fontselezionato;
    }

Ora possiamo anche raggruppare meglio le informazioni tramite la direttiva @EXTEND per richiamare queste informazioni semplicemente dando il nome del selettore, vediamo un esempio. Scrivo nel file scss la seguente istruzione eliminando le dure righe $colorselezionato e $fontselezionato e inserendo al loro posto un placeholder:

%fontcolor {
    color:black;
    font-family:arial;
}

Ora per il body di cui sopra diventa con la direttiva applicata:

body {
@extend %fontcolor;
    }

In questo modo possiamo eliminare tutte quelle proprietà come color e font-family che a video sarebbero rinondanti per sostituirle con:

@extend %fontcolor;

che é un modo elegante per richiamare con il simbolo di chiocciola (la direttiva) un segnaposto che riempirà le nostre proprietà eliminate con i contenuti del PLACEHOLDER. Da un punto di vista pratico la scrittura di codice fatta così é pulita e sintetica e come si diceva all’ inizio semplifica la leggibilità del codice.

Fondamenti di web design 17: NESTING in SASS, potenza degli annidamenti

Nidificazione

La NIDIFICAZIONE se chiediamo in inglese ad Alexa di tradurci il termine NESTING è una tendenza dell’ uomo moderno ma anche uno stile di vita che ci vede privilegiare ambienti caldi e accoglienti a ricreare magari inconsciamente le condizioni iniziali della nostra nascita, simulando il rientro nel ventre materno, ma parlando di SASS diventa una risorsa che ci farà apprezzare il perché di questa interessante tecnologia! Immaginiamo di avere una sezione di articoli o più sezioni ognuna delle quali deve essere modellata o stilizzata in un determinato modo. Per esempio noi potremmo fare riferimento alla nostra pagina web per inserire delle classi nel foglio HTML all’ interno dei DIV inseriti e poi richiamarli nel file SCSS, vediamo il file HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SASS</title>
    <link rel="stylesheet" href="css/stylesass.css" type="text/css">
</head>
<body>
    <div class="opzione1"><h1>FWD</h1>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Temporibus quia accusamus quasi magni in quos nihil, suscipit perspiciatis voluptatibus praesentium voluptas autem nobis quidem, totam ipsum. Officia sint rerum animi.</p>
    </div>
    <div class="opzione2">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis vel rem magnam tempore doloremque! Architecto cumque eius explicabo delectus. Animi laboriosam asperiores cum dolore doloremque nobis voluptatibus facilis omnis accusamus!</div>
    <div class="opzione3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem amet ipsam deserunt reiciendis, minima corporis autem voluptates cupiditate, obcaecati beatae veritatis sed neque dolores fugiat ipsum consequatur, nobis officiis voluptas.</div>    
</body>
</html>

A questo punto stilizziamo le classi nel file corrispondente con estensione SCSS opzione1, opzione2 e opzione tre, magari mostrando un esempio di NESTING su opzione1:

$backgroundselezionato:red;
$colorselezionato:#ff9900;
$colorselezionato1:#ccc;
$colorselezionato2:red;
$fontselezionato:verdana;

body {
    background-color:$backgroundselezionato;
    color:$colorselezionato;
    font-family: $fontselezionato;
    }

    .opzione1 {
    color:$colorselezionato1;
    h1
    {
        font-size: 40px;
    }
    p
    {
        font-size: 30px;
        color: $colorselezionato;
    }
    }
    
    .opzione2 {
            color:$colorselezionato;
    }
    
    .opzione3 {
            color:$colorselezionato1;
    }

Il vantaggio di questo modo di scrivere codice é palese. Immaginiamo quanto ci semplificheremo la vita nel caso di elenchi annidati all’ interno di una UL che magari ha anche dei link, definendo un solo blocco di codice posso risovere tutto all’ interno di un unico contenitore, raggruppando e organizzando meglio le informazioni, il file CSS corrispondente generato in automatico dopo il salvataggio del file matrice sarà:

body {
  background-color: red;
  color: #ff9900;
  font-family: verdana;
}

.opzione1 {
  color: #ccc;
}

.opzione1 h1 {
  font-size: 40px;
}

.opzione1 p {
  font-size: 30px;
  color: #ff9900;
}

.opzione2 {
  color: #ff9900;
}

.opzione3 {
  color: #ccc;
}
/*# sourceMappingURL=stylesass.css.map */

che dal punto di vista della nostra comprensione che avevamo dei CSS non stravolge nulla, semplicemente gestire gli annidamenti ci consente di avere una semplificazione magari su zone precise del documento per cui se volessi stilizzare un elenco aprirei prima un blocco UL senza chiuderlo, all’ interno ci inserirei degli UL che non chiuderò perchè magari andrò a formattare delle ancore al suo interno con gli hover e gli underline che necessitano, TAG A che potrò chiudere come blocco di codice e subito dopo chiuderò anche gli LI e gli UL, tutto all’ interno di una stessa area o blocco di codice. Poi il PREPROCESSOR farà tutto il lavoro sporco andando a frammentare le informazioni come vuole la tradizione dei CSS! Ovviamente all’ interno della nostra classe opzione1 avrò tutti gli elementi modellati da SCSS in corrispondenza della pagina statica, per cui le intestazioni e i paragrafi di riferimento o altro comprese eventuali ancore, che possono essere ulteriormente nidificate nelle loro più svariate proprietà.

L’uso dei PREFISSI

Posso prendere un font-size come proprietà e fare in modo che diventi egli stesso un contenitore? Si, utilizzando i prefissi, vediamo lo stesso codice di prima ampliato per creare un contenitore dentro a un contenitore con l’uso dei prefissi abbreviando font-size a font e anche rendendo sintetiche le altre voci:

$backgroundselezionato:red;
$colorselezionato:#ff9900;
$colorselezionato1:#ccc;
$colorselezionato2:red;
$fontselezionato:verdana;

body {
    background-color:$backgroundselezionato;
    color:$colorselezionato;
    font-family: $fontselezionato;
    }

    .opzione1 {
    color:$colorselezionato1;

    h1
    {
        font-size: 40px;
    }

    p
    {
        color: $colorselezionato;
        font:
    {
            size:30px;
            weight:bold;
            family:verdana;
    }
    }

    }

che nel CSS diventa un lineare:

body {
  background-color: red;
  color: #ff9900;
  font-family: verdana;
}

.opzione1 {
  color: #ccc;
}

.opzione1 h1 {
  font-size: 40px;
}

.opzione1 p {
  color: #ff9900;
  font-size: 30px;
  font-weight: bold;
  font-family: verdana;
}

/*# sourceMappingURL=stylesass.css.map */

La rappresentazione della E COMMERCIALE (&) per richiamare i PSEUDOSELETTORI

Inseriamo un ancora nella pagina e stilizziamola nel file corrispondente SCSS con il seguente codice scss aggiunto appena sotto il body:

a {
color:red;
&:hover {
  color:rgb(94, 255, 0);
}

La & (e commerciale) sostituisce la A e consente una nidificazione! Provare per vedere l’effetto che fa! La nidificazione ricorda un pò un gioco di matriosche che contengono se stesse quasi all’ infinito, volendo proprio essere cinematografici nella didattica!

Fondamenti di web design 16: l’arrivo dei supereroi con SASS! Introduzione e uso delle VARIABILI

SASS é CSS with superpowers!

VUOI LAVORARE CON UN PREPROCESSORE CHE GENERA IN AUTOMATICO CSS arricchiti di molte funzionalità? Si può fare all’ indirizzo https://sass-lang.com/ ci ritroviamo un set di funzioni per arricchire i nostri CSS da paura! Di che cosa parliamo quando abbiamo a che fare con SASS? L’acronimo sta a significare “syntactically Awesome StyleSheets” dove potremmo associare Awesome a Superpowers! E’ proprio così perchè la compilazione di un CSS partendo da SASS avviene in automatico per esempio se utilizzassimo editor come VISUAL STUDIO CODE che implementando due semplici PLUG-IN come LIVE SASS COMPILER e LIVE SERVER ci consentono con il primo di arrivare a una generazione automatica di un file con estensione SCSS per trasformarlo senza fatica in CSS e il secondo di arrivare al reload automatico del browser che grazie al semplice pulsante watch-sass posto sulla status bar in basso ci consente di compilare in automatico o di stoppare i processi a seconda dei casi, con la generazione in automatico di un file di conversione che fa da ponte tra SCSS e CSS con estensione MAP. Recentemente l’impertinente SASS ha migliorato la sua compilazione anche sul versante punti e virgola e parentesi e oggi é considerato uno strumento importante messo a disposizione degli sviluppatori. Pasiamo ai fatti, creiamo un file con estensione SCSS da linkare a un foglio HTML dove nel documento possiamo inserire TRE DIV con tre classi differenziate, tipo class=opzione1/opzione2/opzione3. Fatto ciò iniziamo a inserire una intestazione H1 sul primo insieme a un paragrafo e due LOREM dentro gli altri due DIV. Poi passiamo a SCSS dove inseriamo il selettore BODY con un colore di sfondo e un colore di testo. Avendo già collegato il foglio stile con estensione SCSS alla pagina non appena azioniamo il WATCH SASS parte la compilazione visibile su FINESTRA TERMINALE e viene generato tutto dinamicamente. Cambiando ad esempio il colore di sfondo in REAL TIME, sotto la finestra terminale ci mostrerà la nuova esecuzione dei cambiamenti in corso e ci siamo anche accorti che senza fare nulla è stato generato un file DAL NULLA con lo stesso nome del file SCSS ma adesso con estensione CSS. Che cosa è accaduto? Il PREPROCESSORE ha reso compatibile e interpretato una serie di istruzioni non convenzionali molto vicine al mondo della programmazione (per esempio viene introdotto il concetto di variabile) per darle in pasto ai documenti HTML con i CSS! Fantastico, adesso che abbiamo apparecchiato la tavola non ci resta che consultare il MENU! Che cosa offre il convento?

SASS e l’uso delle VARIABILI

Tornando al nostro selettore BODY e alle sue proprietà background e color e magari anche font, posso giocare d’astuzia e usare delle variabile per definire quali VALORI uso tra le graffe della regola di stile. Per esempio se scrivessi nel foglio SCSS istruzioni come:

$coloretestoselezionato:black;
$fonselezionato:Verdana;
$coloresfondoselezionato:white;

e andando a sostituire al posto di:

body {
    background-color: #5e30c8;
    color:#ff9900;
    font-family: Arial;
    } 

i nuovi valori che diventeranno:

body {
background-color: $coloresfondoselezionato;
color:$coloretestoselezionato;
font-family: $fonselezionato;
}

Ottengo qualcosa di strabiliante! In questo modo é molto facile personalizzare il vestito senza arrampicarsi ogni volta sugli specchi, mi basterà andare sul SCSS e cambiare magari il valore sorgente del FONT-FAMILY a ROBOTO per avere rispercussioni dirette sul documento SENZA ANDARE OGNI VOLTA A MODIFICARE LA REGOLA! Torniamo quindi al nostro documento HTML e inseriamo tre classi che poi andremo a inserire nel file SCSS quanto entreranno in gioco gli annidamenti:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SASS</title>
    <link rel="stylesheet" href="css/stylesass.css" type="text/css">
</head>
<body>
    <div class="opzione1"><h1>FWD</h1>
    <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Temporibus quia accusamus quasi magni in quos nihil, suscipit perspiciatis voluptatibus praesentium voluptas autem nobis quidem, totam ipsum. Officia sint rerum animi.</p>
    </div>
    <div class="opzione2">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Officiis vel rem magnam tempore doloremque! Architecto cumque eius explicabo delectus. Animi laboriosam asperiores cum dolore doloremque nobis voluptatibus facilis omnis accusamus!</div>
    <div class="opzione3">Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem amet ipsam deserunt reiciendis, minima corporis autem voluptates cupiditate, obcaecati beatae veritatis sed neque dolores fugiat ipsum consequatur, nobis officiis voluptas.</div>    
</body>
</html>
</html>

a questo punto abbiamo il nostro file matrice SCSS che diventa per esempio giocherellando con più varianti:

$backgroundselezionato:red;
$colorselezionato:#ff9900;
$colorselezionato1:#ccc;
$colorselezionato2:red;
$fontselezionato:verdana;

body {
    background-color:$backgroundselezionato;
    color:$colorselezionato;
    font-family: $fontselezionato;
    }

che in automatico dopo il salvataggio grazie al plug-in presente in visual studio code che é il nostro LIVE SASS COMPILER genererà un file CSS:

body {
  background-color: red;
  color: #ff9900;
  font-family: verdana;
}
/*# sourceMappingURL=stylesass.css.map */

che non é altro che il risultato della trasformazione ottenuta in fase di preprocessor dal plug-in tramite il ponte rappresentato simbolicamente dal file con estensione MAP che prende da SCSS per donare script CSS digeribili ai documenti HTML. Ora che abbiamo introdotto le VARIABILI non ci resta che fare un salto quantico agli ANNIDAMENTI offerti da SASS!

Fondamenti di web design 15: Bootstrap framework css

Un framework css come bootstrap, https://getbootstrap.com , è da intendersi come un insieme di funzionalità che danno luogo a una libreria standardizzata che non ha necessità di essere aggiornata direttamente in quanto con CDN abbiamo sempre a disposizione esternamente il software. In questo SET di ISTRUZIONI per rendere il documento flessibile e coerente con la necessità del responsive-design abbiamo tutto quello che ci serve per modellari testi, contenitori, lay-out, bottoni, form e chi più ne ha più ne metta. E’ bene sapere che qui la documentazione diventa un faro nella notte, ma anche il luogo più semplice per recuperare una classe che ci serve e trovare risposte alle più multiformi e lecite domande da newbie: come faccio ad arrotondare i bordi di una immagine? E a colorare di rosso un blocco divisorio di avvertimento (DIV)? Come faccio a creare delle colonne e a differenziarne l’ampiezza? Come faccio a creare una riga o una tabella o un componente specifico? Niente paura la documetazione risponde. Se non si vuole scaricare il blocco di file conviene andare nella documentazione e cercare la sezione STARTER KIT per prelevare il template base per l’utilizzo:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
    -->
  </body>
</html>

dove ci viene anche chiesto di scegliere quale blocco di file tenere per rendere funzionale il tutto sopra l’ultima chiusura del body, un espediente necessario per garantire prima il caricamento della pagina e solo dopo appesantire con il link verso le risorse esterne. Bootstrap per funzionare ha incluso anche il pacchetto jquery che permette la scrittura di codice semplificata rispetto a javascript. Fatta la scelta di quale link conservare dobbiamo tenere presente che la logica di questo come di altri framework prevede la scomposizione dello schermo in 12 colonne e quindi l’utilizzo di un template iniziale per lavorare definito conteiner. Nel momento in cui ci siamo collegati al framework abbiamo a disposizione a tutte le classi per rispondere a ogni nostra domanda per questa ragione non ha molto senso cercare di imparare a memoria questa e altre tecnologie, perché quando serve possiamo guadagnare tempo andare a cercare quello che abbisogna. Di sicuro abbiamo a disposizione moltissime frecce e scandagliarne tutto sarebbe demenziale. Per esempio se voglio disegnare sotto a un class=container che può essere anche fluido ossia senza breack-point per il resize (il contenuto si adatta automaticamente senza seguire la logica delle taglie che vanno dalla più piccola “sm md lg xl” alla più grande ciascuna delle quali con la sua caratteristica media-query che cambia la visualizzazione a un dato valore numerico in pixel) una riga procedo con class=row dove a mia volta potrei inserire tutte le righe che voglio con class=col che di default adatta in base alle colonne il contenuto alla somma totale prevista dalla griglia che é 12. Se volesse due colonne larghe metà schermo farei due class=col-6 all’ interno della riga. All’ interno della classe posso aggiungere altri parametri come il colore del testo, il colore di sfondo, la taglia e tanto altro con i colori base danger, warning, success, primary, dark e tanti altri che si possono utilizzare ovunque, dai bottoni, piuttosto che al font e così via. Posso sagomare anche i div e le immagini con classi come round-circle per esempio. Posso sagomare i bordi, decidere le dimensioni dei pulsanti e dei componenti, inserire card, sfruttare le funzionalità di js incluse per dinamicizzare degli slider, insomma il potenziale offerto da bootstrap è spaventoso in termini di possibilità di classi! La cosa migliore è lavorare su dei progetti che prevedono l’uso del framework e iniziare a scartabellare l’impossibile, perchè c’è davvero di tutto nel package e non avrebbe senso sostituirsi alla documentazione ufficiale: https://getbootstrap.com/docs/5.0/getting-started/introduction/ .Attualmente l’ultima versione la cinque non è ancora universalmente diffusa che contempla una versione di javascript più snella che elimina la libreria jquery (supportata largamente dalla versione 4 ancora dominante) e che rende più veloci i tempi di caricamento, inoltre anche le problematiche di compatibilità con IExplorer sono state abbandonate per cui gli sviluppatori si stanno concentrando sull’ ampliamento di altre funzionalità che nella 5 per esempio prevedono l’uso di una griglia con classi potenziate. Per finire Bootstrap non é l’unico framework in circolazione per cui molto minimalista ed elegante risulta come alternativa BULMA, https://bulma.io/ o anche MATERIALIZE, https://materializecss.com/ o anche il W3S indirizzo https://www.w3schools.com/w3css/defaulT.asp ma anche tantissimi altri. C’è solo l’imbarazzo della scelta e sempre poco tempo per sperimentarli tutti! Qui vediamo un paio di creazioni, possiamo apprezzare la resizable dell’ elemento container:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
 
    <title>Hello 2021!</title>
  </head>
  <body>
  <div class="container bg-primary">
  <h1>benvenuto anno 2021</h1>
  <div class="row bg-success">   
  <div class="col bg-danger text-light font-weight-bold border border-warning"> <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, in</h1></div>
    <div class="col bg-primary rounded-circle text-center "><br><br><br><h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, in</h2></div>
      <div class="col bg-warning text-secondary text-uppercase border border-danger"> <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, in</h1></div>
 </div>

  </div>

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>

  </body>
</html>
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
 
    <title>Hello 2021!</title>
  </head>
  <body>
  <div class="container">
  <h1>benvenuto anno 2021</h1>
  <div class="row ">   
  <div class="col text-dark font-weight-bold border border-warning"> <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, in</h1></div>
    <div class="col bg-primary rounded-circle text-center "><br><br><br><h2>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, in</h2></div>
      <div class="col text-secondary text-uppercase border border-danger"> <h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, in</h1></div>
 </div>

  </div>

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>

  </body>
</html>

e per concludere un enorme pasticcio che diventa parte concreta, perché va bene la teoria ma poi deve anche sfornare rispondendo alla domanda COME cose che servono:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
 
    <title>Hello 2021!</title>
    <style>
    img {
        margin:20px
    }
    </style>
  </head>
  <body style="margin:10px;padding:10px">
  <div class="container bg-primary">
  <h1 class="text-center">David Bronstein in azione con il nero</h1>
  <div class="row bg-primary">   
  <div class="col-4 bg-primary font-weight-bold "><center><img class="img-responsive" src="img/blackta1a.png" width="300px" height="300px"></center></div>
    <div class="col-4 bg-warning rounded-circle text-center "><h2 style="margin-top:100px;">Che cosa é la qualità quando puoi fare pressione sulle case nere?</h2></div>
      <div class="col-4 bg-primary text-secondary text-uppercase"><center><img class="img-responsive" src="img/blackta1b.png" width="300px" height="300px"></center></div>
 </div>

  </div>

    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>

  </body>
</html>

e per concludere una esercitazione tratta dal corso di ESTASIO su Udemy all’ indirizzo: http://umbriawayformazione.altervista.org/uwcode/fwd44.html dove si imposta una pagina progetto giocando con vari componenti per familiarizzare con la documentazione di bootstrap:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
 
    <title>Art Image</title>
  </head>
  <body>
  <div class="container">

  <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
    <a class="navbar-brand" href="#">
      <img src="img/original.png" alt="" width="40px" height="40px" class="d-inline-block align-top">
  <div class="container-fluid">
    <a class="navbar-brand" href="#">HEADER</a>
    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNavDropdown">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Gallery</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">About</a>
        </li>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">
            Dropdown link
          </a>
          <ul class="dropdown-menu text-center" aria-labelledby="navbarDropdownMenuLink">
FWD Project
          </ul>
        </li>
      </ul>
    </div>
  </div>
    </a>
</nav>

<div id="carouselExampleSlidesOnly" class="carousel slide text-center" data-bs-ride="carousel">
  <div class="carousel-inner">
    <div class="carousel-item active" data-interval="2000">
      <img src="img/logo.jpg" width="100%" class="d-block w-70" alt="fwd">
    </div>
    <div class="carousel-item" data-interval="2000">
      <img src="img/original(1).jpg" width="100%" class="d-block w-70" alt="fwd">
    </div>
    <div class="carousel-item" data-interval="2000">
      <img src="img/original(2).jpg" width="100%" class="d-block w-70" alt="fwd">
    </div>
        <div class="carousel-item" data-interval="2000">
      <img src="img/original(3).jpg" width="100%" class="d-block w-70" alt="fwd">
    </div>
        <div class="carousel-item" data-interval="2000">
      <img src="img/original(4).jpg" width="100%" class="d-block w-70" alt="fwd">
    </div>
  </div>
</div>

<div class="jumbotron jumbotron-fluid bg-primary">
  <div class="container text-center">
    <h1 class="display-4">ART Image</h1>
    <p class="lead">Creare é dare una forma al proprio destino - Camus</p>
  </div>
</div>

<form>
  <div class="form-row">
    <div class="form-group col-md-12">
      <label for="inputEmail4">Email</label>
      <input type="email" class="form-control" id="inputEmail4">
    </div>
    <div class="form-group col-md-12">
      <label for="inputPassword4">Password</label>
      <input type="password" class="form-control" id="inputPassword4">
    </div>
  </div>
  <div class="form-group">
    <label for="inputAddress">Address</label>
    <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St">
  </div>
  <div class="form-group">
    <label for="inputAddress2">Address 2</label>
    <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor">
  </div>
  <div class="form-row">
    <div class="form-group col-md-12">
      <label for="inputCity">City</label>
      <input type="text" class="form-control" id="inputCity">
    </div>
    <div class="form-group col-md-12">
      <label for="inputState">State</label>
      <select id="inputState" class="form-control">
        <option selected>Choose...</option>
        <option>...</option>
      </select>
    </div>
    <div class="form-group col-md-12">
      <label for="inputZip">Zip</label>
      <input type="text" class="form-control" id="inputZip">
    </div>
  </div>
  <div class="form-group">
    <div class="form-check">
      <input class="form-check-input" type="checkbox" id="gridCheck">
      <label class="form-check-label" for="gridCheck">
        Check me out
      </label>
    </div>
  </div>
    <div class="form-group">
    <label for="exampleFormControlTextarea1">Example textarea</label>
    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
  </div>
  <button type="submit" class="btn btn-primary">Sign in</button>
</form>

<nav class="navbar navbar-expand-lg navbar-dark bg-primary" style="margin:50px;">
    <a class="navbar-brand" href="#">
      <img src="img/original.png" alt="" width="40px" height="40px" class="d-inline-block align-top">
     </a>
</nav>


</div>


    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

  </body>
</html>

Fondamenti di web design 14: GRID Template and other parte 2/2

L’argomento GRID é ricco di complessità. Per rendersene conto andare su siti come https://gridbyexample.com/resources/ o https://css-tricks.com/snippets/css/complete-guide-grid/ o https://grid.malven.co/ o anche https://www.quackit.com/html/templates/css_grid_templates.cfm oppure https://www.quackit.com/ molto utili per disegnare template e aree da stilizzare in blocco. Per tratteggiare delle zone uso la parola AREAS al plurale sul CONTEINER, mentre la parola AREA finirà per caratterizzare il singolo ITEM, in modo da dirgli dove deve andare (stabilito già dal conteiner, ma l’ordine dei singoli elementi si sceglie). Quindi le istruzioni da dare al conteiner (ipotizzando una griglia con tre righe e tre colonne, quindi sei elementi da posizionare) saranno legate a:

grid-templates-areas:
"area1 area1 area1"
"area2 area2 area3"
"area4 area5 area6"

mentre sul mio item inserisco solo dove deve comparire l’elemento per esempio:

grid-area:area5

Posso anche troncare una posizione, ad esempio se scrivessi:

grid-templates-areas:
"area1 area1 ."
"area2 area2 area3"
"area4 area5 area6"

IL PUNTO sta ad indicare che il blocco si estenderà solo per due colonne e al posto della posizione non riempita nella terza posizione della colonna ci sarà uno spazio bianco.

JUSTIFY-CONTENT e ALIGN-CONTENT per dare flessibilità alle pagine

Se utilizziamo i pixel dobbiamo adattare la pagina alle esigenze del responsive design ossia la finestra rimpicciolendosi deve mostrarmi i miei ITEM correttamente tutti sulla pagina indipendentemente della risoluzione. JUSTIFY-CONTENT e ALIGN-CONTENT queste due proprietà sono il punto di contatto anche con FLEXBOX nel senso che ce le ritroviamo entrambe per due diversi approcci CSS (ricordiamo che FLEXBOX usa una logica padre e figlio con box modellabili all’ interno della tela, QUI invece abbiamo dei CRUCIVERBA composti da righe e colonne che si possono impostare che hanno da comandare agli ITEM), per esempio se inserissi nel contenitore solo una delle tre opzioni mostrate tra end,start e center su entrambi delle due proprietà con

justify-content:center/start/end
align-content:center/start/end

farei un salto in avanti pazzesco nel responsive design perché lo spazio che racchiude gli elementi potrebbe compattarsi o a sinistra o a destra o al centro, dando maggior margini di movimento, ma questo comunque non risolverebbe il problema della elasticità definitva su mobile. Però posso migliorare inserendo un altezza nel container e inserendo le istruzioni:

grid-template-rows: repeat(auto-fit, 200px)
grid-template-columns: repeat(auto-fit, 200px)

In questo modo facciamo un notevole passo in avanti sul resize della pagina e volendo ancora migliorare potremmo eliminare grid-template-rows: repeat(auto-fit, 200px) inserire insieme a una altezza del container solo l’istruzione relativa alla colonna modificandola:

grid-template-columns:repeat(auto-fit, min-max(300-900))

In questo modo dovremmo avere risolto il problema del RESPONSIVE-DESIGN senza scomodare le media-queries

Vediamo qualche esempio sulla determinazione delle aree di lavoro tratti da W3S:

<!DOCTYPE html>
<html>
<head>
<style>
.grid-container {
  display: grid;
  grid-template: 150px / auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The grid-template Property</h1>

<p>The grid-template property can be used as a shorthand property for the <em>grid-template-rows</em> and the <em>grid-template-columns</em> properties.</p>
<p>This grid layout has three columns, and the first row is 150px high:</p>

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
</div>

</body>
</html>

Definizione di un’area:

<!DOCTYPE html>
<html>
<head>
<style>
.item1 {
  grid-area: myArea;
}

.grid-container {
  display: grid;
  grid-template:
  'myArea myArea . . .'
  'myArea myArea . . .';
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}
</style>
</head>
<body>

<h1>The grid-template Property</h1>

<p>The grid-template property can also specify rows/columns using named grid items</p>
<p>To specify two rows, make one more sequence </p>
<p>Each row is defined by apostrophes (' ').</p>
<p>"myArea" will span the first two columns, in the first two rows:</p>

<div class="grid-container">
  <div class="item1">1</div>
  <div class="item2">2</div>
  <div class="item3">3</div>  
  <div class="item4">4</div>
  <div class="item5">5</div>
  <div class="item6">6</div>
  <div class="item7">7</div>
  <div class="item8">8</div>
  <div class="item9">9</div>
  <div class="item10">10</div>
  <div class="item11">11</div>
  <div class="item12">12</div>
</div>

</body>
</html>