I 21 migliori sistemi e framework di griglia HTML5/CSS3

I metodi di progettazione tradizionali solo pochi anni fa significavano che dovevi progettare una homepage da sola, unendo wireframe e caselle di contenuto e poi sperare per il meglio, ma gradualmente questa tecnica è scomparsa e nuovi, più moderni, metodi di sviluppo rapido del sito web è emerso. In particolare, CSS3 ha introdotto Flex-box, una funzione di griglia facile da usare che è possibile utilizzare per creare layout di contenuti, ma comunque alcuni sono resistenti, mentre altri adottano approcci ancora più complicati per una precisione di progettazione assoluta.

Quando apri un nuovo sito Web, in genere ciò che vedrai è la parte dell'intestazione del sito, l'area del contenuto e una barra laterale: quelle aree principali includono anche i propri layout e specifiche di progettazione e la tana del coniglio continua ad approfondirsi. È fondamentale trovare un modo per progettare un layout di homepage (o qualsiasi altra pagina) che appaia bene su tutti i mezzi, dispositivi e software. Quindi, abbiamo pensato che potesse essere utile ai nostri colleghi sviluppatori mettere insieme una raccolta di framework e sistemi CSS e HTML per lo sviluppo di layout di griglia.

Vuoi più framework? Prova le nostre altre raccolte:

• Framework JavaScript
• Framework HTML5
• Framework CSS3
• Framework Node.js

Inutile dire che questi design sono adattabili a qualsiasi situazione, quindi puoi salvarti dal mal di testa di dover risolvere i nodi e le stranezze del layout del design stesso, e invece concentrarti sul soddisfare quelle caselle della griglia con il contenuto che desideri da mettere lì. C'è una grande varietà e stili diversi che troverai in questi sistemi di griglia, prenditi del tempo per visitare le pagine demo e forse anche annotare quello che stai cercando in modo da avere un tempo più facile per trovare il quadro corrispondente per le tue esigenze.

Griglia semplice morta

Le griglie non dovrebbero mai essere complicate, nella loro vera essenza sono solo elementi HTML che mettono insieme un design generale e Vladimir Agafonkin è uno degli sviluppatori che abbraccia questo concetto. Il suo framework a griglia Dead Simple Grid arriva a soli duecento byte di codice CSS; questa è una quantità così minima di codice, le tue pagine non noteranno nemmeno che è lì. Puoi separare la griglia per presentare un'area di contenuto principale e una barra laterale flessibile se lo desideri. Questo tipo di griglia si adatta ai blog e ai layout generali della home page in cui si preferisce un design minimale. Il design reattivo è integrato grazie alle query multimediali, quindi la griglia apparirà impeccabile su qualsiasi dispositivo su cui viene utilizzata.

Borbone pulito

Bourbon è una libreria di mixin di grande successo per il preprocessore SASS. Questo, ovviamente, ha reso Neat una scelta interessante per coloro che usano già Bourbon e SASS. Neat offre agli sviluppatori l'accesso a un sistema a griglia fluido che è abbastanza veloce e facile da configurare in pochi minuti, ma flessibile al punto che modifiche e regolazioni illimitate non diventerebbero un problema.

Grd

Grd è un sistema a griglia CSS che utilizza Flexbox come strumento di backend per creare layout reattivi flessibili e moderni. Usando la Live Demo puoi giocare con le impostazioni e le diverse personalizzazioni del design per vedere se Grd potrebbe risolvere il tuo problema di ottenere un particolare elemento di design integrato nel tuo flusso di lavoro esistente. Abbiamo trovato facile creare intestazioni, piè di pagina e aree di contenuto generale utilizzando nient'altro che un menu a discesa di impostazioni.

STRUTTURA

Structure, anch'esso basato su Flexbox, utilizza modelli di sintassi dichiarativi (simili a quelli di Angular.js) per definire sezioni e parametri di layout. Alcuni sviluppatori si sono lamentati del fatto che il markup finale della pagina non può essere convalidato, ma l'idea è che utilizzando Structure sia possibile creare una griglia dichiarativa che non interferisca con gli attributi CSS tradizionali, come classi e nomi di identificazione.

Sistema di rete 960

Centinaia di migliaia di siti Web hanno utilizzato il 960 Grid System di Nathan Smith per potenziare il proprio layout di progettazione. È uno strumento efficiente per snellire il flusso di lavoro degli sviluppatori web che lavorano sodo. Attraverso la scelta di due diversi layout di colonna (rispettivamente 12 e 16), gli sviluppatori possono avviare rapidamente una homepage che supporterà qualsiasi tipo di input dinamico e statico. È possibile aggiungere più colonne, ma dovrai lavorare con la documentazione per comprenderne l'uso in modo più chiaro.

