Twitter Bootstrap gör skapandet av komplexa sidlayouter en bris. Släpp i några rader av HTML, tillämpa några klasser och du har fått dig en anständig snygg, minimal arbetsmockup.
Skulle det inte vara trevligt om sakerna var ännu enklare men? Vad händer om Bootstrap hade ett visuellt gränssnitt? Vad händer om du kan bygga Bootstrap-sidor genom att dra och släppa element på en tom duk? Med Easel.io kan du göra exakt det. Låt oss se hur det fungerar.
Komma igång
När du har gått igenom den snabba registreringsprocessen kommer du till din Dashboard. Här bör du se en inkluderad demosida och några kontroller för att skapa ett nytt dokument från början.
Strax utanför flaggan finner jag mig själv och önskar att det fanns några grundläggande sidlayouter som kan användas som byggstenar. Det skulle vara kul att se en massa startmallar här i framtiden.
Istället för detta, slå på? Skapa ett dokument? knappen för att komma igång. Härifrån, namnge ditt dokument och ange behörigheterna med rullgardinsmenyn.
UI & Verktyg
UI här är väldigt enkelt. Det finns bara en stor tom duk och en uppsättning verktyg som går ner till vänster.
Standard Bootstrap verktygsuppsättning är uppdelad i åtta sammanfaller kategorier: typografi, tabell, former, knappar, navigering, behållare, miniatyrbilder och diverse.
Det finns också en grundläggande ikonbaserad verktygsserie till höger med några typiska verktyg: Flytta, rektangel, typ, zooma och panorera. Förutom Bootstrap-elementen finns det några anpassade element i "Easel Pack"? och en uppsättning gratis ikoner som du kan använda i din design.
Workflow
Easel har ett ganska öppet arbetsflöde. Dra bara föremål på duken och blanda dem runt. Om du vill att din resulterande kod ska struktureras ordentligt och slutresultatet ska vara responsivt måste du följa en mycket mer specifik process.
Det finns inte mycket dokumentation att tala om, så jag är visserligen lite dum på detaljerna själv, men här är hur jag tycker det fungerar.
Börja med en behållare
Det första du vill göra är att dra ut en behållare. Detta ligger i "Containrarna"? delen av dina verktyg.
Tänk på detta när det gäller ditt typiska nätverkssystem innehåller behållarna rader innehåll, som alla innehåller ett visst antal kolumner.
När du har en behållare eller något annat objekt valt, kommer den högra sidan av skärmen att lever med olika alternativ för att finjustera storleken, rundheten etc. av vad du än har valt.
Dessa alternativ är kontextkänsliga och ändras beroende på vad du har valt.
Nu en rad
Nu när du har en behållare att arbeta med är det dags att dra i rad. Se till att du drar den i behållaren som du skapade i föregående steg. Du bör se en höjdpunkt på svävar som hjälper dig att se var du placerar raden.
Som standard visas en rad med två kolumner. När du klickar och drar för att ändra storleken på en, anpassar den andra automatiskt för att ta upp resten av utrymmet.
Om du vill ha fler kolumner, välj bara en och hans duplikatknapp nära toppen av högra menyn. Du kan också manuellt ställa in varje kolumnbredd med nedrullningen under? Anpassad? verktygsmenyn.
Dra och släpp element
Nu när du har några kolumner att arbeta med kan du börja fylla dem med olika element. Här brukade jag använda de tre rutorna som jag satt upp för att lägga ut lite snygg text.
Härifrån, helt enkelt upprepa denna process om och om igen. Du kan använda den befintliga behållaren, dra bara ut nya rader och fortsätt lägga till objekt i de raderna. Här har jag tagit med en annan rad med text och några miniatyrbilder.
anpassning
När du har några element på sidan kan du börja tweaking och anpassa dessa element. Välj till exempel lite text och försök att ändra teckensnittet. Easel har stora webbtyper från både Typekit och Google.
Andra godisar
Innan vi sätter ihop är det värt att påpeka några fler funktioner. Först, som jag nämnde ovan, finns en stor uppsättning bra ikoner inbyggda i appen:
Det finns också några super användbara rutnätsalternativ som gör att du verkligen kan få en bra titt på vad som händer med Bootstrap-layouten. Du kan både visa och anpassa ditt rutnät i den här menyn.
Sedan vi följde ett responsivt arbetsflöde kan vi använda ikonerna längst upp till höger för att ändra visningsportstorleken och se hur vår design svarar på olika scenarier.
När du än är klar med din design kan du ladda ner koden och resurserna som användes. Den här funktionen är överlägset den bästa delen av appen eftersom det gör dina prototyper något som du faktiskt kan använda.
Koden som genereras här är snygg och ren; väldigt nära vad du får när du arbetar för hand med Bootstrap.
Hur är det?
Trots att jag alltid dricker om WYSIWIGs, var jag ganska glatt över att få händerna på Easel. Jag har tänkt ett tag nu att Bootstraps rena kodsystem skulle vara lätt att automatisera och hoppats att någon skulle hoppa på en interaktiv Bootstrap-sidobyggare.
När jag väl hade tagit hand om Easel var mina tankar blandade. Låt oss undersöka några specifika områden och hur de gick.
Koncept: Awesome
Människorna bakom Easel har en bra start. De har ett stellärt koncept och en solid grund för att bygga upp något som verkligen är användbart för Bootstrap-användare (av vilka det finns många).
Instruktioner: Nästan ingenxistenta
För närvarande kan jag tycka att hitta någon riktig dokumentation för hur man använder Easel (kanske är det där och jag ser det inte!). Beviljas, det är den typ av app som du bara vill hämta och springa med, men det finns fortfarande tillräckligt komplexitet här att det krävs en del djupgående dokumentation.
Det finns åtminstone några användbara verktygstips när du sveper över olika användargränssnitt. Dessa är trevliga, men är inte tillräckliga på egen hand.
Layout Workflow: A Little Wonky
Att bygga en sida med Easel är super lätt, dra och släpp bara objekt på sidan. Tyvärr, när du börjar göra det, får du den smygande misstanken att du gör något fel.
Då upptäcker du? Containrar? avsnitt och du inser att du kanske skulle använda behållare och rader i din layout. Om det här verkligen är det första steget men varför är inte dessa överst på verktygslistan?
När du förstår att du borde skapa rader, delar de raderna i något annat än två kolumner faktiskt ganska knepigt. Det tog mig lång tid att räkna ut hur man gör det och jag är fortfarande inte säker på att jag gör det korrekt.
Jag skulle helt ompröva hur layout fungerar. Lägg först layoutverktygen överst på verktygssatsen. Därefter visas en gång en rad på en behållare några kontroller som gör att jag enkelt kan öka och minska antalet kolumner i den behållaren samt tweak varje kolumnbredd.
Ge mig också några förbyggda layoutmoduler för att dra ut. De kan se ut så här:
Dessa skulle ge dig möjlighet att snabbt dra ut och skapa vanliga layoutstrukturer med nästan nollansträngning, vilket kraftigt minskar den nuvarande layoutfraseringen.
Platshållare bilder: En Mess
Det behöver definitivt vara ett bättre system för platshållare bilder. När jag drar i en enda platshållare kan jag inte få det att ändra storlek på ett effektivt sätt. Denna funktionalitet är super buggy och det hoppar mellan en liten bild eller en ovanligt stor. Ge mig ett enkelt sätt att kasta i en platshållare bild som tar upp tolv kolumner och är 300px lång, en som är fyra kolumner bred och 100px lång, etc.
Miniatyrnätet är inte heller lätt att arbeta med. Jag tror att det ska finnas enkla kontroller som tillåter mig att ställa in antalet bilder att använda i varje rad och kolumn, men det finns inget sådant system. I stället får du tre bilder som standard och måste gå igenom en besvärlig och klumpig process för att kopiera och klistra in dig till galleriet som du verkligen vill ha.
Prissättning: Bra
Jag gillar verkligen prisstrategin. Jag förväntade mig fullt ut att blockera kodhämtning för gratis användare som liknar Gridset, men jag fann att jag faktiskt kunde göra nästan vad jag ville ha på den fria planen.
Premieplanerna tar väsentligt ut för ökat samarbete och obegränsade sidor, vilket är definitivt rättvist. Om du med jämna mellanrum hittar ett sätt att räkna ut webbplatser snabbare med den här produkten, är $ 15 per månad en no-brainer.
Gå och försök!
Jag var ganska hård på Easel i min återkoppling, men det är bara för att jag ser massor av potential här och vet att det här kan gå ifrån? Någonting snyggt att leka med? till ett oumbärligt verktyg? med lite tid och uppmärksamhet.
I sin nuvarande form är Easel ett bra statiskt mockupverktyg, men för levande, lyhörda prototyper funnit jag mig själv att tänka på hur jag kan koda upp en Bootstrap-layout som jag vill ha mycket snabbare. Helst bör verktyget spara mig tid.
Allt detta sagt, rekommenderar jag starkt att du ger Easel ett försök för dig själv. Ge det ett skott och lämna en kommentar nedan för att meddela vad du tycker.