Værktøjer og ressourcer

Kom i gang med Foundation for Apps

Så der er en ny version af Foundation ...

For længe siden fortalte vi jer alt om, hvordan vi kom i gang med Stiftelse 5 . Nu er der en ny version ud; ikke "Foundation 6" men Foundation for Apps , og det bliver enormt.

At Foundation 5 er en stærk og fleksibel ramme, der er ingen tvivl om. Det kan bruges til indholdsdrevne websteder, apps, næsten alt hvad du kan tænke på, selv om det måske tager noget arbejde og tilpasning. Der er imidlertid layout- og designkonventioner, der er specifikke for apps. Derudover udvikles apps ofte til mobile browsere, der understøtter nyere teknologier.

Kort sagt, det klassiske fundament ramme, mens det er fleksibelt nok til at lave apps med, blev oprettet som et værktøj til mange formål. App-udviklere kan have noget, der passer mere specifikt til deres behov, og Zurb har givet netop det.

Installation og funktioner

Foundation for Apps er ikke det gamle fundament med nogle tilføjede funktioner. Det er et helt andet produkt. Det er designet fra bunden til at være webudviklervenlig. Selvom du ikke behøver at være en udvikler til at bruge det, hjælper det med at vide lidt om at oprette udviklingsmiljøer.

Dette skyldes, at du ikke blot pakker ud denne ramme og slipper den i din apps mappe. Den er baseret på værktøjer som Angular.js] ( https://angularjs.org/ ) og Sass ; den kommer med sin egen mini-server, som vil kompilere og betjene dine projekter til dig på flugt. Det betyder at du skal have node.js,Rubin, og et par andre ting installeret. Du skal også installere hele sagen fra kommandolinjen. Udviklere, der arbejder på Linux og OSX, har ingen problemer med at blive konfigureret. Det er lidt mere besværligt for håbende nørder som mig, der bruger Windows.

Når du kommer forbi disse indledende forhindringer ... ahem jeg mener, omfavn denne nye måde at gøre ting på, vil du se nogle fantastiske ting under omslaget, herunder:

  • Et gitter baseret på Flexbox og designet til apps. Det omfatter støtte til at lægge dine "skærme" lodret og vandret, rulle inden for hver sektion og mere;
  • tons af UI komponenter;
  • Angular.js; det er al den vrede nu
  • en skabelon og komponentbaseret filstruktur;
  • Motion UI: Zurb's nye animationsbibliotek designet specielt til app-brugergrænseflader.

Kom i gang

En af fordelene ved rammerne generelt er, at de er perfekte til at lave hurtige prototyper. Når du har installeret denne ting, og har startet mini-serveren, er det tid til at sætte dine ideer sammen i en levende, interaktiv grænseflade, der ikke gør noget. Endnu.

For denne artikel oprettede jeg en død-enkel "kontaktadministrationsside", der ville have nogen klient tigge for flere detaljer og måske en ændring af layout:

skærmbillede

I din apps mappe finder du flere mapper og filer. Med henblik på ren front-end udvikling, behøver du kun at bekymre sig om "klient" mappen. Det er her, hvor alle dine kildefiler går. Derefter oprettes følgende mapper og filer som standard: 

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

App.js og app.js- filerne er hvor du sætter alle dine brugerdefinerede Sass og JS. _settings.scss er bare det: den fil, hvor du kan tilsidesætte mange standardstile. Koden er korrekt kommenteret, og det er nemt nok at finde det, du har brug for. Du kan også bruge denne fil til helt at deaktivere forskellige dele af CSS-rammen, så de vil ikke blive inkluderet, når din app er opbygget.

index.html er den fil, der "gør det hele ske" ved at trække i andre komponenter, app skærme og så videre. home.html er det indhold, du vil se, når du først går til http://localhost: 8080 , når miniserveren kører. Det er også hvor jeg begyndte at arbejde.

Nettet

Det første du bliver nødt til at vænne sig til er nettet selv. Det bruger Flexbox, så tingene fungerer lidt anderledes , men klasserne vil være bekendt. For at oprette to blokke / kolonner af samme bredde er dette alt, hvad du skal gøre:

Jep. Det er det. Hvis du vil lægge det faktiske indhold inde i de to kolonner, skal du gøre det anderledes. Dette ser kolonnerne i min prototype ud:

Du vil bemærke, at du altid synes at have brug for to elementer med grid-block som klasser for at få tingene til at rette sig ordentligt. Du kan også bemærke, at jeg har manuelt specificeret kolonnebredder. Hvis du ikke gør det, udvides alle blokke for at udfylde alt ledigt rum, der forbliver lige store.

komponenter

Også inkluderet er et stort antal komponenter fra Classic Foundation. Du har dine klassiske indkaldelser og modale vinduer, advarselsbokse, formularer, knappestiler, faner og meget mere. Typografien er solid, og der er også et begrænset ikon sæt (alt SVG) inkluderet til brug i knapper, menuer og så videre.

Jeg er særligt glad for panelerne, der er dybest set blokke af indhold skjult off-canvas, som kan kaldes på skærmen fra enhver side.

Jeg kan også lide "kortene". Kort er blot simple rektangulære objekter, der er beregnet til at adskille indhold. Jeg brugte dem til listen over kontakter i skærmbilledet ovenfor. For den fulde liste, se dokumentationen .

Gå efter det.

Hvad venter du på? Få din kommandolinje på og start med at spille med dette. Selvom du ikke er en appudvikler, er det godt at vide, hvordan du arbejder i dette miljø, især hvis du arbejder med de faktiske programmører.

wordpress widgets