Dall'archivio articoli > HTML5

Un confronto tra Framework CSS: Foundation, Bulma, TailwindCSS e SemanticUI

di Morgan PizziniMorgan Pizzini, in HTML5,

Perchè è importante conoscere i framework CSS? In questo articolo faremo un panoramica attorno a tutto quello che riguarda il mondo degli stili CSS, il loro utilizzo e le diversità e/o peculiarità che ognuno di essi può portare alla nostra applicazione. Benché al momento si parli spesso di framework Javascript/Typescript come Angular, React o Vue, anche dal lato della progettazione del layout troviamo molte alternative. Nel mondo CSS si ha però un'ottica più conservativa nella selezione del prodotto, accade spesso che fatta la prima scelta la si perpetui su tutti i progetti, indipendentemente dai requisiti o dalle necessità.

Una ragione può essere ricercata nelle modalità implementative: se infatti un framework JS/TS si basa su regole stabilite all'interno del linguaggio, utilizzando variabili e metodi che possono avere molti punti in comune a volte intercambiabili, come abbiamo visto all'interno di questo articolo, nel CSS, esse possono variare a seconda della selezione effettuata: se prendiamo come esempio la creazione di una griglia, vi sono diverse modalità per definire la stessa struttura, in alcuni casi si utilizzano le parole row in altri columns o ancora grid; ma non è solo una questione sul nome delle classi, come spesso accade all'interno di un layout si presta molta attenzione alla gestione degli spazi, dunque anche se cambiassimo in corso d'opera, non è scontato che il risultato finale coincida con l'inizio.

Questa varietà di opzioni non facilita di certo la migrazione da un framework all'altro, ma al tempo stesso non invoglia lo sviluppatore a interrogarsi se altre scelte potrebbero fare al caso suo, dato che dovrebbe re-imparare tutto il lessico, continuando dunque a preferire la prima scelta.

Nelle prossime sezioni analizzeremo quattro tra i più conosciuti framework, scegliendo volontarimanete di evitare Bootstrap, dato che è il protagonista di molti dei nostri script. Partiremo parlando di Foundation, per poi sportarci su Bulma, TailwindCSS concludendo con SemanticUI, frameworks con approccio mobile-first, creati appositamente per gestire principalmente layout su device ed uno sviluppo con tecnologia Sass. Per tutti analizzeremo l'installazione e il setup iniziale, i componenti principali, come Grid system, Spaziature o Forms, ed eventualmente delle particolarità inerenti al framework stesso.

Foundation

Auto definito "Il più avanzato framework front-end responsivo al mondo", Foundation è da sempre visto agli antipodi di Bootstrap. Affermazione che può anche essere sostenuta dal fatto che Foundation non è propriamente un framework, come Bootstrap, ma un insieme di tool, che cooperando tra loro permettendo di ottenere un sistema di gestione del layout della pagina.

Il framework è suddiviso in due parti: Foundation per sites e Foundation per email, la versione email presenta un'insieme di stili più ristretto rispetto la sites, studiati ad-hoc per creare template uniformi e funzionali all'interno delle email. Troviamo inoltre la possibilità di includere una libreria chiamata MotionUI, la quale cooperando con i componenti, permette di ottenere animazioni senza stravolgere il codice esistente.

Foundation si basa su un compilatore Sass, il quale permette, in caso di necessità, di importare solo lo stretto necessario, ed effettuare la sovrascrittura delle variabili. Ma procediamo con ordine: per utilizzarne una versione completa possiamo rifarci alle CDN come riportato in seguito.

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <.. />
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" 
      crossorigin="anonymous">
  </head>
  <body>
    <script src="*/jquery.js"></script>
    <script src="*/what-input.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/js/foundation.min.js" 
      crossorigin="anonymous"></script>
    <script>
      $(document).foundation();
    </script>
  </body>
</html>

Osservando attentamente notiamo che oltre alla CDN avremo bisogno di jquery e what-input, una libreria che monitora gli eventi sugli input. Inoltre all'interno del tag html è importante inserire la classe no-js, la quale permetterà di non presentare nulla a video finchè gli stili non saranno completamente caricati, garantendo che l'utente non veda un'impaginazione parziale, senza stili.

