Webbutvecklare sticker ständigt ut gratis verktyg som är otroligt användbara för att minska mängden små, irriterande uppgifter som du måste hantera när du bygger en webbplats eller mockup.
Idag ser vi på tre färska verktyg som du brinner genom layout, platshållare bilder och textstilar på din nästa sida.
Griddle.It
Det första verktyget som vi ska titta på hjälper oss snabbt att specificera en sidlayout baserad på ett rutnät. Jag vet vad du tänker, du hatar rutnätverk rätt? Ton fluff, icke-semantiska klassnamn, onödig komplexitet; alla gör CSS-ramar hatade av många utvecklare.
Lyckligtvis Griddle.Det är inte en CSS-ram alls! Det är bara en anpassningsbar bakgrunds grafik som hjälper dig att anpassa ditt innehåll genom att infoga kolumner och pixelbredder.
Hur man använder det
Anvisningarna för att använda Griddle.Det finns rätt på webbplatsen och kan inte vara enklare, men bara så att du verkligen kan få en känsla för hur verktyget fungerar, vi startar dagens projekt med det och bygger vidare med nästa verktyg .
Allt du behöver göra för att implementera Griddle.It är inställd på bakgrunden av din CSS-fil till en anpassad URL som bygger nätet för dig. Webbadressens struktur är följande:
Så låt oss säga att du vill ha din webbplats för att vara 1200 pixlar bred med 12 kolumner vardera med en rännan på 20 pixlar. Släpp bara följande CSS i ditt dokument:
Se hur? 1200-12-20? definierar de villkor som vi skjuter för? Om du nu vill ändra det här till något lite mer typiskt, säger 960 pixlar vid 12 kolumner och en 30 pixel rännan, skulle snippet vara:
Detta gäller automatiskt följande bild på bakgrunden av din webbsida. Det är ganska svårt att se i den lilla förhandsgranskningen nedan, så klicka här för att se ett aktuellt exempel. Prova att röra med siffrorna i webbadressen för att se hur de uppdaterar bilden.
Det finns några fler grundläggande funktioner som att byta färger och lägga till horisontella linjer, men för vårt ändamål kommer det att bli bra. Härifrån kan vi börja krossa en grundläggande webbsidayta.
Lägga till innehåll baserat på rutnätet
För att börja, kasta vi en div i vårt dokument som håller tre kolumner text. För nu kommer vi bara att inkludera en platshållare stycke och sedan kasta in några CSS för att knyta den på plats.
Nu, med tanke på att vårt galler är 960 pixlar breda med 30 pixel takrännor, vet vi att vi vill ställa in bredden på vår div till 960px med en marginal på? Auto? att centrera den. På samma sätt kan vi, genom att titta på vår bild på nätet, se att vi delar upp sidan i tre jämn kolumner, vi vill gå med en bredd på 300px för punkterna.
Jag har gjort några andra viktiga saker här, liksom att ställa in min float för nästa par stycken och kasta på några marginaler. Observera att den högra marginalen är lika med kolonnrännan.
Denna kod ger oss resultatet nedan. Som du kan se är vår text snygg med vårt bakgrundsrör. Den motiverade inställningen har gjort för några fula luckor i texten, men vi bråkar bara ut en snabb mock-up så jag kan leva med det.
Denna struktur är ganska bra och fungerar bra med vårt nät, men se vad som händer när vi lägger till i ytterligare två stycken. Marginalen på vår sista punkt är att skruva upp vår layout.
Det här kan enkelt lösas med hjälp av Pseudo-väljaren för sista barnet, men från vad jag kan säga är IE-stöd på detta zilch, så jag gjorde i stort sett samma sak med en klass som vi kan använda igen senare.
Med det har vi en fin tre kolonnlayout. Kunde vi ha gjort det utan bakgrundsbilden? Säkert! Men Griddle.It hjälpte oss att visualisera vår layout så att vi kunde hoppa över matematiken involverad i att dela upp tre kolumner i ett 960px stort utrymme med enhetliga rännor.
Det är viktigt att notera att vår CSS här är super minimal jämfört med vad du får använda ett vanligt nätverkssystem som 960.g.
Lorempixum
Vår vanliga textwebbplats ser ganska tråkig ut! Vid denna tidpunkt har vi inte riktigt några bilder för att spice upp det, så vad kan vi göra för att krossa vår layout?
Ange Lorempixum, en riktigt cool liten tjänst som är begreppsmässigt nästan identisk med Griddle.It. Du använder en anpassningsbar URL för att infoga en bild, den här gången men bilden kommer att vara en innehållsplatshållare, inte ett bakgrundsruten som används för layout.
Med den webbapps som visas ovan kan du skapa en bild som bara är rätt storlek. Du kan också bara släppa in webbadressen nedan. Det första numret är bredden och den andra är höjden.
Det finns ett antal sätt att göra detta mer specifikt. Du kan välja mellan färg eller svartvitt eller ens specificera din kategori från en pool med elva alternativ. Till exempel, här är URL-adressen för en slumpmässig stadsbild som är 510px bred med 310px lång och den resulterande bilden.
Låt oss använda detta på vår lilla webbsida. Till att börja med lägger vi till en stor header-bild som är 960px bred med 350px lång.Bredden är uppenbarligen vår hemsida men höjden är något jag bara greppade slumpmässigt. Här är HTML:
Resultatet är en kraftigt förbättrad typografisk närvaro på vår sida. Observera att vi inte har använt en bråkdel av vad som ingår i typ-a-filstilarna, var noga med att peka runt och kolla på allt stilarket har att erbjuda. När du är klar kanske du också vill köra en CSS-rengöringstjänst, såsom Oanvänd CSS, för att rensa bort alla egenskaper i den typ-a-filhämtning som du inte slutade använda.
Slutsats
Tänk på att den här handledningen inte presenterar ett arbetsflöde för att du ska följa när du bygger dina egna webbplatser. Avsikten är bara att göra dig medveten om några bra kostnadsfria verktyg som du kan använda för att påskynda skapandet av webbplatsmockups eller wireframes som senare kan utökas till fullblåsta webbplatser.
Med Griddle.It kan du hoppa över komplicerade CSS-ramar och snabbt bygga ett anpassat rutnät baserat på din egen CSS. Lorempixum hoppar sedan in och hjälper dig att fylla i dessa bildbrott tills du äntligen får de fotografier som din klient lovade att få dig för två veckor sedan. Slutligen ger typ-a-filen ett gäng praktiska förinställda textstilar som du snabbt kan implementera för att få all typografi på din sida att se pixel perfekt.
Lämna en kommentar nedan och låt oss veta om andra coola webbverktyg som du har stött på som gör ditt jobb bara lite enklare.