 quanti nemici mi posso fare oggi in questa sala? Alzi la mano chi è che usa bootstrap foundation? Un framework. Ok, molto bene. Quindi, smagino che sarete tutti abbastanza interessati. Quindi stiamo parlando di CSS. Quando parliamo di framework CSS, in realtà il primo nome che ci viene in mente come abbiamo appena detto è bootstrap. Bootstrap ha avuto una diffusione impressionante. Ad oggi ho cercato delle statistiche online perché è difficile trovare statistiche su adozione di un framework CSS. È più facile trovarle su un framework Java. Script però apparentemente dicono che ci sono 18 milioni di installazioni attive che utilizzano bootstrap. Bootstrap nel corso degli anni chiaramente è diventato molto popolare. Ho aperto la strada a tutta un'altra serie di framework. Ce ne sono veramente a decine. I più famosi, i più recenti sono per esempio Bulma che è sviluppato in Flexbox, Tailwind, Materialize e ci sono tanti altri. Fondamentalmente l'obiettivo di questi framework è quello di metterci a disposizione un set di regole e componenti che ci permettono stanzamente di sviluppare un intero layout senza quasi mai aprire il foglio di stile. Perché stanzamente grazie a una sintassi ben precisa ci permettono di metterschiamo il markup e di creare il nostro layout. Quando sto preparando questa presentazione, non essendo più molto pratico del framework CSS, ho fatto un po' di ricerche per capire quello che è la percentuale di adozione perché la gente sceglie di utilizzare un framework o addirittura consigliano l'utilizzo di un framework. In tutti i vari forum, articoli, le risposte che ho trovato erano bene o male, sempre le stesse, non riconducibili a la velocità di implementazione, chiaramente, il fatto di avere un sistema di layout già pronto e l'ultima che sono abbastanza scettico vero best practice. Questi framework vengono ad addirittura suggeriti come delle vere proprio in the best practice. E negabile, come abbiamo detto, che bootstrap nel corso degli anni si ha guadagnato una grossa popularità, principalmente perché in passato le proprietà CSS che avevano l'isposizione non erano delle più semplici a utilizzare e bootstrap ci permetteva di risolvere tutta una serie di problemi di layout, chi si ricorda display table, per creare le layout anche complessi con una grossa compatibilità tra i vari browser. Oggi chiaramente questo grafico è abbastanza aggiornato ad agosto. La situazione è drammaticamente cambiata perché qui in basso vediamo che il nostro amico ifie19 si mili stanno lentamente scomparendo dal web, lasciando spazio a quello che sono browser più moderni e performanti. Queste sono alcune, diciamo, delle nuove tecnologie che ci mette l'isposizione di CSS che facilitano molto il lavoro di noi front end developer. Quindi a questo punto vi starete chiedendo qual è il mio problema con questi framework CSS. Semmeno funzionare abbastanza bene. Il mio problema, senza metterlo potrei assumere una parola, pigrizia. Nel senso che utilizzare questi framework ci rende pigri, non ci spinge a capire come funzionano le cose perché ci accontentiamo di avere il nostro bootstrap, lo installiamo e per magia abbiamo tutta una serie di componenti che poi non andremo a mai utilizzare. Tutto questo dovete capire però che ha un costo. Questo è abbastanza esostivo. Il file di griglia chiaramente non minificato di bootstrap comprende 3.718 righe di codice. Sono qualcosa come 800 classi, solamente il file di layout. Diretemi, minifichiamolo. Minificato sono 48k che forse è un po' troppo per un file di solamente layout. Questo è un ottimo strumento che ci mette a disposizione Chrome che si chiama coverage tool e quanti di voi lo utilizzano? Ok, bene. Questo strumento qua ci permette stanzamente di analizzare la percentuale di CSS inutilizzato in una pagina per darci in qualche modo un'idea di quello che è il lavoro che abbiamo fatto, se l'abbiamo fatto bene l'abbiamo fatto male. Ho fatto un piccolo test su un sito preso direttamente dalla Galleria di progetti realizzati con bootstrap. E come potete vedere in fondo il file relativo a bootstrap min, stanno inculendo tutto bootstrap in questo sito qua, è il 98.6% di CSS inutilizzato. Non penso che sia necessario aggiungere altro. Questo cosa ci dice stanzamente, ci dice che nella maggior parte dei casi bootstrap viene utilizzato per la griglia e poco più. Qua in realtà un sistema estremamente complesso e ricco di componenti, circa una ventina di componenti sono sbaglio e una libreria JavaScript. Oggi fondamentalmente nella maggior parte dei casi soprattutto per quanto riguarda lo sviluppo di un sito web possiamo fare anche a meno di utilizzare queste librerie. Cosa dobbiamo fare però se vogliamo fare a meno di bootstrap dobbiamo imparare sensamente a crearci un nostro workflow che sia chiaramente flessibile, facile da mantenere nel tempo e scalabile. Sono tutte belle parole ma in pratica poi non è così semplice metterle in pratica. Per farlo cosa possiamo fare? Possiamo utilizzare preprocessori come SAS, S, Post-SS e quello che volete. Taskrunner come Grant, GALP che sono estremamente utili per ottimizzare il nostro workflow. Ma prima di tutto quello che dobbiamo fare è imparare i concetti fondamentali, gli aspetti fondamentali che sono alla base di ogni single framework ss ovvero una sintasi chiara e precisa, un set di componenti come gestire dei componenti e soprattutto quello che viene usato più di frequente ovvero creare un layout che sia ovviamente responsivo. Iniziamo quindi guardando, parlando del primo aspetto ovvero la sintasi. Tutti scrivono ss, tutti sanno scrivere ss, ss e ss è molto semplice da scrivere ma è molto facile ritrovarsi in poco tempo scrivendolo male con un foglio di stile ingestibile. La parte fondamentale di ogni framework è appunto la sintasi quindi come prima cosa dobbiamo capire come organizzare il nostro foglio di stile. Vediamo adesso alcune metodologie che ci consentono stanzialmente di imparare a scrivere ss. La prima atomic ss, atomic ss è anche un'etnologia che si trova spesso e volentieri nei framework ss perché è un approccio che predilige piccole classi di utilizzabili con un singolo scopo e non mi basati su una funzione visuale. Cosa vuol dire questo? Vuol dire che se noi avremmo bisogno di creare una regola per, per esempio, float write andremo a scrivere una classe di questo tipo. Esistono due modi per scrivere atomic ss, la sintasi atomic ss può essere abbreviata o estesa quindi voi potreste anche scrivere float, trattino, write, sarebbe comunque valido. Questa, quella classe in alto per esempio, u50 è una classe che trovate anche in bootstrap. Il secondo approccio è oo css, obbiettoriente css ed è un approccio fondamentale, il primo approccio che ci spinge a ragionare sul nostro codice. Un approccio basato su due principi fondamentali che è la separazione della struttura dalla presentazione e il secondo principio è separare il contenitore dal contenuto. Vediamo cosa vuol dire. La separazione della struttura, della struttura dalla presentazione vuol dire astrarre quello che sono gli elementi di, chiamiamo la skin da quello che sono un, un set di classi. In questo caso come potete vedere la regola di bordo e di background che è comune in entrambi i nostri componenti, l'andremo ad astrarre, creare una classe che contiene solamente quella regola lì e lasciare vuoti gli altri elementi. In questo modo se domani andremo a creare un altro componente potremmo associarli naturalmente quella classe senza ripetere ultimamente queste due regole qua. Il secondo principio invece è che riguarda la separazione delle, che sono le regole proprietare di un elemento dal suo contesto di applicazione. In questo caso nell'esempio vedete che abbiamo due H3 associati una volta alla sideburn, una volta al footer e una sovrascrittura all'interno del footer di una regola text transform e una cambia di colore. Fa questo punto dove cosa andremo a fare? Andremo a prendere tutte le classi che sono, tutte le regole che sono in comune. Creeremo una nuova classe che andremo a associare a questo punto in nostre H3 e solamente nei contesti andremo ad aggiungere quello che sono le regole proprietarie che Scalable and Modular CSS è una metodologia flessibile che ci porta ad analizzare il nostro processo e suddividere fondamentalmente tutto il nostro codice in cinque macro categorie. Base, Layout, Module, State e Team. Questo è anche in qualche modo... Sente? Ok, ogni tanto siamo qui. Ok. In Base, stanzialmente, che potrebbe anche essere una cartella per quello che ne sappiamo, andremo a scrivere tutte le regole per quello che sono gli elementi di default come l'HTML, Body, H1, Web. Andremo a inserire tutte quelle regole che sono relative agli elementi di layout principali, come per esempio Leather, il Footer, il Content. Questa è l'ultima parte, è una prassi che alcuni usano prefixare tutte le regole che vanno a inserire in layout con un L tratino così che scorrendo il nostro CSS sarà più facile individuare quelle che sono appunto le regole appartenenti al layout. Module lo dice la parola stessa. Stanzialmente in questa classe di regole andremo a inserire tutti quelli che sono i componenti e sono intesi per essere riutilizzati all'interno del nostro progetto, come una Sidebar, la Navigation Bar e Simen. State, invece, è sostanzialmente la definizione dove andremo a inserire tutte le regole che definiscono un comportamento di un elemento, per esempio un accordio, un espansso, una voce di menu selezionata. Infine in Team invece andremo a mettere tutte quelle regole che definiscono la parte di skin diciamo del tema, quindi tutto quello che è colore, font per i nostri oggetti. Un'altra tecnica che è quella di cui ho deciso di parlarvi oggi, che è quella che stanzialmente uso ultimamente più di frequente è BAM, ovvero Block Element Modifier. Block Element Modifier è un approccio di definizione di classi basato sull'identificazione di componenti o blocchi. Ciascuno dei quali verrà il suddiviso appunto in tre parti. Il blocco, l'elemento e il modificatore o variante. Con blocco intendiamo un elemento che non ha dipendenze. La sintasi di BAM prevede che l'elemento venga collegato al sedettore del blocco tramite un doppio underscore. Mentre il modificatore invece può essere associato sia un elemento che a un blocco e viene collegato al sedettore con un singolo underscore. Cerchiamo di vedere un esempio per capire meglio come funziona nel mondo reale. Qua abbiamo un esempio di lista, con all'interno un link, uno span. Se noi dovesse mandare a scrivere delle regole CSS per evidenziare questi elementi, potremmo andare a scrivere un qualcosa del genere che, come potete vedere, inizia a diventare un po' complesso da sovrascrivere perché è molto specifico come classi. In BAM, se noi andiamo a scrivere in BAM le classi, questo è il modo sbagliato di farlo, ovvero cercare di replicare la struttura del DOM. Qual è l'errole in questo caso qua che stiamo cercando di replicare la struttura del DOM. Esiste una regola molto semplice da teneramente quando si cerca di dare le classi in BAM, ovvero che un elemento è sempre parte di un blocco e non di un altro elemento. Questa di conseguenza è la tecnica giusta per dare i nomi, assignare i nomi ai nostri elementi. I modificatori invece come funzionano? Come abbiamo visto prima, il modificatore adesso proviamo a collegarlo a il nostro menu item, per esempio. Diciamo che vogliamo creare uno stato di highlighted con il nostro colore dominante nel menu item. Tutto quello che dovremmo fare sarà quello di aggiungere al nostro menu item una classe con il nostro modificatore highlighted. I principali vantaggi di questa metodologia secondo me sono l'alta legibilità del colice perché naturalmente avremmo un codice molto più semantico e più facile da leggere. La modularità perché ovviamente, essendo basato su l'idealificazione di blocchi, sarete portati naturalmente a creare dei componenti che saranno sviluppabili individualmente a prescindere dal loro contesto. Ovviamente la scalabilità perché se stiamo isolando i nostri blocchi sarà più facile intervenire man mano che cresce il nostro progetto. Prima ho accennato all'utilizzo di preprocessori da Scrunner. Quando andiamo a mantenere un progetto di grosse dimensioni, ma anche di medie dimensioni, diciamo che oggi è difficile farlo senza valersi di un preprocessore. Personalmente mi trovo molto bene con SAS e lo uso ormai da anni, abbinato a Grand e SAS ci mette a disposizione tanti strumenti utili ad ottimizzare il nostro workflow come possono essere i mixing, le variabili e le funzioni soprattutto. SAS inoltre ci permette di scriver css in modo un pochettino più snello anche, ovvero in questo caso noi in SAS che si può scrivere in due modi, con la sintasi SAS o SCSS. Preferisco personalmente la sintasi SCSS perché mette delle parentesi, la sintasi SAS prevede che non ci siano parentesi. Scrivendo questa porzione di codice in SCSS, una volta compilato da SAS, il risultato sarà un set di regole nel modo classico. Abbiamo visto BAM, BAM può essere reinterpretato con SAS semplicemente annidando i nostri selettori di elementi, lo stesso vale chiaramente anche per i modificatori. Parliamo adesso di componenti, questi sono i componenti di bootstrap. Come abbiamo detto una parte veramente rilevante di questi framework sono questi componenti qua che ci metteranno in disposizione che a volte hanno con la controparte javascript. In realtà come abbiamo visto se utilizziamo una metodologia di organizzazione del codice come obgettore entre css e osmac siamo portati naturalmente a creare già dei componenti quindi in teoria non dovremmo anche schipparla questa parte perché non dovremmo avere bisogno di avere i propri componenti. Vediamo però come creare dei componenti un pochettino più intelligenti con SAS utilizzando quello che sono i mixin. I mixin sono dei gruppi di regole che possiamo riutilizzare più volte all'interno del nostro progetto e accettano anche dei parametri di ingresso questi mixin rendendo di fatto queste piccole utilità delle quasi delle vere proprie funzioni che possono cambiare all'interno del nostro codice. Il vantaggio che hanno i mixin è che fin tanto che non li applicchiamo non hanno un peso diretto perché non vengono processati da SAS e quindi rimangono lì nel nostro codice sorgente che poi non verrà incluso nel nostro progetto finale. Come funzioni i mixin? I mixin vengono definiti con appunto la regola chiacciola mixin seguita da il nome del nostro mixin che sarà il nome che andremo ad utilizzare all'interno del nostro progetto per ricchiamarlo e quindi per farli lo processare a SAS e quindi per ricchiamarlo noi all'interno del nostro selettore andremo a usare la regola chiacciola include seguita dal nome del mixin. Mixing come abbiamo detto possono accettare i parametri diciamo che senzalmente li possiamo suddividere in due macro categorie. La categoria di mixin è statici e la categoria dei mixin è dinamici. Vediamo un esempio di mixin statico. Questo è un semplice mixin che resetta senzalmente lo stile di una lista quindi noi andremo a scrivere all'interno della regola mixin queste tre regole che verranno ricchiamata all'interno del nostro progetto nav well include e verranno processate da SAS in questo modo. Ora questo è un esempio chiaramente molto semplice. Vediamo un mixin dinamico. Il mixin dinamico come abbiamo detto accetta dei parametri in ingresso quindi la prima cosa da fare quando andremo a definire il nostro mixin dinamico sarà quello di specificarli i nostri parametri in questo caso abbiamo detto che abbiamo una larghezza che è obbligatoria e un'altezza che se non viene specificata prende come valore di default il valore della larghezza. Questo mixin qua quando andiamo a ricchiamarlo all'interno del nostro progetto li dovremmo specificare obbligatoriamente un parametro che corrisponde appunto alla nostra larghezza. Il risultato appunto di compilazione è quello che vedete. Questo cosa ci porta? Ci porta naturalmente a pensare a quello che possono essere dei mixin magari più legati a quello che ha il componente quindi ipotizziamo ad avere un nostro bottone, un mixin bottone abbastanza complesso che magari accetta determinate varianti e riciamarlo all'interno del nostro progetto come bottone primale e bottone secondario. Come Bootstrap è una libreria che ci aiuta a snellire il nostro lavoro anche per SAS esistono delle librerie già pronte con mixin già pronti con utilità già pronte. Per anni ho usato Barbon che ritengo uno dei più assettici dal punto di vista stilistico perché si tratta solamente di avere un set di utilità molto generiche. Il problema di utilizzare queste librerie è lo stesso problema stanzialmente di utilizzare un fremo css. Si rischia all'effetto mattone ovvero mi porta dietro una grossa quantità di utilità in alcuni casi alcuni di queste librerie qua hanno già dei bottoni hanno già degli accordion e si finisce � se per essere limitati dal punto di vista visuale più che avere un vantaggio. Tra tutti Barbon è quello più assettico perché non ha componenti come bottoni, sono solamente in tutt'utiliità che ci aiutano a snellire in qualche modo lo sviluppo. Questo è un consiglio derivato anche dall'esperienza del mio socio, l'alto PHP ovvero quando come in PHP quando andate a creare una funzione non riempitela di parametri perché non ve le ricorderete mai in sequenza quindi quando ho creato un mixin creatolo con pochi parametri uno due parametri sono già troppi perché se vi ritroverete a fare questo olio che state sbagliando probabilmente qualcosa all'interno del vostro lavoro e rassoviniamo alla parte di layout. Come avevamo detto è abbastanza rilevante all'interno di questi framework e se riesco a fare l'esperimento con l'archetto forse meglio, si sente? Sì no? Forse? Sì? Sì, diciamo che si sente. Allora quando parliamo di layout ad oggi abbiamo stanzialmente due opzioni tra cui scegliere flexbox o grid. Ho pensato di non te diarvi troppo con spiegazioni su quali sono le specifiche ma di farvi vedere quanto in realtà è molto semplice creare, non scopre se mi muovo se senti o no? Quante semplice creare stanzialmente un layout utilizzando flex o grid? Visto che c'è poco tempo c'è già uno spoiler ovvero per quanto mi riguarda la mia opinione è che questi due sistemi qua intanto non sono da considerare mutualmente esclusivi. Flexbox e grid sono fatti per lavorare insieme. Quello che dovete capire in realtà è quando dovete usare uno e quando dovete usare l'altro. Flexbox nonostante si possa realizzare un layout con flexbox è indicato esclusivamente per realizzare componenti mentre grid è pensato per realizzare layout. Il fatto che flexbox venga utilizzato per fare anche layout è un po' come una volta si usava il float per fare un layout o un display table per fare un layout ma questo non necessariamente era il modo corretto di farlo. Quindi vediamo se riusciamo a duplicare. Vediamo come realizzare un semplice layout compost da un header, un contenuto centrale, una sidebar e un footer. Quello che andremo a scrivere è un markup molto semplice e molto snello e vediamo adesso come come stilarlo creandolo una volta con flex e una volta con grid per vedere quali sono le differenze. Flexbox come anche grid funziona su un va applicato a un contenitore ok quindi in questo caso il nostro contenitore è il body. La prima cosa che dovremmo andare a fare sarà quello di assignarli una classe di display flex. A questo punto il nostro contenitore sta dicendo che tutti i suoi elementi all'interno sono influenzati da questa proprietà. Flexbox lavora su due assi sostanzialmente, l'asse orizzontale e l'asse verticale e già questo ci dovrebbe comunicare un qualcosa ovvero che non è propriamente indicato per fare un layout perché in questo caso il default di flex è row. Row vuol dire che tutti gli elementi sono disposti uno di fianco all'altro come se fossero flottati. Quindi la prima cosa da fare è dirgli con la regola flex direction che deve cambiare questo orientamento e a questo punto ci ritroviamo come se fossero elementi staccati uno sopra l'altro come di display block e già qui c'è un problema perché il markup che abbiamo scritto non è sufficiente per realizzare questo layout con Flexbox. Quello che dobbiamo fare è inserire un elemento con una classe diciamo contene, naturalmente il main e la nostra cyber in questo modo e adesso potremmo andare a associare al nostro elemento con classe container a sua volta così facendo andremo a dire che tutti gli elementi che sono figli del del body, figli primi del body sono elementi di modalità column. Ok ok. Mettestanzialmente gli elementi volta un altro display flex che di default abbiamo detto che era row quindi li dispone uno di fianco all'altro. Lo vedete già qui che nel senso io posso andare con display table, float non funziona bene la cosa. L'ideale in questi casi qua è quello di utilizzare container e tutto quello che ci serve. Ok grazie perfetto. Quindi quello che dovremmo fare sarà quello di associare al nostro body il display grid a questo punto e cosa succede? Succede che il browser crea una griglia invisibile nel nostro layout. Ok finito? Ok. La faccio breve. Esistono stanzialmente due regole in grid, quelle che ci permettono di definire il numero di colonne e quello che ci permettono di definire il numero di righe perché grid ci permette stanzialmente di spostare gli elementi all'interno di una griglia invisibile. Quindi questo cosa vuol dire? Vuol dire che rispetto a bootstrap non abbiamo bisogno di creare degli elementi di markup solo per riempire delle colonne, magari anche vuote oppure spostare gli elementi con delle classi abbastanza esoteriche. Noi abbiamo con grid la possibilità di definire a livello più astratto una griglia con grid template columns. Quindi in questo caso diciamo che facciamo un fraction e 20% e quello che è un set di righe. In questo caso abbiamo bisogno di tre righe, le leder, il contenitore con la sidebar e il footer, quindi grid template rows. In questo caso andremo a dire la prima è auto, la seconda è un one fraction e la terza è auto. A questo punto cosa ci manca? Ci manca posizionare questi elementi e ci viene in aiuto un'altra regola molto interessante che è grid template areas che ci consente di disegnare in qualche modo quello che sono le nostre aree di piazzamento degli elementi. In questo caso adesso iper semplifico diciamo che disegniamo le nostre prime due aree definite da leder, una definita dalla main content, una per la side e infine quelle per il footer. A questo punto tutto quello che dovremmo fare sarà dire a nostre elementi di posizionarsi con la regola grid area, all'interno delle posizioni che le abbiamo definito, quindi nel main non si sente più niente, è partito tutto. In questo modo utilizzando purtroppo non si riesce a vedere forse benissimo tutto. Noi abbiamo disegnato sostanzialmente quello che sono le nostre aree di piazzamento, li abbiamo detto quello che devono essere le due colonne perché non servono più 12 colonne se abbiamo bisogno veramente di due colonne di layout e quello che sono le nostre tre righe, infine siamo andati a posizionare i nostri elementi di markup nei rispettivi slot. Questo, vediamo se si riesce a fare un inspect da colice, come potete vedere ha creato una griglia invisibile che può essere rimanipolata ad ogni media query. Quindi questo adesso non riesco a riportare sulle altre slide perché è troppo complesso. Questo ci porta fondamentalmente a capire che le conclusioni non utilizzare necessariamente un framework che sono abbastanza ovvie, quello che dobbiamo fare è sempre crearci un sistema di sintassi che funziona, utilizzare un preprocessore o un task runner per ottimizzare il nostro workflow e quindi avere componenti che sono più facili da gestire e in generale quello di utilizzare sempre la tecnologia più appropriata per quello che stiamo andando a realizzare ovvero flex per i componenti e grid per essenzialmente il layout.