Wie meer dan een applicatie draait, heeft meer dan een keer dezelfde knop gebouwd. Iets later heeft hij drie knoppen die nog net niet hetzelfde zijn. Het antwoord is niet strenger opletten maar een gedeelde bron met een versienummer.
Een designsysteem lijkt een kwestie van smaak en is er vooral een van onderhoud. Zodra een knop, een tabel of een venster op een plek gedefinieerd staat, is een verandering aan de knop een verandering, en niet vijf. Een toegankelijkheidsfout die je herstelt, is overal hersteld. En wie erbij komt, hoeft niet te leren hoe dit project het doet, want elk project doet het zo.
De prijs ervan is dat je vooraf moet beslissen wat een component is en wat niet. Te vroeg beginnen levert een bibliotheek vol dingen op die een keer gebruikt worden. Te laat beginnen levert de drie knoppen op. In de praktijk komt een component pas in het systeem wanneer hij in twee projecten op dezelfde manier nodig bleek, en tot dan blijft hij gewoon in dat ene project staan.
Zes stukken tussen een huisstijl op papier en een scherm dat er in elke applicatie hetzelfde uitziet.
De gedeelde componenten van mijn Laravel-applicaties zitten in een composer-package: Blade-componenten plus een Tailwind-componentlaag. Een applicatie die hem binnenhaalt heeft meteen dezelfde knoppen, tabellen, velden, vensters en uitklapmenu's als de rest.
Kleur, ronding, schaduw, ruimte en letter staan als custom properties bovenaan. Een huisstijl aanpassen is dan die lijst herschrijven en niet driehonderd regels nalopen, en licht en donker zijn een tweede blok met dezelfde namen.
De voorkant van deze site draait op een stylesheet en een script die je rechtstreeks kan lezen. De uitrol synct enkel bestanden, dus alles moet werken zonder compilatie. Dat is een beperking die het ontwerp eenvoudiger houdt.
De publieke site en de afgeschermde omgeving hebben niet dezelfde eisen. De cloud draait op HansUI met Tailwind, de site op een eigen stylesheet, en ze delen de tokens en het woordmerk. Zo hoeft geen van beide zich te plooien naar het andere.
Blokken komen op wanneer ze in beeld schuiven, met een vertraging per kolom. Wie in zijn systeem heeft aangegeven minder beweging te willen, krijgt alles gewoon meteen te zien. Dat is een regel en geen schakelaar in een scherm.
Elk icoon staat inline in de opmaak in plaats van in een lettertype of een sprite. Het erft de kleur van de tekst eromheen, schaalt mee, en er komt geen extra verzoek bij het laden van een pagina.
Vijf regels, waarvan er twee me eerst een productiefout gekost hebben.
Kopieer je de css naar het volgende project, dan heb je na een half jaar twee huisstijlen die op elkaar lijken. Als package met een versienummer kan je bijwerken, terugdraaien en zien welke applicatie op welke versie zit. Dat is het hele verschil tussen een systeem en een gewoonte.
Tailwind scant je bestanden op klassenamen. Een naam die je in PHP of JavaScript in elkaar zet, ziet die scanner niet, en dan bestaat de klasse in productie niet. Het faalt stil, op een plek die je lokaal niet tegenkomt. Volledige namen uitschrijven, altijd.
Alles op een pagina lijnt uit op een verticale lijn: de balk, elke sectietitel, het sierwoord achter een kop. Dat klinkt als een detail en het is wat een pagina rustig maakt. Een element dat buiten de houder staat, rekent daarvoor vanaf de vensterrand en niet vanaf de tekstkolom.
Een pil met een woord erin, een opschrift in kapitalen boven een titel, een gekleurd vierkantje naast een lijstitem: het zijn drie manieren om iets te benoemen zonder het te zeggen. Een sectie begint gewoon met haar titel. Wat je wil benoemen, schrijf je.
Donker is niet licht met omgekeerde kleuren. Schaduwen werken anders, randen moeten harder, en een foto die in het licht goed staat kan in het donker gaan zweven. Vandaar dat de donkere variant zijn eigen waarden krijgt en niet een berekening op de lichte.
Herken je de drie knoppen die nog net niet hetzelfde zijn, dan is de eerste stap geen herontwerp maar een inventaris: wat staat er nu al twee keer, en welke daarvan verdient het om gedeeld te worden. Stuur gerust een bericht.
Wat er verder op Packagist staat vind je bij de Laravel packages, en hoe een applicatie eronder in elkaar zit bij maatwerk in Laravel.