Introduzione

In questa sezione troverete la documentazione per utilizzare la versione personalizzata di Bootstrap per Mlol.

Il design dell'applicazione viene creato in Figma. All'interno del progetto in Figma vengono utilizzare le variabili per attribuire stili o dimensioni agli elementi grafici. Le varaibili sono state ricreate in base a quelle presenti all'interno di Bootstrap in _variable.scss.

Esempio di variabili in Figma

Figma non ha la flessibilità di scss quindi non è possibilie ricreare tutte le variabili di Bootstrap.

Successivamente Sono state ricreate le componenti di Bootstrap come componenti di Figma in modo da essere utilizzate nel progetto ed agevolare la fase di sviluppo.

A sinistra le componenti di Figma, a destra di Bootstrap

Oltre ai componenti di base sono stati creati dei nuovi componenti di Figma (ad esempio la card della risorsa) che andranno poi implementate dagli sviluppatori.

Quando vengono modificate delle variabili in Figma corrispondenti a delle variabili in Bootstrap, come ad esempio i colori del tema, viene anche aggiornata la versione personalizzata di Bootstrap. L'aggiornamento viene effetturato dai designers tramite un plugin di Figma appositamente sviluppato.

Schermata del plugin

Il plugin esporta le varibili di Figma e le salva su un repository su Github. All'interno di questo repository le variabili di Figma vengono trasformate ed adattate a quelle di Bootstrap e successivamente viene creata la versione personalizzata. Il progetto è automatizzatro tramite Github Actions.

Ogni volta che viene aggiornata la versione personalizzata di Bootstrap, viene aggioranta anche la pagina cheatsheet dove si possono vedere le componenti di base stilate in base alla personalizzazione. Inoltre nella pagina releases si possono trovare tutte le versioni pronte per il download.

Download e installazione

Come scaricare l'ultima versione aggioranta della versione personalizzata di Bootstrap

scaricare l'ultima release dalla qui in formato .zip
decomprimere la cartella, al suo interno ci sono due cartelle: css/ e scss/

css/

Nella cartella css si trovano il file custom_bootstrap.css e la cartella fonts. Il file custom_bootstrap.css non è minificato e sostituisce il file di Bootstrap originale. Può essere importato nel progetto come un normale file css.

scss/

Nella cartella css si trovano il file custom_bootstrap.scss e la cartella fonts. Il file custom_bootstrap.scss contiene tutte le variabili di Bootstrap modificate ed è strutturato in base alla documentazione ufficiale (opzione B).

La cartella fonts deve essere nella stessa cartella del file css o scss.

Icone

Nel design vengono usate le icone di Bootstrap. Per l'installazione e utilizzo seguire la documentazione ufficiale.

Temi segmenti

Per ogni diverso segmento progettato (Biblioteche, Scuole, Università, DH e Corporate) possono esservi delle variazioni di colore e stile. Per non creare pacchetti diversi ed ottimizzare gli stili css condivisi utilizziamo i Color modes.

Tutti gli stili necessari sono già inclusi nel pacchetto rilasciato e per cambiare il tema basterà cambiare l'attributo data-bs-theme della pagina HTML. Il tema di default è quello di Biblioteche e non necessita di essere specificato in partenza.

<html lang="en" data-bs-theme="scuole">...</html>

I temi disponibili al momento sono i seguenti:

Biblioteche (default) light o rimuovere il tag data-bs-theme
Scuole scuole
Università universita
DH dh
Corporate corporate

Da Figma a Bootstrap

La parte di design sia per Desktop che per Mobile è implementata in Figma. La visualizzazione delle schermate avviene tramite il Dev Mode.

Se è la prima volta che si utilizza il Dev Mode qui c'è la documentazione di base

Il Dev Mode è un aiuto per gli sviluppatori per implementare la parte di design dell'interfaccia. Ci sono 2 parti principali:

lo stile
il layout

Stile

Per la parte dello stile (tipografia, colori, bottoni, etc) è già praticamente tutto coperto dalla personalizzazione di Bootstrap fornita. Le componenti ufficiali di Bootstrap sono già stilate in base al design su Figma. Molto importanti sono le utility class e gli helpers di Bootstrap che contengono le classi css da utilizzare anche al di fuori delle componenti.

Utility class

