Layout Web semplici e veloci con Sass e Susy

sass-susy-webdesignImmagine originale tratta da Fotolia
Tempo stimato di lettura: 4 minuti, 9 secondi
Pubblicato il 29 giugno 2015

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:

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 :

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() :

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 ).

  • ADIMO

    Ho spesso considerato framework come bootstrap un punto di arrivo per lo sviluppo di app web, probabilemnte più che adatto per la maggior parte delle mie esigenze, ma sapere anche dell’esistenza di strumenti come Susy permette di spingermi ancora un pò più in la nel controllo dell’aspetto finale delle applicazioni. Complimenti per l’articolo.

    X la redazione, forse manca qualcosa dopo la frase “qualcosa tipo :”

    • Grazie, mi fa davvero piacere che trovi interessante l’articolo. Credo tu abbia centrato in pieno! Usare framework come Bootstrap, o anche Foundation, insieme a Susy è di una comodità unica. In pratica hai il vantaggio di avere pieno controllo sul layout e allo stesso tempo ti porti dietro tutti gli stili e la struttura di questi framework, ma senza essere troppo legato alle loro griglie.

  • Matteo Latente Lullo

    Ho trovato molto figo questo articolo, L’unica pecca che sass non è una cosa così banale e quindi gli avrei dato un accenno più spesso, poi anche importare susy in sass non è così banale!
    per il resto molto ispiratore, sembra davvero un gran bel passo per piegare ancora di più bootstrap e foundation hai voleri del web designer!

Shares