Share
For mange webfolk er det alltid en del av jobben å utvikle et prosjekt fra bunnen av hverandre. Det er ofte vanskelig å bygge opp en gjenbrukbar kodebase når hvert prosjekt er annerledes. Mer erfarne utviklere kan ha tatt seg tid til å bygge opp noen form for front-end rammeverk, men å gjøre dette på riktig måte kan være et seriøst foretak, for ikke å nevne behovet for å holde ting oppdatert og inline med beste praksis.
Når man ser på ønsker og behov for alle kodene, er det klart at utviklere vil ha noe som er åpen kildekode, stabil, fleksibel og (viktigst) godt dokumentert. Avhengig av prosjektets størrelse kan det være nok med et CSS-gridsystem, men ville det ikke vært bra hvis du hadde muligheten til å legge til og fjerne funksjonalitet som du så passe? Vel, i denne sesjonen ser vi på et tilpassbart front-end rammeverk kalt Foundation.
Å dekke et rammeverk som Stiftelsen må gjøres skikkelig og detaljert, så de neste ukene vil jeg dekke alt fra å komme i gang, skreddersydde bygg, gjennom til inn-og utgangene til tannhjulene som driver denne rammen. Viktigst av alt, vil jeg illustrere hvordan det kan være til nytte for deg i dine fremtidige nettoppgaver.
Stiftelsen er en front-end ramme som består av mange verktøy som er nyttige for å gjøre responsive, mobile første nettsteder. Fundamentalt bygget med HTML, CSS og jQuery, bruker Foundation moderne teknologi og praksis, men graciøst nedgraderer så langt tilbake som IE8. Selv om rammene er mest brukt av HTML og CSS utviklere, har du muligheten til å ta ting videre ved å bruke Foundation sammen med Sass og Rails.
Selskapet bak Foundation, ZURB, har skapt en tett regimentert verktøysett for utviklere og designere. Hver modul har sin rolle å spille i rammen som helhet, men kan samtidig jobbe helt uavhengig av sentralt lederskap. Hva dette betyr da er at du kan blande og matche funksjoner i ditt nåværende prosjekt, eller ta en enkelt funksjon og legge den til i et eldre prosjekt. Du kan til og med legge den til som en funksjon til et annet rammeverk.
Så i sammendrag er dette et moderne rammeverk som har blitt godt bygget og som passer for et bredt utvalg av brukere. Det gir et godt sett med funksjoner, det er gratis, og det er et voksende samfunn av mennesker som hjelper deg hvis du sitter fast.
I dag er det vanlig for utviklere å bruke rammebetingelser (hvorfor gjenoppfinne hjulet?) Ofte skjønt, mange av disse rammebetingelsene har blitt oppblåst fra skaperne som prøver å dekke alle eventualiteter på en adhoc basis. Det som en gang kan ha startet livet som et glatt, lett verktøy, kan vokse til hundre http-forespørsler og et kor å demontere, avhengig av dine behov.
Stiftelsen inneholder en rekke funksjoner og funksjoner. Den er bygget på et prosentbasert fluidnett, leveres pakket med en jQuery-glidebryter, en lightbox-plugin, har alle imaginable HTML-elementer, stilig stylet og bygget med mobil, først og fremst. Du kan opprette egendefinerte skjemaer som bruker jQuery til å gjenkjenne vanskelige innspillingselementer, rullegardiner og avmerkingsbokser, noe som betyr at du enkelt kan style dem. Rammeverket har også muligheter for å sette opp egendefinerte mobillayouter ved hjelp av mobilnettet, noe som gir fleksibiliteten til å personliggjøre prosjektet ditt for brukere av mobil og skrivebord..
Zurb har gjenoppbygget mye kjernefunksjonalitet i versjon 4 for å dekke ganske brede bruksområder. Koden ser ut til å ha blitt holdt ren og kommenterte hvor den skal være. Å legge til og fjerne funksjoner er rett frem og gjør det mulig å skreddersy din konstruksjon for å matche dine behov.
Brukere som kjører versjon 3, kan også følge et migreringsdokument for å oppgradere sine eksisterende installasjoner, eller hvis de ønsker det, kan de fortsette å bruke versjon 3 som ZURB vert for den forrige versjonen for de som ikke er klare til å hoppe til v4.
Zurb har en nedlastingsside som lar deg finpusse et ferdigfylt skjema for å generere en tilpasset konstruksjon som er perfekt for dine behov. La oss si at du bare vil ha et CSS-nett? Ferdig. Bare fjern avmerkingen alt unntatt "rutenett" og skriv inn prosjektmålingene dine. Kanskje vil du ha grunnleggende brukergrensesnitt? Ferdig. Igjen bare kontroller UI-elementene du trenger, for eksempel etiketter og knapper, og det er akkurat det du får. Du kan til og med ta tak i alt de tilbyr (referert til som kjøkkenvasken) med bare ett klikk. Det tillater tilpassede standard CSS-farger og til og med viktige størrelser som maksimal bredde.
Selv om dette er nyttig, er det fortsatt bare et skjema, og jeg føler at det kan forbedres. Ideelt sett vil jeg gjerne se et iscenesatt prosess med kanskje noen visuell representasjon av HTML-malen. Også, da v4 bruker em som måleenhet og em er basert på hovedfonestørrelsen, vil det virke intuitivt å inkludere en px-til-em-kalkulator, bare for å gjøre det litt lettere.
Gå videre til http://foundation.zurb.com og klikk på den store nedlastningsknappen. Du vil bli presentert med mange alternativer for å tilpasse rammen. Fjern merket for eventuelle funksjoner du ikke trenger, legg inn primære, sekundære, varsel, suksess og fontfarger. Kombiner dette med brytpunktsbredder, maks. Bredder, takrenner og til og med et valg av hvor mange kolonner du vil ha.
Etter å ha sett på de viktigste fordelene som Foundation tilbyr og kjører gjennom tilpasset bygge nedlasting, bør du ha en personlig byggesitting i nedlastingsmappen din. Spill rundt med det, prøv ut ting, og hvis du sitter fast ta en titt på docs eller kaste spørsmålene dine i kommentaren tråden nedenfor.
I neste del av denne sesjonen bruker vi rutenettet, dykker i navigasjonen, fanene, knappene og noen andre viktige UI-elementer. Vi vil også snakke om noen verktøy som kan hjelpe utviklingen din videre når du bruker Foundation som grunnlag for dine prosjekter.
Accentsconagua