non semantico

Unsemantic è la versione successiva della griglia 960 che offre funzionalità di progettazione reattive complete. Attraverso classi pull uniche, gli sviluppatori possono riorganizzare il layout della pagina che stanno producendo, il che potrebbe aiutare a promuovere e mostrare i contenuti più importanti in un dato momento, una strategia nota per aiutare i motori di ricerca a comprendere meglio lo scopo di ciascun elemento di contenuto. Unsemantic è anche un orgoglioso utente di Media Query, quindi gli sviluppatori front-end affermati non avranno difficoltà a personalizzare questo framework di griglia per le proprie esigenze.

Griglia semplice

Da qui il nome, Simple Grid è per tutti coloro che cercano semplicità e facilità d'uso. Il layout è responsive, compatibile con smartphone, tablet e computer desktop. In altre parole, le prestazioni del tuo progetto saranno di prim'ordine senza ombra di dubbio. È completamente in sintonia anche con schermi di grandi dimensioni e risoluzioni più elevate. Inoltre, Simple Grid è solo una griglia, senza risorse aggiuntive, il che la rende molto leggera. Con la comoda struttura a dodici colonne, hai la libertà di creare il layout che è esattamente a tuo piacimento. Puoi dividerlo in due, tre, quattro o sei colonne in modo impeccabile.

csswizardry-grids

Con una griglia HTML, come csswizardry-grids, puoi risparmiare tempo ed energia. È uno strumento robusto che puoi utilizzare con precisione a tuo piacimento. È molto intuitivo e strutturato facilmente, assicurandosi che gli sviluppatori web di tutti i livelli ne traggano il massimo. Nello screenshot qui sopra, puoi dare un'occhiata a tutte le diverse varianti supportate da csswizardry-grids. Puoi riordinare liberamente le cose, in modo che corrisponda ai tuoi desideri. Fai la tua attività evitando di eseguire le cose da zero con csswizardry-grids ora e inizia con il piede giusto.

Griglia Profonda

La libertà che Profound Grid ti offre va oltre. È possibile utilizzare questo sistema a griglia flessibile ed estensibile sia per layout fissi che fluidi. Il risultato funzionerà su tutti i dispositivi moderni senza intoppi. Puoi creare la struttura esatta che desideri modificando, rimuovendo o aggiungendo colonne a tuo piacimento. Puoi prima controllare alcuni degli esempi per vedere cosa è possibile con Profound Grid. Inoltre, con i margini negativi nel calcolo delle colonne, Profound Grid garantisce che i layout fluidi appaiano gli stessi indipendentemente dalle dimensioni dello schermo e dal browser web.

piastra

I vantaggi dell'utilizzo di un sistema a griglia sono enormi, poiché non solo risparmi tempo, ma non devi preoccuparti dei tecnicismi. Ad esempio, Griddle garantisce la completa compatibilità con i dispositivi e i browser Web più diffusi. Ciò significa che le prestazioni della tua applicazione saranno sempre di prima classe. Con Griddle, puoi portare a compimento qualsiasi cosa, dalle griglie proporzionali e nidificate alle unità centrate e ibride. Per quanto riguarda quest'ultimo, con qualche personalizzazione, puoi combinare unità fisse e fluide in un'unica build impressionante. Hai il controllo sul centraggio orizzontale delle unità e puoi persino modificare l'allineamento verticale.

CSS Smart Grid

CSS Smart Grid segue le ultime tendenze e normative per garantire la compatibilità con diversi dispositivi. In breve, lo strumento è leggero, reattivo e mobile-first per consentirti di creare cose epiche con esso. Sia che si utilizzi uno smartphone o un grande schermo desktop, CSS Smart Grid si assicura che il layout funzioni su entrambi senza intoppi. Per tua informazione, anche se qualcuno utilizza un feature phone per navigare in Internet, il tuo progetto basato su CSS Smart Grid funzionerà altrettanto bene, con una visualizzazione a colonna singola. Sul sito Web ufficiale, hai anche una rapida guida, quindi non devi affrontare problemi durante l'utilizzo dello strumento.

Gridlex

Gridlex si distingue per il suo design stellare e la facilità d'uso. La semplicità di questa struttura a griglia basata su Flexbox è sorprendente, la visione è semplice: avvolgere le colonne all'interno della griglia e, se necessario, apportare ulteriori modifiche per rendere irresistibile il design finale. Solo guardando le demo dei siti Web che utilizzano Gridlex è evidente che si tratta di un sistema a griglia top di gamma e non rimarrai deluso da ciò che può fare per i tuoi progetti e il tuo flusso di lavoro.

