I framework CSS esistono da anni ormai, ma l'arrivo di pratiche di progettazione reattive ha reso inutili molti dei nostri vecchi preferiti. Fortunatamente, molti sviluppatori davvero talentuosi sono intervenuti per colmare il divario con la prossima generazione di framework CSS e piastre termiche.
C'è già una tonnellata di queste cose che galleggiano. Ognuno ha una lista, ma nessuno ti guida realmente su come ogni quadro e standard si differenziano da quello successivo in modo da poter prendere una decisione informata. Questo è il nostro obiettivo oggi. Seguiteci mentre diamo un'occhiata a ciò che rende unici ciascuno di questi 22 framework e hotplaces CSS reattivi.
Gumby
Il framework Gumby riprende la griglia 960 che tutti noi ci siamo fatti gli anni fa e la porta nell'era moderna del web design con un tocco reattivo. Ha anche stili predefiniti per cose come moduli, pulsanti, alternatori, menu a discesa, schede e altro.
Il sistema di griglia semantica
Se odi i sistemi di grid e il loro markup gonfiato, non semantico, questo è per te. Il Semantic Grid System sfrutta la potenza dei preprocessori CSS (LESS, Sass e Stylus) per creare variabili personalizzabili per cose come la grondaia e la larghezza della colonna. Tutto quello che devi fare è usare alcuni mixin predefiniti nel tuo CSS, non è richiesto alcun markup extra!
gridless
Gridless è un boilerplate potente che utilizza il web design mobile prima reattivo per adattarsi alla larghezza del dispositivo. È inoltre dotato di funzioni straordinarie come la normalizzazione CSS, correzioni di errori IE e stili tipografici.
senza telaio
Frameless è difficile da classificare perché tecnicamente è più un metodo consigliato per approcciare la progettazione reattiva rispetto a un insieme effettivo di file che è possibile scaricare. Ci sono tre passaggi: in primo luogo, crea una griglia regolare a larghezza fissa, quindi eseguila ripetutamente all'infinito e termina centrandola nella finestra.
Il sito afferma specificamente che Frameless non è un framework e che non ci sono file da scaricare, ma nonostante questo reclamo ci sono in effetti alcuni modelli di base per aiutarti a iniziare.
Griglie proporzionali
Le griglie proporzionali affrontano alcuni grossi problemi che sorgono quando si tenta un layout CSS reattivo, vale a dire griglie di nesting e wrestling con valori basati su percentuali attraverso viewport molto diversi.
Le Griglie Proporzionali utilizzano il dimensionamento dei riquadri CSS per creare una soluzione che consenta la presenza di grondaie fisse (em / remi) miscelate con colonne fluide. La distanza tra le colonne rimarrà uguale ad ogni punto di rottura, in relazione alla dimensione del carattere di base. Le colonne sono definite dalla proporzione, ad es. una metà, un terzo, due terzi e può essere facilmente riutilizzata tutte le volte che vuoi, anche quando sono annidate.
L'approccio Goldilocks
L'approccio Goldilocks è mirato a ridurre la tendenza dei progetti reattivi a inclinarsi verso il supporto di dispositivi specifici. Invece, spara per un design universale che non dipende da nessun dispositivo.
L'approccio Goldilocks utilizza una combinazione di ems, max-width, media query e traduzioni di pattern per considerare tre stati che consentono ai tuoi progetti di essere indipendenti dalla risoluzione.
Twitter Bootstrap
Twitter Bootstrap non ha bisogno di presentazioni. È uno dei più grandi e pessimi standard di CSS sul web ed è il punto di partenza per innumerevoli siti professionali e personali di sviluppatori di tutto il mondo.
Twitter Bootstrap include un sistema di griglia reattivo oltre a tonnellate di elementi pre-stilizzati stellari come moduli, pulsanti, menu di navigazione e altro ancora. Dai un'occhiata alla nostra introduzione completa qui.
Fondazione da ZURB
Foundation è il concorrente più significativo di Twitter Bootstrap poiché i due progetti sono molto simili. Come Bootstrap, Foundation offre una griglia reattiva e vari elementi dell'interfaccia utente in stile.
La Fondazione 3 è appena stata lanciata di recente, quindi se non hai dato un'occhiata al progetto per un po ', è il momento di fermarti e di dare un'occhiata. È senza dubbio uno dei quadri più utili e completi che troverai ovunque.
Scheletro
Lo scheletro era uno dei primi piatti reattivi per fare un'apparizione ed è ancora uno dei migliori. Nel concetto, è un po 'come Foundation, ma sembra più leggero (tipo, pulsanti e moduli sono gli unici elementi dell'interfaccia utente inclusi).
Dai uno sguardo al nostro tutorial su Skeleton per vedere quanto sia incredibilmente facile questo strumento che consente di ottenere un design reattivo attivo e funzionante in pochi minuti.
Amazium
L'Amazium assomiglia molto a Gumby in quanto è una griglia reattiva costruita sulla base delle 960 tecniche della griglia del passato. Recentemente però il framework è stato aggiornato per estendersi fino a 1.200px in modo da poter sfruttare i display di grandi dimensioni. Include anche il supporto per i display Retina!
Golden Grid System
Il Golden Grid System si definisce una "griglia pieghevole"? che in realtà è solo un modo elegante per dire che le query multimediali vengono utilizzate per comprimere il layout di sedici colonne originale in otto e poi in quattro colonne mentre il viewport si restringe.
Come alcune delle altre griglie che abbiamo visto fino ad ora, Golden Grid System utilizza grondaie basate su ems in modo che le grondaie rimangano sempre in proporzione al contenuto.
Il sistema di griglia CSS 1140px
Questo è un sistema di griglia piuttosto standard senza nulla di particolare. Inizia con una griglia fluida a 12 colonne che utilizza grondaie basate sulla percentuale e funziona perfettamente con monitor da 1.280 e 1.140 px. Man mano che il viewport diventa più piccolo, vengono utilizzate un paio di semplici query multimediali per ridisporre il contenuto.
stackLayout
StackLayout è per i ribelli, sarà molto diverso dagli altri framework che hai provato. Di fatto, è nato da un'antipatia nei tipici framework di layout CSS.
Il principio di base al lavoro qui è che StackLayout usa il blocco in linea come la pietra angolare di un sistema di layout unico. Il sistema è un po 'eccentrico, ma è comunque piuttosto impressionante. Dai un'occhiata a una soluzione.
SimpleGrid
SimpleGrid è un altro sistema di layout unico che ti piacerà se ami giocare con queste cose tanto quanto me. La griglia qui si basa su quattro diverse gamme dello schermo: schermi con larghezza inferiore a 720px, schermi con larghezza superiore a 720px, schermi con larghezza superiore a 985px e schermi con larghezza superiore a 1235px.
Per implementare il sistema, si utilizza? Slot? classi dal layout a quattro e sei colonne. Sembra complicato ma in realtà è fedele al suo nome e abbastanza semplice da implementare.
Fluid Baseline Grid
Fluid Baseline Grid è costruito con una forte enfasi sulla tipografia forte che aderisce ad una griglia di base. Contiene anche una griglia pieghevole a tre colonne che vuole essere un utile punto di partenza, non uno standard da seguire.
Columnal
Columnal è una sorta di sistema a griglia ibrida che prende in prestito i migliori elementi da vari altri framework. Ha il DNA elastico del sistema a griglia CSS 1140px con alcuni 960.gs. È roba piuttosto standard ma se gli altri non sembrano una buona idea, potresti provarlo.
Inuit.css
Inuit.css è un ottimo framework che è in realtà costruito tenendo in considerazione l'estensibilità. Usa il generatore di griglia personalizzato per creare la tua griglia reattiva, quindi scarica alcuni igloo (plugin) per estendere il framework in modi utili.
320 e fino
320 e Up è come una raccolta di parole chiave del web design (in senso buono). Contiene un sistema di layout reattivo che utilizza prima il? Mobile? mentalità, insieme a stili visuali Bootstrap, icone Font Awesome, Modernizr, Selectivizr, LESS e Sass. È una piccola cassetta degli attrezzi impressionante che credo ti piacerà.
Susy: griglie reattive per Compass
Questo è per i super secchioni come me che amano i sistemi di layout così come Sass e Compass. Costruisci i tuoi layout in pochi minuti con la magia di mix e variabili.
Dato che Compass ha recentemente abbandonato il supporto nativo per le griglie del tutto, Susy dovrebbe tornare utile per coloro a cui mancano.
Initializr - Modello HTML5 reattivo
Initializr è uno strumento che ti aiuta a lanciare i tuoi progetti HTML5 in modo rapido e semplice usando HTML5 Boilerplate, Bootstrap o un nuovo boiler reattivo.
La selezione del modello reattivo è solo l'inizio, da lì puoi creare il tuo download personalizzato scegliendo tra tutte le risorse che potresti tipicamente volere, come Modernizr e LESS.
Ancora un altro mobile Boilerplate
YAMB è un ottimo punto di partenza per i tuoi progetti web reattivi, basati su alcune caratteristiche chiave: una griglia fluida reattiva, menu di navigazione a discesa che si trasformano automaticamente in caselle selezionate su schermi piccoli e immagini / presentazioni reattive.
Penso che il sito Web sia piuttosto brutto, ma il set di strumenti in sé è abbastanza utile!
Wirefy
Wirefy è stato progettato appositamente per la sperimentazione di wireframing rapido e reattivo. Usa una versione modificata della griglia di sedici colonne 960 insieme ad alcuni elementi dell'interfaccia utente tipo Bootstrap (menu, moduli, presentazioni, pulsanti, immagini, ecc.).
Qual è il tuo preferito?
Inevitabilmente, questi tipi di post attirano i commentatori che sentono la necessità di tentare di screditare l'intera nozione di utilizzare qualsiasi tipo di modello o sistema di griglia per il web design. Semplicemente non sono per tutti e rispetto la tua opinione se non riesci a sopportarli.
Se ti piacciono i sistemi di rete, mi piacerebbe sentire il tuo feedback sulle opzioni di cui sopra. Quali hai provato e cosa hai pensato di loro? Qual è il tuo preferito?