Le Utility class minimizzano la scrittura di css. Se usate bene sarà raro scirvere nuove classi css. Qui si trova la documentazione. Se ad esempio dobbiamo stilare un elemento che non è parte di un componente di Bootstrap ci basterà selezionarlo per vederne le proprietà.

Selezione di un elemento in Figma

Proprietà di un elemento

Si può vedere come il colore di sfondo sia danger e il bordo in basso si arrotondato. Entrambe le proprietà hanno il loro corrispettivo nelle utility class: background e borders. Da qui si evince che il codice sarà:

<div class="bg-danger rounded-bottom-1">Non disponibile</div>

e non ci sarà bisogno di scrivere css aggiuntivo come:

.my-div{
  background-color: #BF3636;
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

Tipografia

Il testo base e i titoli (headings) sono già stilati secondo la personalizzazione di Bootstrap. Se si seleziona un heading in Figma vedrò tra le proprietà di quale si tratta.

Selezione di un heading in Figma

Proprietà un heading

In questo cas l'heading è h2 che quindi risulterà nel seguente codice:

<h2>MLOL App Reader</h2>

Tutti gli altri testi sono dentro un generico componente Body, nelle proprietà si puà vedere la dimensione del testo. Se è normal non c'è bisogno di applicare classi

Proprietà testo normale

<p>MLOL Ebook Reader è l'app di lettura di MLOL...</p>

Se invece cambia la dimensione, sarà espressa con le scale delle utility class, ad esempio fs-2.

Proprietà testo con dimensione diversa

<p class="fs-2">2</p>

Nelle proprietà Selection colors, nel caso non sia utilizzato il colore base, è indicata una variabile che richiama uno dei colori del tema o altre varianti del colore di base

Qui la documentazione per i colori dei testi in Bootstrap.

Qui la documentazione per lo stile dei testi in Bootstrap.

Proprietà testo con colore diverso

<p class="text-body-tertiary">Maurizio De Giovanni</p>

La variazione della dimensione del testo tra desktop e mobile viene gestita in maniera automatica, ad eccezione se la dimensione viene forzata. Qui la relativa documentazione.

Icone

Selezionando una icona, nella sezione assets viene indicato il nome, ad esempio book

Sezione assets delle icone

Il nome può essere cercato sulla documentazione ufficiale per avere tutti i dettagli di utilizzo

Ricerca del nome sulla documentazione ufficiale

Componenti

Le componenti presenti nella documentazione ufficiale di Bootstrap posso essere utilizzate e saranno personalizzate in base al desgin. Per avere una anteprima delle componenti stilate di può visitare la pagina cheatsheet che è aggioranta automaticamente con l'ultima release del design. Per ogni sezione della cheatsheet c'è un link diretto alla documentazione ufficiale.

Selezionando ad esempio un bottone su Figma, si può notare come il componente di Figma abbia lo stesso nome e come abbia una serie di proprietà che provano a mappare le diverse varianti che esistono di esso.

Il concetto di componente in Figma è diverso da quello di Bootstrap o in generale di web component.

Selezione di un bottone in Figma

Proprietà del componente Button

In questo caso il bottone è di tipo primary e con l'opzione outline attiva. Da documentazione ufficiale di potrà vedere il codice oltre che avere l'anteprima nel cheatsheet.

<button type="button" class="btn btn-outline-primary">Button</button>

Layout

Per la parte di layout, ovvero come posizionare gli elementi in pagina, ci sono delle funzionalità che aiutano lo sviluppo:

la griglia
le proprietà della funzionalità auto layout
le variabili di spaziatura

Griglia

Per attivare la griglia bisogna usare la combinazione di tasti ctrl + g. La griglia è a 12 colonne e rispetta le dimensioni e spaziature di Bootstrap. La griglia è pensata come aiuto a livello di layout di pagina per il posizionamento delle componenti e non come riferimento all'interno dei singoli componenti.

La griglia attiva

Se prendiamo in considerazione le 2 card grandi a centro pagina possiamo vedere come occupino 6 colonne ciuscuna, mentre nella schemata mobile diventano 12. Il codice quindi sarebbe:

<div class="row">
 <div class="col-12 col-md-6">card component</div>
 <div class="col-12 col-md-6">card component</div>
</div>

Rimandiamo alla documentazione completa per le diverse possibilità.

Auto layout

Per posizionare e alliniare gli elementi in Figma si utilizza la funzionalità auto layout. Questa funzionalità ricrea in parte il comportamento di flex-box in css. Qui trovate la documentazione di Figma, mentre qui e qui alcuni articoli che spiegano la similitudine con flex-box.

Prendendo in considerazione la card di sinistra: cliccando sul contenitore possiamo vedere che ci sono 3 elementi e che è utilizzato il column layout (in altro a destra)

Selezione del componente

Dettaglio auto layout di tipo column

Il layout column di Figma si traduce nella direzione column di flex-box, quindi utilizzando le utility class di Bootstrap relative a flex-box diventa:

<div class="d-flex flex-column">
 <div>element 1</div>
 <div>element 2</div>
 <div>element 3</div>
</div>

I primi 2 elementi contengono sono un heading e un testo mentre l'ultimo contiene ha un bottone e un'immagine. Selezionandolo si possono vedere le proprietà di auto layout.

Auto layout direzione row con giustificazione space-between

Proseguendo dall'esempio precendente:

<div class="d-flex flex-column">
 <h2>heading</h2>
 <p>text</p>
 <div class="d-flex justify-content-between">
  <div>button</div>
  <div>image</div>
 </div>
</div>

Variabili di spaziatura

Per gestire le spaziature degli elementi all'interno delle componenti sono utilizzati 2 set di variabili: uno che corrisponde al padding e uno al margin. Le variabili richiamano nomenclatura delle utility class di spacing di Bootstrap.

Valori di paddind e margin

In Bootstrap ci sono diversi livelli di padding e margin che vanno da 0 (0 rem) a 5 (3 rem). Per esempio aggiungendo l'utility class .p-5 ad un elemento si aggiungerà un padding di 3 rem. Nell'immagine sopra possiamo vedere come il contenitore abbia un padding di livello 4, l'heading un margine infefriore di livello 3 e così anche il testo.

<div class="p-4 d-flex flex-column">
 <h2 class="mb-3">heading</h2>
 <p class="mb-3">text</p>
 <div class="d-flex justify-content-between">
  <div>button</div>
  <div>image</div>
 </div>
</div>

Mettendo insieme quanto spiegato precedentemente nella documentazione il risultato finale sarà:

<div class="p-4 d-flex flex-column">
 <h2 class="mb-3">MLOL App Reader</h2>
 <p class="mb-3">MLOL Ebook Reader è l'app di lettura di MLOL, disponibile per computer (Windows, MacOS, Linux), smartphone e tablet (iOS e Android) in una versione completamente rinnovata.</p>
 <div class="d-flex justify-content-between">
  <button class=" btn btn-outline-primary">Scopri la nostra app! <i class="bi bi-arrow-right"></i></button>
  <img src="./app-logo.png" width="124" height="124">
 </div>
</div>

Ecco il risultato:

MLOL App Reader

MLOL Ebook Reader è l'app di lettura di MLOL, disponibile per computer (Windows, MacOS, Linux), smartphone e tablet (iOS e Android) in una versione completamente rinnovata.

In generale la parte responsive può essere gestita sempre con le utility class che hanno la possibilità di definire il loro valore per ogni break points, senza scrivere css aggiuntivo.

Mobile Desktop

Sorgente:

<div class="bg-white px-3 py-4 px-md-4 rounded-4">
	<h2 class="mb-3">MLOL App Reader</h2>
	<p class="mb-3">
		MLOL Ebook Reader è l'app di lettura di MLOL, disponibile per computer (Windows, MacOS, Linux),
		smartphone e tablet (iOS e Android) in una versione completamente rinnovata.
	</p>
	<div class="d-flex flex-column flex-md-row align-items-center align-items-md-end justify-content-md-between">
		<button class="order-1 order-md-0 btn btn-outline-primary">
			Scopri la nostra app!
			<svg
				xmlns="http://www.w3.org/2000/svg"
				width="16"
				height="16"
				fill="currentColor"
				class="bi bi-arrow-right ms-2"
				viewBox="0 0 16 16"
			><path fill-rule="evenodd" d="M1 8a.5.5 0 0 1 .5-.5h11.793l-3.147-3.146a.5.5 0 0 1 .708-.708l4 4a.5.5 0 0 1 0 .708l-4 4a.5.5 0 0 1-.708-.708L13.293 8.5H1.5A.5.5 0 0 1 1 8" />
			</svg>
		</button>
		<img class="order-0 order-md-1 mb-4 mb-md-0" src="./app-logo.png" width="124" height="124" />
	</div>
</div>

Questo è puramente un esempio!