Bulma - Un CSS framework 'semantico' ;-)
— 1 min read
Impegnato nel restyling del sito www.agriturismo-aiole.com mi sono messo alla ricerca di un framework css che mi aiutasse.
Anche adesso quello che cerco è un framework css leggero ( allora usai Material Design Lite ), dopo una veloce ricerca mi sono imbattuto in Bulma, che con circa 40 mila stelle su GitHub ha attirato la mia attenzione.
Il framework sembra abbastanza facile da imparare, con la possibilità di usare sass si può ridurre l'utilizzo all'essenziale.
La migrazione del sito dell'agriturismo però necessita ancora di un pò di lavoro preparatorio in quanto necessita del supporto multilingua ( che implemento grazie al plugin di Gatsby react-intl ), quindi ho pensato bene di farmi le ossa con Bulma adottandolo qui, nel mio neonato blog.
Avevo già installato il plugin sass ( gatsby-plugin-sass ), quindi per metterlo all'opera ho cominciato con
yarn add --dev bulma
Ho quindi provveduto ad importare bulma.sass nel mio file di stile principale ( per ora importo solo bulma.sass ma il framework è modulare e mi consente di cuicire al sito solo lo stretto indispensabile in base alle componenti che utilizzerò ), la riga da mettere in testa al mio file layout.scss è
@import "~bulma/bulma.sass";
Ho quindi potuto togliere tutti gli stili impostati nel file e quelli nei componenti, per poter ricominciare da zero. Altro step da compiere è quello di sistemare o colori, lo si fà semplicemente cambiando i valori delle variabili definite in Bulma prima di eseguire l'import.
Infine ho potuto sbizzarrirmi con le numerose classi definte, .content .section .footer tra le più utili, poi .columns e .column per dividere verticalmente la pagina, i vari modificatori di dimensioni .is-size-1 o di colore .has-text-dark o .has-background-grey-lighter e tanti altri.