Työkalut ja resurssit

Apps-sovellusten säätiön aloitus

Joten, uusi säätiön versio ...

Kauan sitten kerroimme sinulle kaiken siitä, miten pääset alkuun Säätiö 5 . Nyt on olemassa uusi versio; ei "Foundation 6" mutta Säätiö sovelluksille , ja se tulee olemaan valtava.

Tämä säätiö 5 on tehokas ja joustava kehys, ei ole epäilystäkään. Sitä voidaan käyttää sisältöä ohjaaviin verkkosivustoihin, sovelluksiin, melkein mitä tahansa, mitä voi ajatella, vaikka se saattaisi kestää jonkin verran töitä ja räätälöintiä. Sovelluksissa on kuitenkin layout- ja suunnittelukäytäntöjä. Sovelluksia kehitetään myös mobiiliselaimille, jotka tukevat uudempia tekniikoita.

Lyhyesti sanottuna klassinen säätiökehys, joka on riittävän joustava tekemään sovelluksia, luotiin työkaluna monissa tarkoituksissa. Sovelluskehittäjät saattavat haluta jotain, joka palvelee hieman tarkemmin heidän tarpeisiinsa, ja Zurb on antanut juuri tämän.

Asennus ja ominaisuudet

Säätiö Appsille ei ole vanha säätiö, jossa on joitain lisäominaisuuksia. Se on täysin erilainen tuote. Se on suunniteltu alusta asti olla web-kehittäjäystävällinen. Itse asiassa, vaikka sinun ei tarvitse olla kehittäjä käyttää sitä, se auttaa tuntemaan hieman kehitystoimintojen määrittämisestä.

Tämä johtuu siitä, että et vain poista tätä kehystä ja pudota sovelluksesi kansioon. Se perustuu työkaluihin, kuten Angular.js] ( https://angularjs.org/ ) ja nenäkkyys ; se sisältää oman mini-palvelimen, joka kokoaa ja palvelee projekteitasi lennossa. Tämä tarkoittaa, että sinun täytyy olla Node.js,Rubiini, ja muutama muu asennus. Sinun on myös asennettava koko asia komentoriviltä. Linuxissa ja OSX: ssä toimivilla kehittäjillä ei ole mitään ongelmia saada käyttöön. Se on hieman hankalampi pyrkivä nerds kuten minä, jotka käyttävät Windowsia.

Kun olet mennyt ohi tämän ensimmäisen hurdl ... ahem tarkoitan, omaksua tämä uusi tapa tehdä asioita, näet mahtavia tavaroita kannen alle, mukaan lukien:

  • Flexbox-pohjainen verkko, joka on suunniteltu sovelluksille. Se sisältää tuen "ruudut" pystysuoraan ja vaakasuoraan tekemiseen, vierittämällä jokaisen osion sisällä ja enemmän.
  • tonnia UI-komponentteja;
  • angularjs; se on kaikki raivoa juuri nyt;
  • mallipohja ja komponenttipohjainen tiedostorakenne;
  • Motion UI: Zurbin uusi animaatiokirjasto, joka on suunniteltu erityisesti app-käyttöliittymille.

Päästä alkuun

Yksi kehysten eduista yleensä on, että ne sopivat täydellisesti nopeiden prototyyppien tekemiseen. Kun olet asentanut tämän ja aloittanut mini-palvelimen, on aika laittaa ideasi yhteen live-vuorovaikutteiselle käyttöliittymälle, joka ei tee mitään. Vielä.

Tätä artiklaa varten luotiin kuollut-yksinkertainen "yhteyshenkilönhallintasivu", jolla olisi jokin asiakas, joka kertoi lisää yksityiskohtia ja ehkä asettelun muutosta:

kuvakaappaus

Sovelluksen hakemistossa on useita kansioita ja tiedostoja. Puhtaan etupään kehittämisen kannalta sinun tarvitsee vain huolehtia "client" -kansiosta. Siellä kaikki lähdetiedostot menevät. Siinä oletusarvoisesti määritetään seuraavat kansiot ja tiedostot: 

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

Apps.scss- ja app.js- tiedostoihin, joihin laitat kaikki mukautetut Sass ja JS. _settings.scss on juuri se: tiedosto, jossa voit ohittaa paljon oletustyylit. Koodi on kommentoinut oikein, ja se on helppo löytää mitä tarvitset. Voit myös käyttää tätä tiedostoa poistamaan CSS-kehyksen eri osat kokonaan käytöstä, joten niitä ei oteta mukaan, kun sovelluksesi on rakennettu.

index.html on tiedosto, joka "tekee kaiken mahdolliseksi" vetämällä muita komponentteja, sovellusnäyttöjä jne. home.html on sisältö, jonka näet, kun aloitat ensin http://localhost: 8080 , kun mini-palvelin on käynnissä. Sieltä myös aloin työskennellä.

Verkko

Ensimmäinen asia, johon sinun täytyy tottua, on verkko itse. Se käyttää Flexboxia, joten asiat toimivat aivan eri tavalla , mutta luokat ovat tuttuja. Voit luoda kaksi samanarvoista leveää lohkoa / saraketta, kaikki mitä tarvitset:

Jep. Se siitä. Jos haluat sijoittaa todellisen sisällön näiden kahden sarakkeen sisälle, sinun on tehtävä se toisin. Näin prototyypin sarakkeet näyttävät:

Huomaat, että aina näytät tarvitsevan kaksi elementtiä, joilla on ristikkorakenne luokkiin, jotta asiat toimisivat oikein. Saatat myös huomata, että olen määrittänyt manuaalisesti sarakkeen leveydet. Jos et, kaikki lohkot laajenevat täyttämään kaikki käytettävissä olevat tilat, jotka ovat yhtä laaja.

komponentit

Mukana on myös lukuisia klassisen säätiön komponentteja. Sinulla on klassiset kutsut ja modaaliset ikkunat, hälytysruutut, muotoilutyypit, painotyypit, välilehdet ja paljon muuta. Typografia on vankka, ja siinä on myös rajoitettu kuvasymboli (kaikki SVG), joka on tarkoitettu käytettäväksi painikkeissa, valikoissa ja niin edelleen.

Olen erityisen ihastunut paneeleista, jotka ovat pohjimmiltaan piilotettuja sisältöjä, jotka voidaan kutsua ruudulle mistä tahansa puolelta.

Pidän myös "kortista". Kortit ovat vain yksinkertaisia ​​suorakulmaisia ​​esineitä, jotka tarkoittavat erillistä sisältöä. Käytin niitä yllä olevassa kuvakaappauksessa olevien kontaktien luettelossa. Täydellinen luettelo, ks asiakirjat .

Anna palaa.

Mitä odotat? Hanki komentorivi ja aloita pelaaminen tämän kanssa. Vaikka et ole sovelluksen kehittäjä, on hyvä tietää, miten työskennellä tässä ympäristössä, varsinkin jos työskentelet varsinaisten ohjelmoijien kanssa.

kuvien peittäminen tekstillä