15 Febbraio, 2018 | Di Wellnet

Cos'è Susy e come utilizzarlo per il web design

Cos'è Susy e come utilizzarlo per il web design

Susy è un preprocessore usato in Sass per generare griglie custom: si tratta di uno strumento molto utile in alternativa alle librerie più utilizzate come Bootstrap o Foundation.

Queste ultime, per quanto possano risultare veloci, risultano anche molto limitate, perché:

  1. Queste librerie utilizzano una sola griglia che verrà poi utilizzata in tutto il progetto. Nel caso in cui si dovesse avere bisogno di uscire fuori dallo schema prestabilito, bisognerà sovrascrivere le classi, o crearne di nuove, andando cosi a bypassare la libreria scelta. Vediamo alcuni elementi in cui si subiscono delle limitazioni:
    • La larghezza del gutter (lo spazio tra le colonne): in Bootstrap il gutter è di 15px, ma sarà difficile mantenere sempre lo stesso spazio in un solo progetto;
    • Il gutter può essere solo in '% 'o 'px' a seconda della libreria scelta.
    • Il numero di colonne: in genere viene utilizzata una griglia di 12 colonne, tale numero risulterà però blindato, oltre non possiamo andare, neanche usando un'ulteriore griglia di, per esempio, 5 colonne.
  2. Si portano dietro tutto il codice per andare a coprire tutte le casistiche possibili: si tratta di parecchi byte di codice di cui viene utilizzata solo una parte, a volte minima.

Perché utilizzare Susy risolve questi problemi

Utilizzando un preprocessore come Susy possiamo ovviare a questi problemi.

Con Susy, infatti, abbiamo la possibilità di definire delle configurazioni di griglie che poi useremo nel nostro progetto: possiamo definire X colonne e gutter personalizzati, sia nella dimensione che nell'unità di misura (px, %, rem etc..). Susy si occuperà di fare tutti i calcoli necessari da applicare alle nostre classi.

La scelta di occuparsi solo dei calcoli è dovuta ad un semplice motivo: siamo noi a scegliere se usare la propietà float, flexbox oppure altre. Susy in aggiunta dà anche la possibilità di avere una preview della griglia. Abilitando questa opzione il preprocessore applicherà un'immagine svg al container delle colonne. Per utilizzare al meglio questo strumento possiamo avvalerci della libreria breakpoint, utilissima per gestire le varie media-query.

Come utilizzare Susy

Esempio 1

Configurazione:

Cos'è Susy e come utilizzarlo per il web design

In questo esempio abbiamo una classica griglia di 12 colonne uguali, un gutter definito in px e la preview della griglia. Abbiamo anche un'altra voce: spread e container-spread. Analizziamola per capire meglio il concetto di spread: il container-spread descrive il modo in cui il gutter viene distribuito tra le colonne, così da poter calcolare con esattezza la larghezza delle colonne stesse. Le possibilità sono:

  1. narrow: il gutter viene distribuito tra le colonne, come risultato il numero di gutter sarà minore di un'unità rispetto al numero delle colonne. Cosi facendo l'ultima colonna non avrà il gutter a lato ma sarà a filo del container.
  2. wide: Il gutter viene diviso in due e applicato ai lati di ogni colonna, il numero di gutter sarà così uguale al numero di colonne.
  3. wider: Il gutter viene applicato a entrambi i lati di ogni colonna nella sua dimensione originale, avremmo cosi un gutter in più rispetto al numero di colonne.

Nel nostro caso la griglia verrà usata nel seguente modo: Abilitiamo l'svg guida:

Cos'è Susy e come utilizzarlo per il web design

Definiamo il comportamento delle colonne, nello specifico avremo due colonne al 50% con un gutter di 30px tra esse. Prevedendo che il gutter rimanga solo tra le due colonne ('container-spread': 'narrow') portiamo a zero il gutter sulla seconda.

Cos'è Susy e come utilizzarlo per il web design

Andiamo a vedere come viene generato il css relativo alle colonne:

Cos'è Susy e come utilizzarlo per il web design

Come si può vedere, Susy ci ha dato una grossa mano in questo calcolo: ricordiamoci che abbiamo usato delle colonne con larghezza in percentuale e gutter in px.

Esempio 2

Configurazione:

Cos'è Susy e come utilizzarlo per il web design

Questo esempio risulta molto simile al precedente, l'unica differenza e che abbiamo usato la proprietà wide del container-spread. Utilizzeremo quindi dei padding laterali di 2rem al posto del margine destro:

Cos'è Susy e come utilizzarlo per il web design

Andiamo a vedere come viene generato il css relativo alle colonne:

Cos'è Susy e come utilizzarlo per il web design

Anche in questo caso Susy è stato di grande aiuto.

Esempio 3

Configurazione:

Cos'è Susy e come utilizzarlo per il web design

In quest'ultimo esempio useremo una griglia asimmetrica, ovvero useremo delle colonne di diversa dimensione, nello specifico vogliamo:

  • la prima colonna colonna di 120px
  • l'ultima colonna di 12em
  • Uno spazio centrale idealmente suddiviso in 4 parti uguali.

Vediamo come si può utilizzare questa configurazione in sass:

Cos'è Susy e come utilizzarlo per il web design

Per definire la larghezza delle colonne useremo questa sintassi:

  • colonna 1 ( 120px ) : width: span(1 first);
  • colonna 2 ( tutto lo spazio rimanente , occupiamo tutti e 4 gli spazi di ugual misura ) : width: span(4 at 2 );
  • colonna 3 12em: width: span(1 last );

Il compilato css sarà:

Cos'è Susy e come utilizzarlo per il web design

In questi esempi abbiamo utilizzato la proprietà css float, ma nulla ci impedisce di applicare la stessa logica alla proprietà flex o inline-block.

Oltre a definire le griglie e utilizzarle, con Susy possiamo anche fare interventi specifici su singole colonne per creare eccezioni. Vediamone un esempio. In questo caso, usiamo una griglia con proprietà 'container-spread': 'narrow' (come nell'esempio 1) avendo cosi un gutter tra le colonne. Se vogliamo, però, ottenere una situazione del tipo:

  • 1° colonna: gutter a destra
  • 2° colonna: nessun gutter
  • 3° colonna: occupa tutto lo spazio disponibile rimanendo attaccata al bordo destro e alla colonna n° 2

allora bisognerà scrivere il codice sass come segue:

Cos'è Susy e come utilizzarlo per il web design

Come si può vedere, abbiamo eliminato il gutter sulla seconda colonna e applicato la propietà widealla terza (alla larghezza della colonna viene aggiunta la dimensione del gutter) in modo che occupi anche lo spazio destinato al gutter della seconda colonna, raggiungendo così lo scopo che ci eravamo prefissati.

Come richiamare le diverse configurazioni

All' interno di un progetto possiamo, come detto, usare differenti griglie. Per richiamare le diverse configurazioni dove ci servono, possiamo usare un mixin come il seguente:

Cos'è Susy e come utilizzarlo per il web design

E poi utilizzarlo come segue:

Cos'è Susy e come utilizzarlo per il web design
Wellnet
Wellnet

Wellnet è una nuova realtà nel panorama delle agenzie digitali italiane: 70 expertise complementari e integrate, con sedi a Milano, Torino Cuneo e Modena, frutto della fusione di tre realtà di successo preesistenti.