Komma igång med Foundation for Apps

Så det finns en ny version av Foundation ...

Inte för länge sedan berättade vi allt om hur man började med Stiftelse 5 . Nu finns det en ny version ut; inte "Foundation 6" men Foundation for Apps , och det kommer att bli enormt.

Att Foundation 5 är en kraftfull och flexibel ram, det råder ingen tvekan. Den kan användas för innehållsdrivna webbplatser, appar, nästan vad som helst du kan tänka dig, men det kan ta lite arbete och anpassning. Det finns dock layout- och designkonventioner som är specifika för appar. Dessutom utvecklas applikationer ofta för mobila webbläsare, som stödjer nyare tekniker.

Kort sagt, det klassiska Foundation Framework, men tillräckligt flexibelt för att skapa appar med, skapades som ett verktyg för många ändamål. App-utvecklare kanske vill ha något som passar lite mer specifikt till deras behov, och Zurb har precis tillhandahållit det.

Installation och funktioner

Foundation for Apps är inte den gamla stiftelsen med några extra funktioner. Det är en helt annan produkt. Det är designat från grunden, vara webbutvecklarevänlig. Faktum är att du inte behöver vara en utvecklare för att kunna använda den, men hjälper till lite om att skapa utvecklingsmiljöer.

Detta beror på att du inte bara unzip denna ram och släpp den i mappen Apps. Det bygger på verktyg som Angular.js] ( https://angularjs.org/ ) och sass ; den kommer med sin egen mini-server som kommer att kompilera och betjäna dina projekt för dig på flugan. Det betyder att du måste ha Node.js,Rubin, och några andra saker installerade. Du måste också installera hela saken från kommandoraden. Utvecklare som arbetar med Linux och OSX kommer inte att ha några problem att installera. Det är lite mer besvärligt för blivande nördar som jag som använder Windows.

När du kommer förbi dessa initiala hinder ... menar jag, omfamnar det här nya sättet att göra saker, du kommer se några fantastiska saker under omslaget, inklusive:

Ett nät baserat på Flexbox och utformat för appar. Det inkluderar stöd för att lägga ut dina "skärmar" vertikalt och horisontellt, rulla inuti varje sektion och mer;
massor av användargränssnitt
Angular.js; Det är allt raseri just nu;
en mall och komponentbaserad filstruktur;
Motion UI: Zurbs nya animationsbibliotek utformat speciellt för app användargränssnitt.

Komma igång

En av fördelarna med ramverk i allmänhet är att de är perfekta för att göra snabba prototyper. När du har installerat den här saken och startat miniservern är det dags att sätta dina idéer tillsammans i ett levande, interaktivt gränssnitt som inte gör någonting. Än.

För den här artikeln skapade jag en död enkel "kontakthanteringssida" som skulle få någon klient att be för mer information och kanske en förändring av layout:

I appens katalog hittar du flera mappar och filer. För ren utveckling av framsidan behöver du bara oroa dig för "klient" -mappen. Det är där alla dina källfiler går. Därvid ställs följande mappar och filer in som standard:

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

App.js och app.js- filerna är där du sätter alla dina egna Sass och JS. _settings.scss är just det: filen där du kan åsidosätta många standardstilar. Koden är korrekt kommenterad, och det är lätt att hitta vad du behöver. Du kan också använda den här filen för att helt avaktivera olika delar av CSS-ramverket, så de kommer inte att inkluderas när din app är byggd.

index.html är filen som "gör allt som händer" genom att dra in andra komponenter, appskärmar och så vidare. home.html är det innehåll som du kommer att se när du går till http://localhost: 8080 , när miniservern körs. Det är också där jag började jobba.

Rutnätet

Det första du måste vänja dig på är gallret själv. Det använder Flexbox, så saker fungerar ganska annorlunda , men klasserna kommer att vara bekanta. För att skapa två block / kolumner med samma bredd är detta allt du behöver göra:

Japp. Det är allt. Om du vill sätta verkligt innehåll inuti de två kolumnerna måste du göra det annorlunda. Så här ser kolumnerna i min prototyp ut:

Du märker att du alltid verkar behöva två element med rutnät som klasser för att få saker att stämma ordentligt. Du kanske också märker att jag har angivit kolumnbredder manuellt. Om du inte gör det kommer alla block att expandera för att fylla allt tillgängligt utrymme, som är lika breda.

Komponenter

Det finns också ett stort antal komponenter från klassiska Foundation. Du har dina klassiska callouts och modala fönster, varningsrutor, formulär stilar, knapp stilar, flikar och mer. Typografi är solid, och det finns också en begränsad ikonuppsättning (all SVG) som ingår för knappar, menyer och så vidare.

Jag är särskilt förtjust i panelerna, som i grunden är blockerade av innehåll som är dolda från duk, som kan kallas på skärmen från vilken sida som helst.

Jag gillar också "korten". Kort är bara enkla rektangulära föremål som är avsedda för att skilja innehållet. Jag använde dem för listan över kontakter i skärmdumpen ovan. För hela listan, se dokumentationen .

Ge järnet.

Vad väntar du på? Hämta kommandoraden och börja spela med det här. Även om du inte är en apputvecklare är det bra att veta hur man arbetar i den här miljön, särskilt om du arbetar med faktiska programmerare.

svg tricks