Hur man lägger till anpassade rutnät till en webbplats i Chrome

click fraud protection

Apple kanske faller isär vad gäller både hårdvaru- och programvarudesign, men på sin topp lärde vi oss hur bra något ser ut om det är korrekt anpassat. Poängen är att när saker passar perfekt ser de bättre ut och detta gäller för industriell design och webbdesign. Webbplatsdesign skapas vanligtvis i Photoshop men det är inte att säga att designers och utvecklare inte tänker på utseendet på en webbplats i sin webbläsare. Det är ganska enkelt att tänka på; allt du behöver göra är att öppna webbutvecklingskonsolen som alla större webbläsare har och lägga till stoppning, ändra textfärg etc. En sak som alla dessa konsoler saknar är ett justeringsverktyg. Om Chrome är din föredragna webbläsare för utveckling, Baseliner är ett tillägg du måste prova. Det lägger till en serie horisontella linjer på skärmen. Du har full frihet att definiera avståndet mellan dessa linjer och deras färg. Dessutom låter verktyget dig lägga till anpassad polstring högst upp på en sida innan rutnätlinjerna.

Installera Baseliner och klicka på B-knappen som den lägger till bredvid adressfältet. En meny öppnas med alternativ för att anpassa ditt rutnät.

instagram viewer

Som standard är den övre stoppningen inställd på 0px, avståndet mellan raderna är inställt på 12px och raderna är gråfärgade med opacitet inställd till 100%. Om du vill ändra något av dessa värden klickar du in i rutan bredvid dem.

Färgrutan ger dig en vanlig färgväljare för att ändra färg på rutnätlinjerna. Avstånd, stoppning och opacitetsvärden kan ändras genom att ange ett anpassat nummer för varje parameter. Du kan alternativt använda upp / ner-pilarna för att öka eller minska värdet. När du har anpassat rutnätet klickar du på "Använd" längst ner.

baseliner

Hjälpbanden läggs bara till den aktuella sidan och inte till alla sidor du har öppnat i din webbläsare. För att ta bort raderna när du är klar klickar du bara på B-knappen igen och klickar på knappen 'Ta bort' längst ner.

Baseliner fungerar felfritt. Färgkontrollen för nätet och stoppningen överst gör bara förlängningen desto mer intelligent. Vi önskar bara att det stöds även vertikala linjer.

Installera Baseliner från Chrome Web Store

watch instagram story