Impostare ogni elemento con stile

Tipografia e immagini nel web di Bootstrap

di

thumbnail

29

giu

2018

I concetti di partenza che stanno dietro all’applicazione degli stili tipografici in un framework di grande diffusione.

[Pubblichiamo un estratto da Web design con Bootstrap, guida completa allo sviluppo progettuale di siti e pagine responsive, che profitta del lavoro messo a disposizione di tutta la comunità dai designer di Twitter.]

Reboot

Per iniziare serve confidenza con il concetto di reset CSS. Reboot, parte integrante di Bootstrap, si occupa proprio di questo. Analizziamo un template di partenza, grid.html, in cui è stato usato l’elemento h1.

h1, h2, h3, h4, h5, h6 {
margin-top: 0;
margin-bottom: .5rem;
}

 

Effettivamente ciò che Reboot fa è proprio lavorare sui singoli elementi per normalizzarne il comportamento e uniformarlo su browser differenti.

Fondamentali, ancor prima dei singoli tag, sono gli elementi html e body. Reboot imposta per quegli elementi i seguenti stili:

html {
font-family: sans-serif;
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-ms-overflow-style: scrollbar;
-webkit-tap-highlight-color: transparent;
}
body {
margin: 0;
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",¬ Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
font-size: 1rem;
font-weight: 400;
line-height: 1.5;
color: #212529;
text-align: left;
background-color: #fff;
}

 

Come potete vedere, Reboot si preoccupa di settare parametri di base quali font, color, text-align, background, line-height, affinché il testo venga uniformato. Un aspetto che non abbiamo affrontato è l’unità di misura rem. Conosciamo em, ma non rem. La differenza sostanziale tra le due è che la prima eredita la grandezza dal padre, mentre la seconda la eredita dall’unità root. È piuttosto complesso mantenere una buona leggibilità e usabilità quando l’unità di misura che si usa dipende dal padre. Un esempio pratico potrebbe essere questo:

<div class="row">
<div style="font-size:20px">
<div style="font-size:2em">TEST</div>
</div>
<div style="font-size:2em">TEST</div>
</div>

 

Il secondo TEST sarà di dimensioni inferiori rispetto al primo, poiché fa riferimento all’unità root che, come abbiamo detto, corrisponde di norma a 16 pixel. Se invertissimo em con rem, i due TEST risulterebbero identici. Bootstrap usa rem.

Oltre a quanto visto, Reboot setta qualsiasi elemento come border-box.

*, ::after, ::before {
box-sizing: border-box;
}

 

Per quanto riguarda l’uso dei font, abbiamo visto una lista dichiarata all’interno dell’elemento body. Questa tecnica consente di interagire con i font nativi. Bootstrap ha optato per una scelta nativa piuttosto che appoggiarsi a font esterni. Quella lista copre i browser più comuni e contiene appunto font nativi, che negli ultimi anni hanno sensibilmente migliorato la gestione dei font. Basti pensare a Roboto, un font di successo sviluppato da Google, diventato font di default del sistema operativo Android. Procediamo adesso all’analisi delle classi Bootstrap a servizio della tipografia.

Tipografia

Bootstrap è molto attento a ciò che riguarda il testo o ancora meglio a ciò che ruota attorno alla tipografia web. Le classi che abbiamo appena visto, font-family, font-size, line-height, appartengono a un insieme di variabili che sono definite all’interno del file _variables.scss. Abbiamo già detto che è possibile compilare Bootstrap e abbiamo usato dei mixin per le media query. In quell’occasione abbiamo scaricato Bootstrap in locale e lo abbiamo importato all’interno del nostro progetto. In questo specifico caso, tutte le variabili riferite alla tipografia possono essere cambiate direttamente dal file, così come altre impostazioni. Sass si occuperà di ricompilare il tutto. Ecco un estratto del file _variables.scss.


//
Fonts
//
// Font, line-height, and color for body text, headings, and more.
// stylelint-disable value-keyword-case
$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI",¬ Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",¬ "Segoe UI Symbol" !default;
$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,¬ "Liberation Mono", "Courier New", monospace !default;
$font-family-base: $font-family-sans-serif !default;// stylelint-enable¬ value-keyword-case
$font-size-base: 1rem !default; // Assumes the browser default,¬ typically `16px`
$font-size-lg: ($font-size-base * 1.25) !default;
$font-size-sm: ($font-size-base * .875) !default;
$font-weight-light: 300 !default;
$font-weight-normal: 400 !default;
$font-weight-bold: 700 !default;
$font-weight-base: $font-weight-normal !default;
$line-height-base: 1.5 !default;

 

