Spectre.css: framework CSS leggero e potente

Spectre.css è un framework CSS molto leggero (pesa meno di 10kb nella versione gzippata), moderno, responsive e mobile-first che permette di utilizzare le funzionalità di CSS3 in maniera semplificata per produrre layout di ultima generazione.

Tra le funzionalità di Spectre.css troviamo un sistema di realizzazione di layout basato sulla specifica Flexbox, controlli per la tipografia, per la stilizzazione e la strutturazione di elementi (come tabelle, pulsanti, liste, link, elementi di formattazione, etichette e cosi via) attraverso collezioni di classi, una grandissima lista di controlli UI avanzati, come Accordions, Pannelli, Avatars, Tooltips e classi "utilities" per i compiti più disparati.

Tutti questi elementi fanno di Spectre.css un framework CSS davvero completo, ma allo stesso tempo facile da utilizzare.

Per installare Spectre.css esistono cinque modalità differenti: utilizzando l'implementazione manuale e locale, l'implementazione via CDN (Content Delivery Network) oppure attraverso un package manager. Ad esempio, per implementare Spectre.css via CDN possiamo includere il seguente codice nelle nostre pagine:

<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre.min.css">
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-exp.min.css">
<link rel="stylesheet" href="https://unpkg.com/spectre.css/dist/spectre-icons.min.css">

mentre per installarlo tramite NPM si dovrà procedere in questo modo:

npm install spectre.css --save

Utilizzando il collaudatissimo sistema di griglia a 12 colonne ed avvalendosi della tecnologia di Flexbox, costruire un layout con Spectre.css assume una forma simile al seguente snippet:

<div class="container">
  <div class="columns">
    <div class="column col-6">col-6</div>
    <div class="column col-3">col-3</div>
    <div class="column col-2">col-2</div>
    <div class="column col-1">col-1</div>
  </div>
</div>

dove gli elementi div con classe "column", figli di un elemento contenitore "columns", assumono una grandezza relativa alla propria classe "col-*" dove "*" è il numero di segmenti occupati dalla colonna. In questo esempio la prima colonna occupa 6 posti su 12, la seconda 3 posti su 12, la terza 2 posti su 12 e la quarta occupa l'ultimo posto rimanente.

Come anticipato, con Spectre.css possiamo avvalerci di moltissimi componenti UI, come ad esempio la paginazione, tema molto ricorrente nei blog. Per produrre una lista di pagine navigabili è sufficiente applicare la classe "pagination" all'elemento "ul" e le classi "page-item" ai sotto-elementi "li", con la possibilità di utilizzare classi aggiuntive come "disabled" ed "active":

<ul class="pagination">
  <li class="page-item disabled">
    <a href="#" tabindex="-1">Previous</a>
  </li>
  <li class="page-item active">
    <a href="#">1</a>
  </li>
  <li class="page-item">
    <a href="#">2</a>
  </li>
  <li class="page-item">
    <a href="#">3</a>
  </li>
  <li class="page-item">
    <span>...</span>
  </li>
  <li class="page-item">
    <a href="#">12</a>
  </li>
  <li class="page-item">
    <a href="#">Next</a>
  </li>
</ul>

La documentazione ufficiale del framework è molto dettagliata e permette di utilizzare Spectre.css in pochissimi minuti.

Via Spectre.css