griglia-css-in-flexbox
v0.1.0
Published
Mobile-first CSS grid in flexbox with native custom variables, all in a single 7kb css file (pre gzip).
Downloads
3
Readme
Griglia CSS in flexbox
Griglia CSS mobile-first in flexbox con variabili custom native, tutto in unico file css da 7kb (pre gzip).
Ogni valore è customizzabile anche grazie alle variabili custom CSS, come gutter e breakpoints.
L'obiettivo è quello di avere una griglia in flexbox leggera senza dipendenze: un unico piccolo file CSS da includere nei progetti per aver subito una grid funzionante.
Per questo motivo non sono presenti classi utils come reverse e simili.
Il naming è molto standard: è simile se non uguale alle griglie CSS più famose, come Bootstrap.
Getting started
via npm
npm i griglia-css-in-flexbox
via yarn
yarn add griglia-css-in-flexbox
How-to
Segue la classica struttura dei 3 div di classi container -> row -> col.
E' possibile specificare comportamenti responsive per le colonne, in quanto sono supportati di base 3 breakpoints: [sm] che come default ha 768px, [md] che come default ha 1024px, [lg] che come default ha 1200px.
Dev tips
Per modificare i vari valori presenti in grid.css consiglio di utilizzare le variabili custom CSS contenute dentro :root, presente all'inizio del foglio di stile.
Il file CSS non è stato posto ad autoprefixer e altri tools simili. Consiglio di includere il file, o il suo contenuto, all'interno dell'ambiente di sviluppo del proprio progetto, per esempio in SASS può essere un'idea creare un file _grid.scss di stesso contenuto di grid.css.