Come si evince, Reboot applica ciò che viene definito all’interno del file _variables.scss. Per quanto sia sconsigliabile ai neofiti modificare le variabili globali di Bootstrap, tra i professionisti non è poi così raro approcciare questo file.

Titolo

Bootstrap personalizza gli elementi da h1 fino a h6. Nel caso in cui si decidesse di modificarne lo stile, sempre modificando il file _variables.scss, è possibile comunque utilizzare le classi Bootstrap .h1, .h2, .h3, .h4, .h5 e .h6.

$h1-font-size:                $font-size-base * 2.5 !default;
$h2-font-size: $font-size-base * 2 !default;
$h3-font-size: $font-size-base * 1.75 !default;
$h4-font-size: $font-size-base * 1.5 !default;
$h5-font-size: $font-size-base * 1.25 !default;
$h6-font-size: $font-size-base !default;

 

Altro possibile stile da applicare ai titoli è definito dalla classe display-. Questa classe applica a un testo un font molto grande. Prendiamo come esempio display-1 (nella prossima figura).

La classe è così definita:

.display-1 {
font-size: 6rem;
font-weight: 300;
line-height: 1.2;
}

 

Testo con classe display

Screenshot di testo cui è stata applicata la classe display.

 

La classe display è applicabile per quattro livelli, display-1, display-2, display-3, display-4, con l’ultimo della lista che è di dimensioni nettamente inferiori al primo.

Testo

Le classi che permettono di applicare uno stile al testo sono diverse. Analizziamole velocemente.

Lead

.lead {
font-size: 1.25rem;
font-weight: 300;
}

 

La classe lead consente di specificare un paragrafo marcando maggiormente il testo, che viene ingrandito rispetto alla grandezza di default e cui viene applicato un leggero effetto bold.

<p class=”lead”>Lorem ipsum dolor sit amet, consectetur adipisci elit, sed eiusmod tempor incidunt ut labore et dolore magna aliqua.</p>

Testo con classe lead

Screenshot di un testo a cui è applicata la classe lead.

 

Nella figura qui sopra si nota la differenza tra un paragrafo con classe lead e uno a cui non è stata applicata.

Blockquote

La classe blockquote formatta il testo, un po’ come lead, ingrandendo leggermente il corpo e applicando un margin bottom (nella prossima figura).

<blockquote class="blockquote">
<p>Il mondo del lavoro nel campo informatico non è mai stato così fiorente e le¬ competenze maggioremente ricercate sono quelle legate allo sviluppo web e¬ mobile.</p>
<p class="blockquote-footer">Vincenzo Giacchina in <cite>Sviluppare applicazioni¬ con Angular</cite></p>
</blockquote>

 

Testo con classe blockquote

Screenshot di un testo a cui è applicata la classe blockquote.

 

Allineamento

Le classi che si occupano di allineare il testo sono text-center, text-right e text-left. Il loro utilizzo è davvero semplice (nella figura qui sotto).

<p class=”text-right”>Lorem ipsum dolor sit amet!</p>

Testo con classe text-right

Screenshot di un testo a cui è applicata la classe text-right.

 

List

I tag ul e li appartengono alla lista degli elementi più utilizzati. Essi sono usati per creare elenchi, che di default sono puntati. Bootstrap consente di eliminare lo stile di default tramite la classe list-unstyled (in figura) e di rendere l’elenco orizzontale con l’uso della classe list-inline.

<ul class="list-unstyled">
<li>Home</li>
<li>Order</li>
<li>Account <ul class="list-inline">
<li class="list-inline-item">Delete</li>
<li class="list-inline-item">Edit</li>
</ul>
</li>
<li>Help</li>
<li>Logout</li>
</ul>

 

Elenco

Screenshot di un elenco.

 

È possibile, per quanto sia caldamente sconsigliato, modificare le classi Bootstrap, come nell’esempio appena proposto. È sconsigliato perché nessuno vieta di definire una nuova classe e aggiungerla all’elemento in questione. Modificare una classe Bootstrap inficia il suo riutilizzo e ne diminuisce la manutenibilità.

.list-inline {
padding-left: 10px;
font-size: 0.8rem;
}

 

Truncate

La classe truncate-text consente di troncare il testo che sfora la larghezza definita di un elemento (nella figura che segue).

<div class=”col-4 text-truncate”>Lorem ipsum dolor sit amet, consectetur adipisci elit</div>

