O anche, come risparmiare un sacco di tempo e mal di testa grazie ad un framework semplice, flessibile e potente.
Con il continuo moltiplicarsi di dispositivi e di diversi contesti di utilizzo, progettare e sviluppare per il web è diventato sempre più complesso.
Oggi, quando creiamo il layout di un sito web, questo deve essere in grado di essere flessibile e funzionare bene su un numero potenzialmente illimitato di diverse dimensioni di schermo.
Progettare come il layout si adatterà in un contesto “responsivo”, nonostante sia sicuramente necessario, di sicuro non aiuta a velocizzare lo sviluppo dei progetti. Come se non bastasse, questa evoluzione è finita per coincidere con l’esigenza di sempre maggiori velocità e fluidità nello sviluppo dei progetti web, come conseguenza di un mercato sempre più specializzato e di particolari filosofie di sviluppo e di business.
Per aiutarci a risolvere questi problemi, negli ultimi tempi sono state create dagli sviluppatori diverse soluzione software, come i preprocessori CSS, e veri e propri framework, come ad esempio Bootstrap e Foundation.
Questi framework, per quanto incredibilmente utili, hanno alcune caratteristiche che molti trovano frustranti. Spesso costringono a includere una grande quantità di codice extra, del quale poi si finisce per usare forse un 10%.
Sono convinto che quello di cui abbiamo veramente bisogno è qualcosa di leggero, flessibile e facile da usare, specifico per creare griglie di layout per i nostri progetti web. Abbiamo bisogno di una soluzione veloce da modificare e con cui poter sviluppare prototipi in modo estremamente rapido. E qui entra in gioco Susy.
Avere completa libertà creativa e pieno controllo sul codice è sempre stato molto importante per me, e suppongo lo stesso valga per voi. Questo mi ha portato a testare un’infinità di framework di questo tipo e ho trovato Susy più semplice e più potente di tutti gli altri framework che ho provato.
Cos’è esattamente Susy?
Cominciamo con il fare chiarezza su cosa intendiamo quando parliamo di “griglia”.
Le griglie, nella terminologia dello sviluppo web, non sono altro che un insieme di linee guida verticali che dividono e organizzano lo spazio orizzontale delle pagine. Servono principalmente per organizzare e presentare le informazioni in maniera ordinata e visivamente piacevole.
Queste linee verticali aiutano a segmentare la pagina in due diversi tipi di spazi. Chiamiamo gli spazi più larghi “colonne” e quelli stretti “gutter”. Il modo in cui gli elementi della pagina vengono posizionati all’interno di questa griglia è quello che chiamiamo layout.
Se avete usato soluzioni come Bootstrap, Foundation o addirittura i primi sistemi di griglie, come il 960 Grid System, in realtà è molto probabile che abbiate già molto chiaro di cosa stiamo parlando.
Questi framework, seppur estremamente robusti, impongono anche diversi limiti rispetto a quello che è possibile fare con i loro sistemi di griglie. E questo è un ulteriore motivo dell’esistenza di Susy.
Susy viene definito un layout engine, un “motore di layout”. Quello che fa in pratica è fornirti gli strumenti necessari a costruire un tuo framework per la gestione delle griglie di layout. Con Susy puoi avere la flessibilità e la libertà di sviluppare qualsiasi design nel modo che preferisci.
Un’altra cosa positiva di Susy è che l’unico prerequisito è l’utilizzo di Sass, un preprocessore CSS che moltissimi sviluppatori stanno già utilizzando . Non serve nient’altro, e questo significa anche meno potenziali problemi dovuti a dipendenze esterne da gestire e tenere aggiornate.
Un semplicissimo esempio pratico
Una volta impostato Sass per il vostro flusso di sviluppo, e incluso Susy tramite la direttiva @import , siete già pronti per cominciare.
Supponiamo, ad esempio, che vogliate avere una griglia a 4 colonne e, per capire effettivamente come la cosa sta funzionando, volete anche fare in modo che questa griglia sia visibile quando aprite la pagina web nel browser. Cominciamo con l’ inizializzare Susy con la seguente Sass Map:
$susy : ( columns: 4, debug: (image: show) );
Viene fatto riferimento a queste impostazioni ogni volta che successivamente, all’interno del nostro file di stile, andiamo ad usare un mixin o una funzione di Susy.
Ora dobbiamo utilizzare susy su un qualche elemento della nostra pagina. Mettiamo che abbiate creato un elemento contenitore nella vostra pagina HTML, qualcosa tipo :
Tutto quello che dovrete fare è dire a Susy che questo elemento sarà il contenitore della griglia, in questo modo :
.wrap {
@include container();
height: 100vh; // Questo forza .wrap al 100% della altezza della tua viewport, permettendoti di vedere la griglia sullo sfondo.
}
A questo punto, se volessimo posizionare un elemento internamente a .wrap, facendo in modo che occupi 3 delle 4 colonne, basterà specificarlo con il mixin span() :
.content {
@include span(3 of 4);
}
Ovviamente questo è un esempio estremamente semplice e banale, ma è sufficiente per capire la filosofia di sviluppo di Susy, la semplicità d’uso e la pulizia del codice.
Ottimo, mi hai convinto, e adesso?
Se vi ho incuriosito e volete approfondire potete dare un’occhiata alla documentazione e agli esempi sul sito ufficiale di Susy. Oppure, come ho fatto io, scaricare l’ebook “Imparare Susy” di Zell Liew. I primi 7 capitoli sono completamente gratuiti e sono più che sufficienti per cominciare ad utilizzare Susy in progetti web complessi. ( “full disclosure”: ho curato personalmente la traduzione in italiano dell’ebook ).
