En styleguide, eller Style Guide, är en slags designdokumentation eller uppsättning standarder för hur komponenter på till exempel en webbplats ska se ut och fungera. Ibland kallas det för Pattern Library eller Component Library (komponentbibliotek). Syftet med en styleguide är att säkerställa ett konsekvent utseende och beteende. Exempel på komponenter kan vara rubriker, sidhuvud, sidfot, formulärfält, knappar, brödsmulor, varningsmeddelanden och så vidare. Innehållet kan variera beroende på om styleguiden är riktad bara till utvecklare eller även till designers eller redaktörer. Den kan då också innehålla exempelvis skrivregler och riktlinjer för tonalitet.

Exempel på hur en styleguide kan se ut.

En styleguide kan tas fram på olika sätt. Ett sätt är att använda sig av något typ av designprogram som Sketch eller Figma. För den som vill bygga upp en styleguide i Figma finns en bra guide för det på Prototypr.io. För oss på Metamatrix var det viktigt att vår styleguide är ett levande dokument som förändras i samma takt som webbplatsen gör det. Därför har vi valt att ta fram våra style guides i kod (HTML, CSS och JavaScript), så att styleguide och webbplats knyts tätare ihop.

Separerad från projektet

Länge arbetade vi med en styleguide som var separerad från det huvudsakliga webbprojektet. Vi byggde upp styleguidens komponenter med HTML och CSS och kunde sedan återanvända den koden för komponenterna i det aktuella webbprojektet. Eftersom vi hade som rutin att utveckla styleguiden innan, eller parallellt med, själva webblösningen så innebar det att vi sedan behövde flytta över koden från styleguiden till projektet, en uppgift som var tidskrävande eftersom vi behövde göra det manuellt. Även om det finns ett behov av styleguides så har det känts för ineffektivt att flytta över kod från ett projekt till ett annat. Vi har därför börjat diskutera andra lösningar. Går det att ha en styleguide för varje projekt men göra det mer automatiserat? Går det att bygga in styleguiden direkt i webbprojektet?

Extern tjänst som synkas med projektet

En potentiell lösning är att använda sig av en extern tjänst för att generera eller skapa styleguides som sedan kan synkas med webbprojektet. Exempel på sådana tjänster är  Frontify och sc5.io. Med Frontify går det att skapa en styleguide genom att i deras gränssnitt definiera komponenter som namnges och byggs upp med HTML, CSS och JavaScript. Det finns även funktioner för att kunna synka filer och kod från det egna webbprojektet till Frontify så att styleguiden kan uppdateras i takt med att webbprojektet gör det. Det kräver en konfiguration med Grunt eller Gulp men kan sedan utföras med ett kommando. Här är en video från Frontify som förklarar mer hur det går till. Att använda sig av exempelvis Frontify verkar smidigt på många sätt, nackdelen är att vi blir beroende av en extern tjänst och att det ändå krävs lite arbete för att hålla projektet och styleguiden synkade.

Integrerad i projektet

Vår senaste idé är att ha en styleguide i samma lösning som webbprojektet där styleguiden är en webbsida som går att nå i den lokala utvecklingsmiljön. Allt eftersom vi utvecklar olika webbkomponenter lägger vi in dem på webbsidan som då blir en lista av komponenter. Det är smidigt att all kod ligger i samma lösning med delad CSS så att styleguidens komponenter synkas automatiskt när ändringar görs i projektet. Vi håller just nu på att testa den lösningen i våra projekt och tycker att det är den metod som fungerat bäst för oss hittills. Har du tips, idéer eller tankar kring styleguides? Hör gärna av dig!