Qual è giusto per me? 22 Spiegazione dei frame CSS reattivi e dei bollitori
I framework CSS sono in circolazione ormai da anni, ma l'arrivo di pratiche di progettazione reattiva ha reso inutili molti dei nostri vecchi preferiti. Fortunatamente, molti sviluppatori di talento hanno fatto un salto per colmare il divario con la prossima generazione di framework CSS e boilerplate.
Ci sono già un sacco di queste cose che galleggiano intorno. Ognuno ha un elenco, ma nessuno ti guida davvero attraverso il modo in cui ciascun framework e boilerplate differiscono 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 unico ciascuno di questi 22 framework CSS reattivi e boilerplate.
Gumby
Il framework Gumby prende la griglia 960 su cui tutti ci siamo tagliati i denti anni fa e la introduce nell'era moderna del web design con un tocco reattivo. Ha anche stili predefiniti per cose come moduli, pulsanti, interruttori, menu a discesa, schede e altro ancora.
Il sistema di griglia semantica
Se odi i sistemi a griglia e il loro markup gonfio e non semantico, questo è per te. Il sistema di griglia semantica sfrutta la potenza dei preprocessori CSS (LESS, Sass e Stylus) per creare variabili personalizzabili per cose come grondaia e larghezza della colonna. Tutto quello che devi fare è utilizzare alcuni mixin predefiniti nel tuo CSS, non è richiesto alcun markup aggiuntivo!
gridless
Gridless è un potente boilerplate che utilizza il primo design web responsive mobile per adattarsi alla larghezza del dispositivo. È anche ricco di fantastiche funzionalità come la normalizzazione CSS, le correzioni di bug di IE e gli stili tipografici.
senza telaio
Frameless è difficile da classificare perché è tecnicamente più un modo consigliato di approcciare il design reattivo rispetto a un set effettivo di file che è possibile scaricare. Esistono tre passaggi: in primo luogo, crea una griglia a larghezza fissa normale, quindi ripetila all'infinito e finisci centrandola nella finestra.
Il sito afferma specificamente che Frameless non è un framework e che non ci sono file da scaricare, ma nonostante ciò ci sono in realtà alcuni modelli di base per aiutarti a iniziare.
Griglie proporzionali
Le griglie proporzionali affrontano alcuni grandi problemi che sorgono quando si tenta il layout CSS reattivo, vale a dire la nidificazione delle griglie e la lotta con valori basati su percentuali attraverso finestre molto diverse.
Le griglie proporzionali utilizzano il dimensionamento dei riquadri CSS per creare una soluzione che consenta grondaie fisse (ems / rems) mescolate a colonne fluide. La distanza tra le colonne rimarrà uguale in ogni punto di interruzione, in relazione alla dimensione del carattere di base. Le colonne sono definite in proporzione, ad esempio metà, un terzo, due terzi e possono essere facilmente riutilizzate tutte le volte che vuoi, anche quando nidificate.
L'approccio dei riccioli d'oro
L'approccio Goldilocks ha lo scopo di ridurre la tendenza dei progetti reattivi a inclinarsi verso il supporto di dispositivi specifici. Invece, cerca un design universale che non dipende da alcun dispositivo.
L'approccio Goldilocks utilizza una combinazione di em, larghezza massima, query multimediali e traduzioni di modelli per prendere in considerazione tre stati che consentono ai progetti di essere indipendenti dalla risoluzione.
Bootstrap di Twitter
Twitter Bootstrap non ha bisogno di presentazioni. È una delle più grandi e più cattive placche CSS sul web ed è il punto di partenza per innumerevoli siti professionali e personali da sviluppatori di tutto il mondo.
Twitter Bootstrap include un sistema di griglia reattivo oltre a tonnellate di elementi pre-disegnati stellari come moduli, pulsanti, menu di navigazione e altro ancora. Dai un'occhiata alla nostra introduzione completa qui.
Fondazione di ZURB
Foundation è il concorrente più significativo di Twitter Bootstrap in quanto i due progetti sono molto simili. Come Bootstrap, Foundation offre una griglia reattiva e vari elementi dell'interfaccia utente in stile.
Foundation 3 è appena stato lanciato di recente, quindi se non hai dato un'occhiata al progetto da un po 'di tempo, è tempo di fermarti e dare un'occhiata. È senza dubbio uno dei framework più utili e completi che troverai ovunque.
Scheletro
Skeleton è stato uno dei primi piatti a reazione reattivi a fare la sua comparsa ed è ancora uno dei migliori. In teoria, è un po 'come Foundation, ma sembra più leggero (tipo, pulsanti e forme sono gli unici elementi dell'interfaccia utente inclusi).
Dai un'occhiata al nostro tutorial di Skeleton per vedere quanto è incredibilmente facile questo strumento per ottenere un design reattivo attivo e funzionante in pochi minuti.
Amazium
Amazium è molto simile a Gumby sopra in quanto è una griglia reattiva costruita sopra le vecchie tecniche di griglia 960. Di recente però il framework è stato aggiornato per estendersi fino a 1.200 px in modo da poter sfruttare grandi display. Include anche il supporto per i display retina!
Sistema a griglia dorata
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 originale di sedici colonne in otto e poi quattro colonne mentre la finestra si restringe.
Come alcune delle altre griglie che abbiamo visto finora, Golden Grid System utilizza grondaie basate su EMS in modo che le grondaie rimangano sempre proporzionate al contenuto.
Il sistema di griglie CSS 1140px
Questo è un sistema a griglia piuttosto standard senza nulla di speciale. Si inizia con una griglia fluida a 12 colonne che utilizza grondaie basate su percentuale e funziona alla grande su monitor da 1.280 e 1.140 px. Man mano che la finestra si riduce, vengono utilizzate alcune semplici query multimediali per ridisporre il contenuto.
stackLayout
StackLayout è per i ribelli, sarà molto diverso dagli altri framework che hai provato. In realtà, è nato da una antipatia per i tipici framework di layout CSS.
Il principio di base al lavoro qui è che StackLayout utilizza il blocco inline come pietra angolare di un sistema di layout unico. Il sistema è un po 'eccentrico ma è comunque piuttosto impressionante. Dai un'occhiata a una procedura dettagliata qui.
SimpleGrid
SimpleGrid è un altro sistema di layout unico che ti piacerà se ti piace giocare con queste cose tanto quanto me. La griglia qui si basa su quattro diverse gamme di schermi: schermi di larghezza inferiore a 720 px, schermi di larghezza superiore a 720 px, schermi di larghezza superiore a 985 px e schermi di larghezza superiore a 1235 px.
Per implementare il sistema, si utilizzano classi di "slot" da un layout a quattro e sei colonne. Sembra complicato ma in realtà è fedele al suo nome e abbastanza semplice da implementare.
Griglia di base fluida
La griglia di base fluida è costruita con una forte enfasi sulla tipografia forte che aderisce a 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 specie 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 anche alcuni 960 g. È roba abbastanza standard ma se gli altri non sembrano una buona misura, potresti provarlo.
Inuit.css
Inuit.css è un ottimo framework che è in realtà costruito pensando all'estensibilità. Utilizzare il generatore di griglia personalizzato per creare la propria griglia reattiva, quindi scaricare alcuni igloo (plug-in) per estendere il framework in modi utili.
320 e fino
320 and Up è come una raccolta di parole d'ordine del web design (in senso buono). Contiene un sistema di layout reattivo che utilizza la mentalità "mobile first", insieme a stili visivi Bootstrap, icone Font Awesome, Modernizr, Selectivizr, LESS e Sass. È una piccola e impressionante cassetta degli attrezzi che credo ti piacerà.
Susy: griglie reattive per Compass
Questo è per i super nerd come me che adorano i sistemi di layout, nonché Sass e Compass. Crea i tuoi layout in pochi minuti con la magia di mixin e variabili.
Dato che Compass ha recentemente abbandonato del tutto il supporto nativo per le reti, Susy dovrebbe tornare utile per coloro che le mancano.
Initializr - Modello HTML5 reattivo
Initializr è uno strumento che ti aiuta a lanciare i tuoi progetti HTML5 in modo rapido e semplice utilizzando HTML5 Boilerplate, Bootstrap o una nuova reattiva boilerplate.
La selezione del modello reattivo è solo l'inizio, da lì puoi creare il tuo download personalizzato scegliendo tra tutte le risorse che potresti desiderare in genere come Modernizr e LESS.
Ancora un'altra piastra mobile della caldaia
YAMB è un ottimo punto di partenza per i tuoi progetti Web reattivi, basato su alcune caratteristiche chiave: una griglia fluida reattiva, menu di navigazione a discesa che si trasformano automaticamente in caselle selezionate su schermi di piccole dimensioni e immagini / presentazioni reattive.
Penso che il sito web sia piuttosto brutto ma il set di strumenti in sé è abbastanza utile!
Wirefy
Wirefy è stato realizzato appositamente per la sperimentazione di wireframing rapida e reattiva. Utilizza una versione modificata della griglia a sedici colonne 960 insieme ad alcuni elementi dell'interfaccia utente simili a Bootstrap (menu, moduli, presentazioni, pulsanti, immagini, ecc.).
Qual è il tuo preferito?
Inevitabilmente, questi tipi di post attireranno 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 invece ti piacciono i sistemi a griglia, mi piacerebbe sentire il tuo feedback sulle opzioni sopra. Quali hai provato e cosa ne pensi di loro? Qual è il tuo preferito?
