Framework CSS

Framework CSS che incubo!

Il web è bello perchè è vario e quando si tratta di informatica certe volte anche troppo! Molte sono le soluzioni che ti permettono una veloce prototipazione della tua idea, a volte sono semplici template HTML, altre volte dei veri e propri siti pronti all'uso ma in questo appuntamento parliamo di Framework CSS.

In ambito Framework CSS la questione è che non è facile scegliere quello giusto, ce ne sono veramente tanti! Quindi come fare per selezionare quello corretto? Come fare a capire se i componenti racchiusi al loro interno saranno veramente utili?

Ecco qualche consiglio che ti permetterà di sviluppare il tuo punto di vista.

Come scegliere un Framework CSS?

La prima domanda che devi porti è cosa devi realizzare e quali sono le tue conoscenze CSS (anche relative a preprocessori come LESS.js o SASS).

Esistono molti framework specifici che ti permetteranno di facilitare alcuni aspetti del tuo sviluppo. Puoi trovare quelli che forniscono la sola griglia, quelli che danno uno stile unico per tutti gli elementi di una pagina (form, tabelle, testo ecc), quelli non responsive e quelli che hanno anche dei componenti in JavaScript che permettono di aggiungere interessanti funzionalità al loro stile.

Tabella Framework

Grazie a questa tabella che ti linko puoi avere una panoramica diretta sul grande numero di framework CSS che puoi trovare nel web, inoltre sarai in gradi di avere informazioni sui browser che supportano, se responsive e se è scritto con dei preprocessor come LESS.js o SASS.

Io ne ho provati diversi (BluePrint, 960 grid, LESS Framework e Twitter Bootstrap sono solo alcuni) e ti voglio dare i miei consigli verso la scelta di quello più adatto alle tue esigenze.

Se conosci LESS.js o SASS buttati direttamente su quelli perchè sono i più recenti, i più facili da modificare e spesso contengono anche uno stile per gli elementi di una pagina. Se non li conosci puoi sempre recuperare con la video guida dedicata a LESS.js del nostro Andrea.

Inoltre, framework scritti in puro CSS spesso sono vecchi (BluePrint o 960 grid) e non sono responsive, quindi li sconsiglio fortemente perchè oggi realizzare un sito che non è pensato per essere responsive è come darsi una zappa sui piedi questo perchè recenti studi affermano che gran parte del traffico internet proviene da dispositivi mobile.

Perchè LESS.js o SASS sono Utili?

I framework CSS che ne fanno uso, proprio grazie a questi linguaggi, riescono ad aggiungere la possibilità di configurarli secondo le necessità dello sviluppatore. Spesso sono i più avanzati e supportati dalla community e hanno anche componenti realizzati da singoli.
Tutto questo è un grosso incentivo se hai la necessità di avere componenti aggiuntivi in JavaScript ma che ti permetteranno anche di avere lo stesso stiledel resto della pagina.

Se non vuoi utilizzarli, ma vuoi usare le loro potenzialità, dovrai conoscere i funzionamenti base per capire come cambiare i loro valori.

Inoltre, come qualsiasi bravo sviluppatore web, devi rimanere aggiornato quindi ti consiglio vivamente di conoscerli!

Perchè non basta la griglia

Inizialmnte i framework CSS erano composti solo dalla griglia statica, ovvero tutti i suoi elementi erano definiti in px, soltanto successivamente divennero griglie fluide, ovvero hanno iniziato a usare valori in percentuale creando così le prima griglie responsive.

Inoltre non era raro trovare framework CSS che presentavano soltanto dei file di reset, ovvero quelle regole base che permettavano di visualizzare la pagina e i suoi elementi in modo uniforme su tutti i browser, successivamente si sono evoluti per adattarsi alle varie esigenze dello sviluppatore aggiungendo componenti interessanti come le griglie.

Ma la griglia a cosa serve? Se ti stai domandano questo vuol dire che devi impegnarti di più con la grafica altrimenti salta la prossima riga.
Tutti i prodotti tipografici (i siti web ne fanno parte come origine) hanno una griglia che permette di ordinare e piazzare gli elementi in modo schematico per dare un senso di regolarità grafica, se vuoi approfondire leggi questa guida. Man mano che conoscerai le griglie ti accorgerai anche che sono veramente utili per mantenere il layout del tuo sito compatibile con i vari browser (sopratutto il vecchio IE che fin troppo spesso interpretava le regole CSS come meglio credeva).

La griglia è fondamentale per il layout del sito ma senza la presenza di uno stile è come fare un cubo di Rubick tutto nero.

La UI non ce la metti?

UI sta per User Interface ed è la parte dove il designer lavora maggiormente. Non si parla solo della grafica ma anche delle posizioni dei vari elementi come, ad esempio, perchè quel pulsante è in un punto specifico piuttosto che essere inserirlo in un altro.

Con framework come Bootstrap o Foundation ogni elemento della pagina ha lo stesso stile grazie alla stessa struttura del framework e ti sarà possibile modificare i valori di base (colori, testo, bordi ecc). Utilizzando sistemi come questo, il designer si preoccupa meno sui problemi che può incontrare nel codice e può sbizzarrirsi con la fantasia andando soltanto ad inserire quegli elementi che renderanno unico il sito, quindi perchè non lo fai anche tu?

Non basta un framework che faccia da griglia ma anche uno che dia uno stile al sito!

Perchè ci sono componenti JavaScript?

Questi componenti aggiungono degli elementi utili come il menu che potrà diventare responsibe, slider di immagini o di contenuti, le finestre modali e molto altro e tutti utilizzano lo stile del framework selezionato.

Se hai bisogno di questi elementi spesso ce ne sono anche realizzati dalla community! Basta fare un giro su GitHub :)

Prendiamo quello che ci serve!

I framework realizzati con LESS.js o SASS spesso hanno nei loro parametri la possibilità di scegliere cosa serve oppure no. In che senso dici?

Se devi fare un sito e non hai bisogno di componenti come le finestre modali puoi risparmiarti di avere il codice CSS e un JavaScript che gestiscono questo elemento, in questo modo eviterai di caricare codici (relativamente) pesanti.

Puoi personalizzare il CSS del framework ed adattarlo alle tue esigenze, la cosa importante è non spaventarsi di fronte agli innumerevoli componenti di un framework e dal peso in CSS! Prenditi il tempo necessario per comprendere il funzionamento del framework ed in breve tempo sarai in grado di personalizzarlo sotto ogni singolo aspetto.

Ma ci sono anche dei framework minimalisti!

Esatto, ci sono framework recenti che integrano solamente il reset ed una griglia, questo perchè c’è chi preferisce farsi da solo la grafica o usarne una propria già preparata. Il mio consiglio è di valutare di volta in volta le specifiche e il tempo di lavoro che richiederà il sito, così potrai decidere quale framework è più adatto alle tue esigenze.

Non ti fossilizzare ad usarne uno solo ma varia perchè ti apre la mente e ti permetterà di crescere più velocemente! Ogni framework che incontrerai ti permetterà di analizzare soluzioni innovative e magari scoprirai anche come sia possibile realizzare un determinato effetto, tutte cose veramente utili e che velocizzeranno il tuo lavoro.

E tu quale framework usi?

Io personalmente uso Bootstrap per il supporto comunitario e i molti componenti aggiuntivi che sono disponibili. Inoltre includo solo quello che mi serve a seconda delle esigenze per ottimizzare il peso dei file che è uno dei fattori che rende veloce il caricamento di un sito.

Adesso sta a te dare il tuo parere ed arricchire questa discussione!

Lascia il tuo Pensiero