Ratchet är en fantastisk ny ram som gör att du snabbt och enkelt kan skapa prototyp iPhone-applayouter med bara HTML, CSS och JavaScript. Skapa bara en container div i din HTML, kasta i några föremål med förinställda klasser och du är redo att gå.
Följ med när vi hoppar in i Ratchet för att se hur det fungerar. Vi sparkar däcken, provar några funktioner och bestämmer om det är värt att ladda ner. (Spoiler alert: det är.)
Vad är Ratchet?
Ratchet är väldigt enkelt i konceptet. Det är en UI-ram som drivs främst av CSS (och lite JavaScript) som implementeras genom enkel HTML. Det är faktiskt väldigt lik Twitter Bootstrap, bara det är speciellt utformat för att se ut som det inbyggda iPhone-gränssnittet.
Kan jag verkligen göra det här?
Ratchet är inte några superkomplicerade ramar bara för avancerade utvecklare. Du kan få igång med det på bara några minuter. Det kräver ingen kunskap om någon IOS-programmering och verkligen bara den minsta möjliga JavaScript.
För att se hur det fungerar, låt oss bygga en provsida från början.
Komma igång
För att börja, gå vidare till Ratchet GitHub-sidan och ta tag i gratis nedladdning. Inuti den nedladdningen hittar du en startmall, spricka den här i din favorittextredigerare.
I huvuddelen av HTML-filen finns det massor av saker. Vi lämnar detta ensam för våra ändamål, eftersom det ger en anständig testinstallation. Du är välkommen att tweaka peka ikoner, sidtitel etc. som du tycker är lämplig.
Härifrån är allt vi behöver göra genom att bläddra igenom dokumentationen, ta tag i element som vi vill ha och kasta dem in i vår HTML. Det är verkligen så enkelt!
Titelfältet
Det första som vi ska inkludera är en blå titelfält som sitter högst upp på skärmen. Att göra detta är lätt. Börja med att placera den följande koden inuti kroppstaggen i din HTML.
Detta rubrikelement fungerar som behållare för vår titelfält. Låt oss nu kasta i en h1 med en? Titel? klass tilldelad.
Nu om vi laddar upp den här sidan på en iPhone, ser vi en bra iOS-stilrubrik högst upp på sidan. Ganska dang enkelt, eller hur?
Låt oss göra den baren lite mer intressant ska vi? Använda en ankerkod med knappen? Prev? och? knapp-nästa? klasser kan vi ta vår titelfält från rent estetiskt till funktionellt.
Återigen ser vi kraften i denna ram på jobbet. iOS gör inte stil dessa HTML-element som denna som standard gör Ratchet all den tunga lyftningen här.
Slider
Steget ovan skisserar ganska mycket den grundläggande processen att prototyper din app eller webbsida. Bläddra igenom dokumentationen, hitta ett element som du vill använda, klistra in och tweak koden. Därefter kommer vi att inkludera något lite mer imponerande: en bildreglage.
Content Div
Innan vi startar in i reglaget finns det något annat som vi behöver inkludera. Bortsett från titelfältet måste allt i Ratchet kastas inuti en div med en klass av "innehåll".
Du kan skapa flera innehålls divs eller du kan bara kasta allt du behöver till en. Senare ser vi hur man använder en vadderad content div för att lägga till en liten skillnad mellan ditt innehåll och skärmens kant.
Slider-koden
Ratchet-reglaget består av en? Reglage? div, som innehåller en orörd lista. Återigen, se till att allt detta går in i ditt innehåll div.
Varje listobjekt blir här en bild. Du kan inkludera en bild och en sträcka för en textöverlagring.
Detta kommer att fungera som ett enda objekt i vår form. Varje annat objekt behöver sin egen? Ingångsgrupp? div. Inne i ingångsgruppen slänger du i en etikett och ett textfält med lite platsinnehåll.
Detta ger oss ett fält för användaren att skriva in ett namn. Låt oss nu upprepa denna process och kasta i ytterligare två fält: email och användarnamn.
Ratchet kommer att sparka in och hantera all komplicerad form styling för oss, vilket ger oss en fin, vacker form utan allvarliga ansträngningar.
Knapp
Vår app sida ser bra ut! Nu borde du ha en ganska solid idé om hur man hämtar och kör med Ratchet på egen hand, så låt oss avsluta denna sucker med ytterligare ett element: en inlämningsknapp.
Ratchet har dessa fina stora knappar, men som standard sträcker de sig till behållarens hela bredd, vilket inte ser rätt ut i det här exemplet. Till följd av detta vill vi implementera "content-padded"? klass som jag nämnde tidigare.
Sätt in den här diven i slutet av din form så här:
Detta ger oss några pixlar av vaddering så att vår knapp har lite utrymme att andas. Nu behöver vi bara placera en ankare märke inuti med två klasser: knapp-huvud och knapp-block.
Därmed är vår sida färdig! Det är en ganska skarp ser prototyp med tanke på allt vi gjorde var kopiera, klistra in och anpassa några utdrag av HTML!
Live-demo: Klicka här för att starta (ska ses på en mobil enhet).
Mycket mer!
Tänk på att vi knappt har repat på ytan av vad som ingår i Ratchet.Det finns många fler knapp stilar, titellinjealternativ, andra former; tillräckligt för att verkligen få en bra start med en fungerande prototyp.
Länka sidor
Ingen fungerande iPhone app prototyp skulle vara värt sitt salt utan den kända lilla iPhone sidövergången. Lyckligtvis tar den medföljande Push.js-filen hand om det här för dig när du länkar länkar till varandra. Du kan även konfigurera olika övergångar: utan att skriva några JavaScript.
Vad tycker jag om Ratchet?
Tre ord: Ratchet är fantastisk. Jag skulle definitivt vilja se lite mer noggrann dokumentation och till och med några fler element, men det är bara jag som vill ha mer av en bra sak.
Jag hade nästan inget problem att komma igång med denna ram. Inom några minuter från din första nedladdning bygger du bra fungerande prototyper. Vad mer kan du fråga?
Den enda frågan som jag stötte på är med slidertexter. Jag är inte säker på vad jag gör fel, men jag kan inte få texten att dyka upp över bilden om jag bara följer instruktionerna på Ratchet-webbplatsen (några manuella överskridanden löser problemen). Annars fungerar allt perfekt.
Gå och försök!
Nu när du har sett vad Ratchet är, vad det kan göra och hört min åsikt om det, ta tag i din gratis nedladdning. Leka med det i några minuter sedan lämna en kommentar nedan och låt oss veta vad du tycker. Har du hittat andra liknande ramar? Hur jämför de med Ratchet?