Share
Per molti web folk, lo sviluppo di un progetto da zero ogni volta fa parte del lavoro; spesso è difficile creare una base di codice riutilizzabile quando ogni progetto è diverso. Gli sviluppatori più esperti possono aver avuto il tempo di sviluppare una qualche forma di framework front-end, ma farlo correttamente può essere un'impresa seria, senza menzionare la necessità di mantenere le cose aggiornate e in linea con le migliori pratiche.
Guardando ai desideri e ai bisogni di ogni codificatore, è chiaro che gli sviluppatori vogliono qualcosa che sia open source, stabile, flessibile e (la cosa più importante) ben documentata. A seconda delle dimensioni del progetto, un sistema di griglia CSS potrebbe essere sufficiente, ma non sarebbe bello se tu avessi la possibilità di aggiungere e rimuovere funzionalità come hai ritenuto opportuno? Bene, in questa sessione vedremo un framework front-end personalizzabile chiamato Foundation.
Coprire un framework come Foundation deve essere fatto in modo corretto e dettagliato, quindi nelle prossime settimane ricoprirò ogni cosa dall'inizio, dalle build personalizzate, fino agli inserti degli ingranaggi che alimentano questo particolare framework. Soprattutto, illustrerò come potrebbe avvantaggiarti nei tuoi futuri sforzi sul web.
Foundation è un framework di front-end costituito da molti strumenti utili per rendere i primi siti web reattivi e mobili. Realizzato principalmente con HTML, CSS e jQuery, Foundation utilizza tecnologie e pratiche moderne, ma si degrada con grazia fin da IE8. Sebbene il framework sia più comunemente usato dagli sviluppatori HTML e CSS, hai la possibilità di portare avanti le cose usando Foundation in collaborazione con Sass e Rails.
La società dietro Foundation, ZURB, ha creato un set di strumenti strettamente regolato per sviluppatori e designer. Ogni modulo ha il suo ruolo da svolgere nel framework nel suo insieme, ma allo stesso tempo può funzionare in modo completamente indipendente dalla leadership centrale. Ciò significa, quindi, che è possibile combinare le funzionalità nel progetto corrente o prendere una singola funzione e aggiungerla a un progetto precedente. Puoi persino aggiungerlo come caratteristica a un diverso framework.
Quindi, in sintesi, si tratta di una struttura moderna che è stata ben costruita e che si rivolge a un'ampia varietà di utenti. Offre un buon set di funzionalità, è gratuito e c'è una crescente comunità di persone che ti aiuta se ti blocchi.
Oggigiorno è normale che gli sviluppatori facciano uso di framework (perché reinventare la ruota?) Spesso però molti di questi framework sono diventati gonfiati dai creatori che cercavano di coprire ogni eventualità su base ad hoc. Ciò che una volta può aver iniziato la vita come uno strumento leggero e leggero, può crescere in un centinaio di richieste HTTP e un coro da smontare a seconda delle tue esigenze.
La Fondazione include una gamma di funzioni e caratteristiche. È basato su un sistema a griglia fluida basato sulla percentuale, viene fornito con un cursore jQuery, un plug-in lightbox, ha tutti gli elementi HTML immaginabili piacevolmente disegnati ed è stato progettato pensando ai dispositivi mobili. È possibile creare moduli personalizzati che utilizzano jQuery per ri-immaginare elementi di input, dropdown e checkbox di input complessi, il che significa che è possibile modellarli facilmente. Il framework offre anche opzioni per la definizione di layout mobili personalizzati utilizzando la griglia mobile, offrendo la flessibilità necessaria per personalizzare davvero il progetto per utenti mobili e desktop.
Zurb ha ricostruito un sacco di funzionalità di base nella versione 4 per coprire casi di utilizzo abbastanza ampi. Il codice sembra essere stato tenuto pulito e commentato dove deve essere. L'aggiunta e la rimozione di funzioni è semplice e consente di adattare la tua build alle tue esigenze.
Gli utenti che eseguono la versione 3 sono anche in grado di seguire un documento di migrazione per aggiornare le installazioni esistenti o, se lo desiderano, possono continuare a utilizzare la versione 3 come host ZURB della versione precedente per quelli che non sono pronti a fare il salto alla v4.
Zurb ha una pagina di download che ti consente di modificare un modulo pre-compilato per generare una build personalizzata perfetta per le tue esigenze. Diciamo che vuoi solo una griglia CSS? Fatto. Basta deselezionare tutto tranne "griglia" e digitare le misure del progetto. Forse vuoi elementi di base dell'interfaccia utente? Fatto. Ancora una volta basta controllare gli elementi dell'interfaccia utente richiesti, come etichette e pulsanti, ed è esattamente quello che otterrai. Puoi anche prendere tutto ciò che offrono (indicato come il lavello della cucina) in un solo clic. Consente di personalizzare i colori CSS predefiniti e anche le dimensioni della chiave, come la larghezza massima.
Anche se questo è utile, è ancora solo una forma e sento che potrebbe essere migliorata. Idealmente, mi piacerebbe vedere un processo graduale con forse qualche rappresentazione visiva del modello HTML. Inoltre, dato che v4 usa em come unità di misura ed em è basato sulla dimensione del carattere principale, sembrerebbe intuitivo includere un calcolatore px-em, solo per renderlo un po 'più semplice.
Vai su http://foundation.zurb.com e fai clic sul grande pulsante di download. Ti verranno presentate molte opzioni per personalizzare il tuo framework. Deseleziona tutte le funzioni che non ti servono, inserisci i colori primario, secondario, di avviso, di successo e di carattere. Combina questo con ampiezze di breakpoint, larghezze massime, grondaie e persino una scelta di quante colonne vuoi.
Dopo aver esaminato i principali vantaggi offerti da Foundation e nell'esecuzione del download personalizzato, è necessario creare una build personalizzata nella cartella dei download. Giocaci, prova le cose e se rimani bloccato dai un'occhiata ai documenti o invia le tue domande nel thread dei commenti qui sotto.
Nella parte successiva di questa sessione useremo il sistema della griglia, immergendoci nella navigazione, schede, pulsanti e alcuni altri elementi dell'interfaccia utente chiave. Parliamo anche di alcuni strumenti che possono aiutare ulteriormente il tuo sviluppo quando usi Foundation come base per i tuoi progetti.
Accentsconagua