griglia-css-in-flexbox

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.