Abbiamo parlato di modularità e possibilità di includere lo stretto necessario, ma come ottenere ciò? Vediamone un esempio attraverso un approccio basato su npm, nel quale vogliamo avere solo gli stili dei bottoni: eseguendo i seguenti comandi inizializziamo un progetto npm ed installiamo lo stretto necessario.

npm init -y
npm i foundation-sites jquery motion-ui what-input

Successivamente in una cartella chiamata scss creiamo due file: _settings.scss e app.scss. Il primo ci servirà per eseguire l'override dei setting proposti da Foundation, il secondo conterrà invece l'elenco dei componenti da includere nel CSS finale.

// _settings.scss
// modifichiamo il padding del bottone
$button-padding: 1em 1.1em;

// app.scss
@charset 'utf-8';

@import 'settings';
@import 'foundation';
@import 'motion-ui';

// Stili globali
@include foundation-global-styles;
@include foundation-forms;
@include foundation-typography;

// Componenti
@include foundation-button;
@include foundation-button-group;
@include foundation-close-button;

Essendo scritto in Sass servirà anche un compilatore per convertire il codice sorgente in CSS utilizzabile dal browser, per tutte le informazioni in merito possiamo rifarci all'esempio proposto da Foundation a questo indirizzo, importando le devDependencies, gulpfile.js ed esenguendo il comando definito all'interno della sezione scripts> di package.json, npm build, otterremo il desiderato file CSS, che potrà essere incluso nell'html attraverso:

  <head>
    <../>
    <link rel="stylesheet" href="css/app.css">
  </head>

Terminata la configurazione iniziale, osserviamo la caratteristica che guida Foundation: è un framework semantico, significa cioè che ogni classe è auto descrittiva e scritta per esteso senza l'utilizzo di abbreviazioni o codici. Per capire ciò facciamo un confronto tra la gestione delle dimensioni delle colonne all'interno del grid system in Bootstrap e Foundation. Per il primo potremmo trovare quanto seguenti

  <div class="row">
    <div class="col-10 col-md-6 col-lg-4">10/6/4</div>
  </div>

Fondation, essendo semantico, avrà classi più descrittive rispetto alla loro funzione, che faciliteranno anche la comprensione dell'HTML a cui verranno applicate.

  <div class="grid-x grid-margin-x">
    <div class="cell small-10 medium-6 large-4">10/6/4</div>
  </div>

In conclusione dell'analisi aggiungiamo un approfondimento per la libreria MotionUI: come detto in precedenza permette di ottenere effetti grafici, utilizzando classi semantiche, rispettando la logica di costruzione del layuot finora costruito. Come per il framework può essere inclusa tramite CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/motion-ui@1.2.3/dist/motion-ui.min.css" />

Oppure, nel caso in cui stessimo sviluppando una versione personalizzata tramite Sass, possiamo installare il pacchetto come segue

npm install motion-ui --save-dev

Includere l'import dei file all'interno del gulpfile

gulp.src('./src/scss/app.scss')
  .pipe(sass({
    includePaths: ['node_modules/motion-ui/src']
  }));

Ed infine includerla nel file app.scss, garantendo che verrà poi inclusa nel css che importeremo.

@import 'motion-ui'
@include motion-ui-transitions;
@include motion-ui-animations;
Possiamo ora applicare le classi fornite agli elementi per ottenere animazioni, oppure, come dimostrato nel seguente snippet, creare classi che tramite l'utilizzo di mixins Sass creino la definizione dell'animazione all'interno di una classe CSS che andremo poi ad applicare tramite javascript all'oggetto che vorremo animare. 
.slideAndSpinAndFade {
  @include mui-animation(fade, spin, slide($direction: up, $amount: 120%));
}
Per altre specifiche e dettagli riguardo la libreria MotionUI si rimanda alla documentazione, ricca di esempi e casistiche.

Bulma

Bulma è il framework più giovane tra quelli che analizzeremo, ma dal 2016, anno della prima versione, ad oggi si è creato una più che degna reputazione, grazie alle sue caratteristiche. Vediamo cosa offre rispetto agli "avversari".

