Verktøy og ressurser

Komme i gang med Foundation for Apps

Så det er en ny versjon av Foundation ...

Ikke lenge siden fortalte vi deg alt om hvordan du kommer i gang med Stiftelse 5 . Nå er det en ny versjon ut; ikke "Stiftelse 6" men Stiftelsen for Apps , og det kommer til å bli stort.

At Stiftelsen 5 er et kraftig og fleksibelt rammeverk, det er ingen tvil. Den kan brukes til innholdsdrevne nettsteder, programmer, nesten alt du kan tenke på, selv om det kan ta litt arbeid og tilpasning. Det er imidlertid layout og designkonvensjoner som er spesifikke for apps. Også apps utvikles ofte for mobile nettlesere, som støtter nyere teknologier.

Kort sagt, det klassiske fundamentet, mens det var fleksibelt nok til å lage apps med, ble opprettet som et verktøy for mange formål. Apputviklere vil kanskje ha noe som passer litt mer spesifikt til deres behov, og Zurb har gitt akkurat det.

Installasjon og funksjoner

Foundation for Apps er ikke den gamle Foundation med noen ekstra funksjoner. Det er et helt annet produkt. Den er laget fra bakken, må være webutvikler-vennlig. Faktisk, mens du ikke trenger å være en utvikler for å bruke den, hjelper det å vite litt om å sette opp utviklingsmiljøer.

Dette skyldes at du ikke bare pakker ut denne rammen og slipper den i mappen Apps. Den er basert på verktøy som Angular.js] ( https://angularjs.org/ ) og sass ; den kommer med sin egen mini-server som vil kompilere og betjene dine prosjekter for deg på fluen. Dette betyr at du må ha node.js,Rubin, og noen få andre ting installert. Du må også installere hele greia fra kommandolinjen. Utviklere som jobber med Linux og OSX, har ingen problemer med å bli satt opp. Det er litt mer plagsomt for håperfulle nørder som meg som bruker Windows.

Når du kommer forbi disse første gangen ... ahem jeg mener, omfavner denne nye måten å gjøre ting på, ser du noen fantastiske ting under dekselet, inkludert:

  • Et rutenett basert på Flexbox og designet for apps. Den inkluderer støtte for å legge ut dine "skjermer" vertikalt og horisontalt, ruller i hver seksjon og mer;
  • tonn UI komponenter;
  • Angular.js; det er alt raseri akkurat nå;
  • en mal og komponentbasert filstruktur;
  • Motion UI: Zurbs nye animasjonsbibliotek designet spesielt for appbrukergrensesnitt.

Starter

En av fordelene med rammeverk generelt er at de er perfekte for å lage raske prototyper. Når du har installert denne tingen, og har startet miniserveren, er det på tide å sette ideene dine sammen i et levende, interaktivt grensesnitt som ikke gjør noe. Ennå.

For denne artikkelen har jeg opprettet en døde enkel "kontaktadministrasjonsside" som ville ha noen klient til å be om mer detaljer, og kanskje en endring av oppsettet:

skjermbilde

I appens katalog finner du flere mapper og filer. Med henblikk på ren frontend-utvikling trenger du bare å bekymre deg om "klient" -mappen. Det er der alle kildefilene dine går. Deretter settes følgende mapper og filer opp som standard: 

assets- js- - app.js- scss- - _settings.scss- - app.css- templates- - home.htmlindex.html

App.scss og app.js- filene er hvor du setter alle dine tilpassede Sass og JS, henholdsvis. _settings.scss er nettopp det: filen hvor du kan overstyre mange av standardstilene. Koden er korrekt kommentert, og det er lett nok å finne det du trenger. Du kan også bruke denne filen til å deaktivere ulike deler av CSS-rammeverket, slik at de ikke vil bli inkludert når appen din er bygget.

index.html er filen som "gjør alt skje" ved å trekke inn andre komponenter, appskjermbilder og så videre. home.html er innholdet som du vil se når du først går til http://localhost: 8080 , når miniserveren kjører. Det er også hvor jeg begynte å jobbe.

Gitteret

Det første du må vente med er rutenettet selv. Den bruker Flexbox, så ting fungerer litt annerledes , men klassene vil bli kjent. For å lage to blokker / kolonner med like bredde, er dette alt du trenger å gjøre:

Jepp. Det er det. Hvis du vil legge til faktisk innhold inni de to kolonnene, må du gjøre det annerledes. Dette er hva kolonnene i prototypen ser ut som:

Du vil legge merke til at du alltid ser ut til å trenge to elementer med grid-block som klasser for å få ting til å justere riktig. Du kan også merke at jeg har spesifisert kolonnebredder manuelt. Hvis du ikke gjør det, vil alle blokkene ekspandere for å fylle all ledig plass, gjenværende like bred.

komponenter

Også inkludert er et stort antall komponenter fra klassisk Foundation. Du har dine klassiske callouts og modale vinduer, varselbokser, skjemaformater, knappestiler, faner og mer. Typografien er solid, og det er også et begrenset ikon sett (alt SVG) inkludert for bruk i knapper, menyer og så videre.

Jeg er spesielt glad i panelene, som egentlig er blokker av innhold skjult av lerret, som kan kalles på skjermen fra alle sider.

Jeg liker også kortene. Kort er bare enkle rektangulære gjenstander ment å skille innhold. Jeg brukte dem til listen over kontakter i skjermbildet ovenfor. For den fulle listen, se dokumentasjonen .

Gå for det.

Hva venter du på? Få kommandolinjen din på og begynn å spille med dette. Selv om du ikke er en apputvikler, er det godt å vite hvordan du arbeider i dette miljøet, spesielt hvis du jobber med de faktiske programmører.

trender for 2015