Sistema di griglia reattivo

Responsive Grid System ha molto da offrire, il nome di dominio perfetto, una visione chiara e gli strumenti necessari per rendere la progettazione della griglia reattiva un gioco da ragazzi! Il Grid Generator fornisce un semplice modulo di input in cui è possibile specificare il numero di colonne che si desidera utilizzare e il margine che si desidera vedere tra di loro.. fai clic su Invia e hai un output di codice pronto per l'uso del tuo prossimo layout di griglia reattivo. L'autore, Graham, è felice di fare tutto il duro lavoro per te se lo desideri, puoi metterti in contatto con lui a piè di pagina.

alla griglia

Gli sviluppatori hanno creato Gridly come un sistema di layout della griglia minimo per supportare i browser più moderni di oggi. La sua struttura leggera aiuta gli sviluppatori ad avere un tempo facile per ottenere un layout di griglia/colonna attivo e funzionante senza troppi problemi. Nel complesso, le dimensioni assurdamente minime di questa libreria ti lasceranno a desiderare di più per i progetti a venire.

Formstone

Formstone non è un singolo sistema di griglia gestito di per sé, è in realtà una libreria per sviluppatori front-end che hanno bisogno di componenti altamente personalizzabili ed elementi Web che costituiscono una pagina Web tradizionale che incontri quotidianamente. Essendo una libreria modulare, reattiva e automatizzata, Formstone può essere utilizzato non solo allo scopo di ridimensionare un progetto di sito Web di grandi dimensioni, ma anche per l'uso del layout della griglia stesso.

Bootstrap

Dove sarebbe Bootstrap oggi se non fosse per il suo sistema a griglia su cui è stato costruito tutto il resto? Stiamo ancora aspettando con impazienza l'arrivo di Bootstrap 4, ma nel frattempo... non puoi resistere a dire di sì a un framework che è riuscito ad affermarsi come uno dei framework front-end più importanti di questo secolo. Milioni di siti Web sono alimentati dalle funzionalità di Bootstrap, ma niente di tutto ciò sarebbe possibile se non fosse per il framework a griglia integrato nel nucleo di Bootstrap.

Fondazione

Foundation è un'altra libreria front-end di successo che supporta il design reattivo, l'ultima versione (Foundation 6) offre funzionalità ed elementi ancora più moderni che possono aiutare gli sviluppatori a fornire ai propri clienti design incredibilmente versatili. I modelli facili da usare forniti da Foundation ti danno la possibilità di prenderti una pausa da tutto questo sviluppo della griglia e concentrarti invece su ciò che è importante: le cose che inserirai all'interno di quella griglia stessa.

Scheletro

Skeleton ha un design bello e naturale che ti lascerà a desiderare di più. I creatori hanno creato l'idea alla base di Skeleton per essere la scelta migliore per piccoli progetti. Inoltre, puoi usarlo su progetti in cui non ritieni opportuno utilizzare un framework completo. Skeleton ti fornisce gli elementi essenziali di cui avresti bisogno per ottenere un prototipo di sito web attivo e funzionante; un layout a griglia, opzioni tipografiche per intestazioni e sezioni, elementi pulsante per tutte le esigenze del modulo e in effetti moduli personalizzati in modo da poter risparmiare tempo per dover codificare il proprio, una bella aggiunta di elenchi, tabelle e sintassi del codice e un supporto query framework in modo che i tuoi progetti diventino completamente reattivi!

Sistema di griglia reattivo 2

Responsive Grid System (versione 2) è un sistema a griglia mobile-first di dimensioni estremamente ridotte, ma molto efficace nello stile. È possibile selezionare da una gamma di layout di colonna (24, 16, 12). Puoi anche personalizzare i margini e i padding tra le colonne e utilizzare i polyfill per creare un layout di design stellare.

Sistema di griglia reattivo per il tuo prossimo progetto

Il sistema a griglia reattivo per il tuo prossimo progetto utilizza le stesse classi del sistema a griglia 960. È stato creato per servire prima i visitatori mobili e fornisce un modello standard per la gestione delle intestazioni. Gli sviluppatori lo hanno testato con tutti i browser moderni, quindi sei in buone mani. Puoi usarlo come sistema di griglia di base che ti aiuterà a creare un web design reattivo. Ciò manterrà la tua competenza esistente sul popolare sistema di rete.

HTML5 Caldaia

HTML5 Boilerplate è un robusto framework standard (modello) per sviluppatori front-end. È per gli sviluppatori che vogliono dare il via al loro progetto senza la seccatura di framework più grandi come Bootstrap o Foundation.