Bulma è un framework CSS puro, non prevede infatti alcuna inclusione di javascript. Ottimo per l'utilizzo all'interno di framework javascript: non necessitando di alcuna implementazione o adattamento per configurarne i componenti, potrà essere adottato istantaneamente. Ma non è oro tutto ciò che luccica: la mancanza di qualunque libreria javascript fa si che non esistano alcuni componenti comuni in altri framework, come accordion, tooltips, toast, o abbiano implementazioni parziali come tabs e modali, per le quali abbiamo un layout ma nessun codice che li attivi. Una situazione che lascia però lo sviluppatore libero di implementare la soluzione migliore per sopperire alla mancanza.

Per iniziare ad utilizzare Bulma includiamo

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">

Come Foundation è un framework modulare. Troviamo anche in questo caso la possibilità di utilizzarne solo una parte o modificarne un'impostazione attraverso la compilazione Sass. Seguendo infatti lo stesso procedimento presentato nella sezione precedentemente, creiamo un file Sass nel quale includiamo i componenti minimi necessari, l'esempio seguente importerà solo il grid system.

@import "bulma/sass/utilities/_all.sass"
@import "bulma/sass/grid/columns.sass"

Dato che abbiamo parlato del grid system, analizziamo come strutturare una pagina responsiva,in cui l'occupazione delle colonne varia sulla base alla dimensione dello schermo. Generalmente parlando il grid system, come per Bootstrap, è configurato per la gestione 12 colonne, nel quale la classe columns servirà per creare la sezione nella pagina, column per definire una colonna, ed is-* per l'occupazione. 

<div class="columns">
  <div class="column is-10">Occupazione di 10 colonne</div>
  <div class="column">Occupazione di 1 colonna</div>
  <div class="column">Occupazione di 1 colonna</div>
</div>

Vi è anche la possibilità di creare colonne in frazioni di 1/3, 1/4 o 1/5, come nel codice sottostante.

<div class="columns">
  <div class="column is-three-quarters"></div>
  <div class="column is-one-third"></div>
</div>
<div class="columns">
  <div class="column is-half"></div>
  <div class="column is-two-third"></div>
</div>
<div class="columns">
  <div class="column is-three-fifths"></div>
  <div class="column is-one-fifth"></div>
</div>

Tali classi possono essere soggette alla larghezza della viewport che le visualizza, a tale scopo abbiamo a disposizione cinque diversi suffissi per consentirci di forzare un dato numero di colonne su una certa dimensione: 'mobile', 'tablet', 'desktop', 'widescreen', 'fullhd'.

<div class="columns">
  <div class="column is-three-quarters-mobile"></div>
  <div class="column is-one-third-widescreen"></div>
</div>

In Bulma, oltre ai breakpoint sulla dimensione dello schermo, troviamo anche classi CSS che modificano il layout sulla base del device che lo visualizza: is-mobile e is-desktop

<div class="columns is-mobile">
  <div class="column"></div>
</div>
<div class="columns is-desktop">
  <div class="column"></div>
</div>

Dagli esempi precedenti abbiamo potuto notare che le classi che dichiarano una caratterista dell'elemento sono composte dal prefisso is-, oltre a quelle riferite al grid system troviamo utilities riferite alla posizione, tipografia ecc...

// posizione
is-block
is-flex
is-inline
is-inline-block
is-inline-flex

//posizione flexbox
is-justify-content-start
is-justify-content-end
is-align-content-start
is-align-content-end

//tipografia
is-size-1
is-size-7

L'unica eccezione si applica all'utilizzo dei colori, per i quali il prefisso sarà has-

has-text-white
has-text-primary
has-text-success

In conclusione potremmo affermare che Bulma è ottimo come primo approccio all'apprendimento del CSS, in quanto facile e con caratteristiche simili ad altri framework, come Bootstrap, al tempo stesso il layout è molto basico, con la conseguenza che l'utilizzo su più siti possa farli apparire molto simili tra loro. Altri dettagli possono essere trovati nella completa e ricca documentazione.

2 pagine in totale: 1 2
Contenuti dell'articolo

Commenti

Visualizza/aggiungi commenti

| Condividi su: Twitter, Facebook, LinkedIn
Aggiorna

Per inserire un commento, devi avere un account.

Fai il login e torna a questa pagina, oppure registrati alla nostra community.

Approfondimenti