Testo troncato

Screenshot di un testo troncato.

 

Tabelle

Le tabelle sono i componenti HTML che hanno caratterizzato lo sviluppo del Web. Bootstrap ha creato classi per gestirne lo stile.

<table>
<thead>
<tr>
<th scope="col">Nome</th>
<th scope="col">Cognome</th>
</tr>
</thead>
<tbody>
<tr>
<td>Vincenzo</td>
<td>Giacchina</td>
</tr>
<tr>
<td>Chiara</td>
<td>Clemente</td>
</tr>
<tr>
<td>Walter</td>
<td>Giacchina</td>
</tr>
</tbody>
</table>

 

Bootstrap ha definito la classe table. Applichiamola per notare quanto la tabella venga modificata (nelle prossime due figure).


<table class="table">

 

Tabella senza stile

Screenshot di una tabella a cui non è stato applicato uno stile.

 

Tabella con classe table

Screenshot di una tabella con classe table.

 

È possibile modificarne ulteriormente lo stile applicando altre classi oltre table, quali table-dark, table-striped, table-bordered, table-hover e table-sm. La classe table-dark stilizza la tabella invertendo i colori, la tabella avrà così tonalità scure. Table-striped crea un effetto zebra, colorando in maniera alternata le righe della tabella. Table-bordered inserisce dei bordi, table-hover crea un effetto hover sulle righe e infine table-sm riduce la dimensione della tabella (nelle prossime due figure).

Tabella con classe table-dark

Screenshot tabella a cui è stata applicata classe table-dark.

 

Tabella con classe table-striped

Screenshot di una tabella a cui è stata applicata la classe table-striped.

 

Le classi possono essere combinate tra di loro. Oltre agli stili applicabili all’elemento tabella è possibile stilizzare le righe o le colonne utilizzando i colori Bootstrap).

<table class="table table-sm">
...
<tr class="table-secondary">...</tr>
<tr class="table-danger">...</tr>
<tr class="table-success">...</tr>
<tr class="table-light">...</tr>
...

 

Le tabelle inoltre possono essere avvolte attorno a un div fluido. Così facendo avremo un effetto responsive. Per far questo dobbiamo utilizzare la classe table-responsive.

<div class="table-responsive">
<table class="table table-sm">...</table>
</div>

 

La classe table-responsive permette di scrollare la tabella nel momento in cui la sua larghezza dovesse risultare più ampia di quella del container.

Immagini

Per quanto riguarda tutto ciò che ruota intorno alle immagini, Bootstrap implementa diverse classi. img-fluid applica uno stile fluido per immagini.

.img-fluid {
max-width: 100%;
height: auto;
}

 

Ciò che si ottiene con questa classe è un’immagine che si adatta al suo container, senza che venga deformata perché l’altezza è ridimensionata automaticamente per rimanere coerente con la larghezza. Infine la proprietà max-width settata al 100% garantisce che l’immagine non sarà mai più grande della sua risoluzione naturale.

Le immagini di tipo thumbnail (miniature) hanno una loro classe specifica: img-thumbnail. La classe in questione agisce sempre con un’azione fluida ma con uno skin differente, composto da un padding con un background bianco e un bordo arrotondato.

.img-thumbnail {
padding: .25rem;
background-color: #fff;
border: 1px solid #dee2e6;
border-radius: .25rem;
max-width: 100%;
height: auto;
}

 

È possibile applicare la classe rounded, che crea un leggero arrotondamento delle immagini. Inoltre è possibile gestire le classi relative alle immagini anche se inserite all’interno dell’elemento figure, tramite le classi figure, figure-img e figure-caption. Rispettivamente la prima setta un display-inline, permettendo così di allineare più figure, figure-img applica un piccolo margine e figure-caption un font-size del 90% e un colore grigio (#6c757d).

 

Web Design con Bootstrap: tipografia e immagini

Web design per tutti. Dai laboratori di Twitter.

 




Vincenzo Giacchina è uno sviluppatore e un amministratore di sistema con una grande passione per la scrittura. A 16 anni ha fondato una ezine chiamata NoFlyZone e negli anni ha collaborato con le principali realtà del mondo underground e di settore dedicate alla divulgazione su temi tecnici e informatici. Lavora con Angular dal 2013 sia in ambito desktop che mobile e segue costantemente l'evoluzione dello sviluppo web. È autore di Sviluppare applicazioni con Angular.

Letto 1.351 volte | Tag: , , , , ,

Lascia il tuo commento