Idag tar vi en titt på Boks, ett fantastiskt litet verktyg som hjälper dig att ange en grundläggande webbplatslayout på nolltid.
Vi ska gå igenom vad det är och hur du kan använda det för att påskynda din utveckling, liksom vad begränsningarna och nackdelarna är som du vill vara medveten om innan du laddar ner appen.
Introduktion
Räcksystem är ett intressant odjur: du älskar dem antingen eller hatar dem. Personligen kan jag se båda sidor av argumentet, men i slutändan har jag inte för mycket mot dem som beviljas att du anpassar dem till dina egna ändamål snarare än att lämna massor av orörd och / eller icke-sematisk kod.
Det verkliga problemet med nätsystem är hur komplicerat de tenderar att vara. Jag avslutade precis en handledning på Six Revisions om att använda 960 Grid System och kommentarerna tycktes vara enhälliga eftersom de flesta bara behövde någon att förklara hur man använder systemet i vanliga, lättförståeliga termer. Om du befinner dig förvirrad av rutnätverk, var noga med att kolla in den artikeln.
Som en uppföljning ville jag visa dig hur du använder en GUI för att skapa väldigt komplexa CSS- och HTML-kodstrukturer, baserat på CSS Framework, otroligt snabbt. Vi gör det med ett AIR-program som heter Boks.
Plan
Bara för att korta dig, är Blueprint en fri ram med massor av bra funktioner. Dessa inkluderar:
- En CSS-återställning som eliminerar skillnaderna mellan webbläsare.
- Ett solidt nät som kan stödja det mest komplexa av layouter.
- Typografi baserat på expertprinciper som föregår webben.
- Formstilar för snygga användargränssnitt.
- Skriv ut stilar för att göra en webbsida redo för papper.
- Plugins för knappar, flikar och sprites.
- Verktyg, redigerare och mallar för varje steg i ditt arbetsflöde.
För min egen användning är Blueprint lite för massiv, vilket vi ser senare. Men många utvecklare använder det religiöst och tycker att det är en av de bästa ramarna där ute.
Gilla det eller inte, det här vad Boks använder för att skapa kod. Om Boks utvecklare läser detta, skulle jag gärna se ett alternativ att använda 1KB CSS Grid istället.
Vad är böcker?
Tillräcklig introduktion redan, vad är det här Boks sak? Jag kan ärligt inte komma ihåg hur jag hittade det ursprungligen men det var en av de situationer där du hämtar något, slänger det i din applikationsmapp och glömmer att det existerar. Jag rensade nyligen min hårddisk av en sådan nonsens när jag öppnade Boks för första gången och tänkte? Hej det här är verkligen snyggt !?
Som jag sa tidigare är Boks en AIR-applikation så det ska fungera bra med Mac eller PC.
Vad Boks gör är ett innovativt visuellt sätt att skapa den grundläggande strukturella markeringen för din webbplats. Jag slutar precis där för att berätta för WYSIWYG-hatare att jag är med dig. Om kodning av en plats från början är som att närma sig en tom duk, känner WYSISYG alltid mig lite som Paint By Number.
Vad jag menar med det här är att de i allmänhet är alltför strukturerad och lägger till all sorts onödig inblandning och komplikation. Boks är inte en av dessa applikationer. Det är faktiskt inte ens något som du skulle använda för att bygga en hel webbplats. Det hjälper dig bara att skapa det skelett som du bygger din webbplats på.
Komma igång
När du har tagit bort den fria nedladdningen öppnar du Boks och du får se gränssnittet som visas nedan.
Här kommer du visuellt att lägga ut din webbplatsstruktur. Att göra det här är lika enkelt som att klicka och dra där du vill att dina kolumner ska gå. Men innan du gör något annat, klicka på ? Grid Settings? knapp. Här hittar du massor av anpassningsalternativ för hur Boks ska bygga din sida.
Under de ovanstående rutnätalternativen kan du ställa in din sidbredd tillsammans med antal kolumner och hur du vill dela upp rännorna och kolumnerna. Redan ser vi att Boks gör att använda ett rutnätverk mycket flexibelt och mycket lättare att anpassa än att riva ihop kodstycket för bit.
I bilden ovan kan du se att jag har satt upp allt för att i huvudsak arbeta som 12-kolonnversionen av 960 Grid-systemet. Detta ger mig 12 kolumner som var 60 pixlar breda med en rännan på 20 pixlar. Om du inte håller med, helt enkelt skriv in din egen föredragen konfiguration här.
Andra inställningar
Flyttar till nästa flik i inställningsfönstret, här kan du ange en anpassad baslinje för teckensnittstorleken och ange eventuella rubrikartiklar du behöver.
CSS- och JavaScript-flikarna låter dig bifoga anpassade resurser. Dessa kommer att placeras i egna mappar eller bifogas den befintliga koden.
Slutligen, om du ändrar något alls i inställningarna, var noga med att göra exportinställningarna. Det finns ett antal viktiga saker här att slå på. Först anger du sidtitel och språk. Kontrollera sedan att du använder rätt DOCTYPE. Standard är XHTML, men som du kan se på skärmen nedan stöds HTML5 så att du kan använda Boks under en längre tid.
jag rekommenderar verkligen stänga av ? Komprimera CSS? alternativ. Det blir mycket lättare att sortera igenom och anpassa din kod om du gör det här. Annars kommer allt att bli krossat ihop. Detta är bra för filstorlek men oerhört irriterande att försöka läsa.
Slutligen, om det är första gången du använder Boks, kanske du vill aktivera alternativet för att visa nätet så att du kan se vad som händer. Självklart, när du börjar använda detta för att skapa riktiga webbplatser, vill du släcka det alternativet.
Skapa sidlayouten
Nu när vi har alla våra inställningar kvadrade bort är det dags att skapa layouten. För att göra detta, helt enkelt klicka och dra på rutnätet att skapa en div.
En rektangel kommer att dyka upp som automatiskt knyter till den rutnätstruktur du har skapat.Du kan skapa så många divs som du vill genom att klicka och dra för att lägga till mer. För att ompositionera en div, klicka på den en gång och använd piltangenterna. Håll skiftet medan du använder piltangenterna för att ändra storlek på en div.
Lägga till Markup
Boks innehåller många funktioner som gör att du verkligen kan anpassa din layout precis som du skulle om du manuellt kodade. Du kan ame div, lägga till en gräns och förhandsgranska och lägga till några CSS-klasser.
Om du vill gå så långt kan du till och med börja hämta HTML-innehåll i en div. Som du kan se nedan skriver du bara in det som du vill i en kodredigerare.
Vet du inte vad du vill fylla i layouten med vid den här tiden? Inget problem, du kan antingen lämna det tomt eller använda Boks inbyggda Lorem Ipsum-generator för att skapa en del dummy-text.
Bli tokig
Som du kan se i bilden nedan tillåter du Boks att skapa layouter som är så komplicerat som du behöver dem att vara. Layouten nedan har ett navigeringsområde, ett sidofält, ett innehållsområde och en sidfot. Innehållsområdet har flera andra divs nestade inuti och delas upp i separata kolumner.
Detta tog bokstavligen ungefär trettio sekunder och kan därmed spara dig massor av uppåtkodande tid i början av byggandet.
Ingen höjd?
Som jag sa tidigare är Boks inte avsett att skapa hela webbplatser. De horisontella staplarna som du ser i bilderna ovan representerar Endast den resulterande bredden och hierarkin av de skapade divsna. Höjden på varje kommer att expandera dynamiskt när du lägger till innehåll, men några specifika höjder måste hanteras när du faktiskt går vidare till kodning av webbplatsen.
exportera
När du är klar med att dela upp din layout, tryck på exportknappen och välj en plats för filerna. Resultatet blir en HTML-fil tillsammans med CSS, JavaScript och andra resurser du valt att inkludera.
Slutprodukten ser inte ut som mycket vid denna tidpunkt, men med tanke på att det tog bara några sekunder och kommer att lösa många av dina CSS-layouthuvudvärk, det är ingen liten prestation!
Nackdelen
Den olyckliga delen är naturligtvis den enorm CSS-fil som resulterar. Om du brukar använda Blueprint, kommer det inte att stör dig minst, men det kan köra alla andra nötter.
Som jag sa tidigare skulle det vara kul att se en 1KB-implementering av Boks som tog bort all denna extra kod. Under tiden är CSS-filen väldigt tydlig och innehåller många kommentarer. Detta gör det enkelt att gå in och snabbt radera någon kod som du inte behöver.
Om du vill fortsätta använda Boks för att skapa dina layouter men inte vill ha allt detta extra CSS rekommenderar jag att du tar några minuter för att skapa din egen anpassade CSS-fil som du kan återanvända om och om igen. För att göra det här, kolla bara på standard CSS-filen och eliminera allt som inte påverkar rutnätlayouten. Detta inkluderar textstilar, fältformat, återställningskod etc. Efter att ha gjort det en gång kan du alltid släppa in den som en ersättning för CSS-filen skapad av Boks.
Om du är smart nog kan du kanske högerklicka på programmet och gå till? Visa paketinnehåll? att peka på de standardfiler som används här och anpassa dem efter eget tycke (endast Mac).
Slutsats
Boks är ett snyggt litet verktyg som hjälper dig att skapa den grundläggande markeringen för din webbplats med hjälp av en fullständigt anpassningsbar version av Blueprint Framework-kolonnsystemet. Det är inte meningen att skapa fullständiga webbplatser utan att spara tid på framsidan av ditt projekt som tas upp genom att skapa olika divs och tillämpa lämpliga klasser.
Tyvärr, eftersom du är ganska fast med att använda Blueprint-ramen, är Boks inte för alla. Lämna en kommentar nedan och låt oss veta vad du tycker om Blueprint och huruvida du ska använda Boks på ditt nästa projekt.