Nyligen tittade vi på Easel, en webbaserad webbplatsbyggare som utnyttjar Twitter Bootstrap. Idag följer vi upp det med en rundtur i ett mycket liknande verktyg: Divshot.
Med Divshot kan du snabbt och enkelt bygga rena och lyhörda webbsidor med hjälp av en kombination av visuella verktyg och handkodning. Det är ett riktigt smart verktyg och jag tror att du kommer att tycka om att använda den.
Möt DivShot
Om du läser vår artikel om Easel, kommer Divshot att vara superbekant. Konceptet här är exakt detsamma. Du är försedd med ett visuellt, dra och släpp stilgränssnitt som bygger på Twitter: s väldigt populära Bootstrap-ram.
Som du kan se, precis som med Easel, har vi en stor duk som upptar det mesta av skärmen och ett sidofält där alla verktyg, UI-element och anpassningsalternativ finns. Allt du ser här är super enkelt och ganska lätt att använda. Låt oss hoppa in och bygga en sida.
Skapa en ny sida
Överst på gränssnittet ser du en horisontell streck som innehåller två kontroller: en för att skapa mappar och en för att skapa filer. Skapa först en ny mapp med rullgardinsmenyn till höger, sedan en ny sida med rullgardinsmenyn till höger.
Genom att skapa en ny sida visas skärmen som visas nedan. Här kan du välja mellan några olika startlayouter (en nyckelfunktion saknas i Easel), klonera den aktuella sidan eller börja från början.
Låt oss vara äventyrliga och starta en ny tom sida så att vi verkligen får en känsla för hur det är att bygga något med det här verktyget.
Lägg till en navigeringsmeny
När du har startat din nya sida, ta en gander i sidofältet till vänster och hitta "Komponenterna"? sektion. Här hittar du alla Bootstrap UI-bitar som du känner till om du någonsin har använt ramen.
Bläddra igenom de olika alternativen tills du hittar navigeringsfältet. Dra ut detta i området med den streckade gränsen (Bootstrap-sidbehållaren).
Med den lilla ansträngningen har vi oss en fin liten pre-styled navigeringsmeny högst upp på vår sida. Den levereras med plats för företagsnamn och två sidor.
Att anpassa denna meny är enkelt. Dubbelklicka på en bit text för att skriva in ett ersättningsvärde och Alternativ-dra ett menyalternativ för att duplicera det. Jag bytte företagsnamn till? Design Shack? och kopierade några fler menyalternativ. Här är resultatet:
Hjältenheten
Detta är i princip hur arbetsflödet går. Nu fortsätter vi helt enkelt att dra och anpassa element från sidofältet. Låt oss sedan dra i en? Hero Unit.?
Återigen är anpassning super lätt. Allt jag gjorde var dubbelklick på texten och skriv in något nytt. Nu har vi en snygg snygg rubrik för vår sida.
Layout
Låt oss nu delta i lite mer av en friforms layoutövning. Jag vill skapa tre kolumner innehåll. För att göra detta drar jag ut en? Layout? modulen och det här är vad jag får:
Som du kan se är det som standard delat i två kolumner. Om jag kolla inspektören i sidofältet kan jag anpassa det här antingen genom att skriva siffror manuellt eller genom att klicka på en av fabrikslayouterna.
Jag klickade på den tre kolumnlayouten och kollade på? Fluid Columns? låda. Nu ser min layoutmodul ut som vad jag vill ha och är redo att få lite innehåll.
Kärninnehåll
Nu när vi har dessa smutsiga layoutfält som definierar vart innehållet ska gå, behöver vi bara dra ut några artiklar i dem. Jag kastade i en rubrik, punkt och bild i varje, tweaking de tillgängliga anpassningsalternativen som jag gick.
Anpassad CSS
Min favoritfunktion i Divshot är möjligheten att lägga till i din egen anpassade kod. Detta är absolut viktigt om du kommer att få några verkliga utvecklare att ens överväga att använda någon form av WYSIQYG. Om jag inte kan anpassa något som jag inte gillar kan jag helt enkelt inte använda din app.
En sak som jag inte tycker om i min layout är för närvarande bristen på utrymme mellan dessa platsbilder och punkterna nedanför dem. Det här är enkelt att fixa. Först lägger jag till en klass i var och en av rutorna med hjälp av strukturen? alternativ.
Nu om jag slår på? Redigera CSS? knappen längst ned till vänster kommer en stapel upp från botten av skärmen och tillåta mig att lägga till några anpassade CSS. Jag gillar särskilt att jag kan använda förprocessorer här. Allt sammanställs live, komplett med felrapportering. Grymt bra!
Med den här koden har min navigationsfält och mina bilder nu ett litet rum att andas. Mycket bättre! Om du behöver det finns det även en modul att lägga till i anpassad HTML, så du har verkligen frihet att göra vad du vill.
Fler verktyg
Nästan högra höger på skärmen har du några olika verktyg som är värda att nämna. Det finns en standard Ångra / Redo, en kodnedladdning, en liveförhandsvisning och en knapp för att ändra ditt visningsport
Kom ihåg att allt är byggt ovanpå Boostrap, vilket innebär att dina mönster ska vara fullt mottagliga. Detta är en fantastiskt bonus som inte ska glättas över. Detta är ett av de enklaste sätten jag känner till att bygga upp dig själv en snygg och lyhörd webbplats. Det finns till och med en meny som låter dig ställa in om ett objekt är gömt eller synligt i en viss visningsportstorlek.
Easel eller Divshot? Vilket är bättre?
Så nu har jag provat och granskat två av dessa verktyg. Frågan är, vilken ska du vända dig till om du vill bygga en Bootstrap-webbplats? För att vara ärlig finns det ingen klar cut vinnare totalt sett. Om vi tittar på enskilda egenskaper har jag dock starka åsikter om vilket är bättre.
Arbetsflöde och layout: Divshot
I allmänhet fann jag att arbetsflödet och layoutprocessen var mycket bättre i Divshot än Easel. Easel-arbetsflödet var klumpigt och jag gjorde flera förslag för att förbättra det i min recension.Intressant nog, när jag försökte Divshot, fann jag att det passade mycket nära vad jag trodde att Easel skulle vara.
Jag älskade kolumnlayoutmodulen och hur lätt det var att tweak för att passa mina egna behov. Easel har något liknande, men det är inte lika smidigt eller intuitivt.
Typ och ikoner: Easel
Det här är en plats där Easel är den klara vinnaren. Den har full support för Google Web Fonts och ger dig mycket större anpassning över din typ. Faktum är att typverktygen var mycket bättre i Easel, även utan de anpassade typsnitten.
Dessutom har Easel också integration med FontAwesome så att du har tillgång till massor av bra ikoner som du snabbt kan kasta i ditt arbete.
En cool sak som Divshot gör har dock en temakopplare, som låter dig ändra det övergripande utseendet på hela temat med några få klick. Det finns för närvarande tretton teman och en? Anpassad? alternativ.
Kod Export: Easel
Båda programmen har en kod exportfunktion, men den för Easel var mycket mer robust och imponerande, så att du kan se alla de olika elementen och ladda ner en .zip som innehåller allt.
Anpassning: Divshot
Detta är bokstavligen den viktigaste egenskapen för mig som användare och jag ger den här till Divshot. De anpassade kod tweaking funktionerna här är verkligen trevligt, särskilt CSS modulen. Jag kände verkligen att jag kunde göra nästan vad jag ville och jag uppskattade verkligen den friheten.
Platshållare bilder: Divshot
Platshållarens bildsystem var en av mina största klagomål om Easel. Deras platshållare bilder verkade super buggy och svårt att arbeta med. I jämförelse är Divshots verkligen enkla och enkla att använda.
Prissättning:?
Divshot är för närvarande i fri offentlig beta, så det är omöjligt att berätta hur de två kommer att jämföra i pris tills Divshot släpper sina prisplaner. De kommer att ha mycket att leva upp till eftersom jag verkligen gillar Easel prissättning struktur. Det är inte super billigt men du får ganska lite på den fria planen:
Divshot Klagomål & Feedback
Jag har grundligt haft det med att använda Divshot och tycker att det är ett av de bästa snabbprototypverktygen jag har kommit över. Bootstrap låter sig så bra för den här typen av app och jag är glad över att utvecklare arbetar hårt för att skapa verktyg som gör Bootstrap ännu enklare. Det sägs att det finns vissa områden som behöver förbättras.
Typ suger
Först typografi anpassning. Återigen måste Divshot ta en sida ur Easels bok om den här. Deras textverktyg är mycket mer intuitiva och kraftfulla.
Bättre Box Model Tweaking
Jag tycker att det för närvarande är för mycket arbete att tweak avståndet mellan olika föremål. Det är trevligt att jag har möjlighet att skriva en egen CSS, men för något så enkelt som vaddering och marginal, borde jag kunna skriva in siffrorna i ett fält nära där jag sätter in dimensionerna.
CSS Download
För närvarande ger koden Export-funktionen dig bara HTML. Jag behöver definitivt se ett alternativ att paketera allt tillsammans i en nedladdning som vi såg med Easel.
Buggy Förhandsvisning
Jag är inte säker på varför, men det verkade som om min live-förhandsvisning var konsekvent en förändring bakom, så det reflekterade nästan aldrig det aktuella läget i mitt dokument. Detta var ganska irriterande!
Ge mig lite rum!
Jag tyckte att det var väldigt svårt att lägga till objekt längst ner i min layout om det sträckte sig under gränsen för visningsporten. Ge mig ett lite extra rum där nere för att jobba med, även om det inte finns i den faktiska produktionen.
Vad tror du?
Divshot är en stellar app och jag tror definitivt att du ska ge det ett skott, speciellt om du är en fan av Boostrap, Foundation och andra liknande all inclusive ramverk.
Nu när du har sett vad Divshot handlar om, lämna en kommentar och låt mig veta vad du tycker. Skulle du använda detta över Easel? Varför eller varför inte? Vilka andra liknande verktyg har du stött på och hur jämför dem?