Maak uw ontwerpsysteem, deel 3: kleuren

In dit artikel gaan we kijken hoe we een kleursysteem in CSS kunnen instellen en wat de best practices zijn om ervoor te zorgen dat het systeem eenvoudig te gebruiken en te onderhouden is.

Dit artikel maakt deel uit van een serie over ontwerpsystemen die zijn geïnspireerd op onze bibliotheek met webcomponenten. De bibliotheek vertrouwt op een solide systeem van CSS-globals. Dus dit zijn wij die de dingen delen die we hebben geleerd om de wereldwijde stijl van onze bibliotheek te bepalen!

Artikelreeks:
- Deel 1: Typografie
- Deel 2: Raster en lay-out
- Deel 3: kleuren
- Deel 4: Afstand
- Deel 5: Pictogrammen
- Deel 6: Knoppen

We hebben de Color Editor gelanceerd! Een webontwerptool die kleurenpaletten en thema's genereert die compatibel zijn met het CodyHouse Framework.

Kleurvariabelen 101

In tegenstelling tot andere CSS-globals gaat het bij het maken van een kleursysteem om 10% om codering en om 90% om semantiek. Terwijl u aan uw _colors.scss-bestand werkt, wilt u rekening houden met de volgende doelen:

  1. De kleurvariabelen moeten gemakkelijk te onthouden zijn → U wilt het globale bestand niet altijd controleren als u een kleur moet kiezen.
  2. Het systeem moet gemakkelijk kunnen worden bijgewerkt → U zult kleuren toevoegen, verwijderen en hernoemen. Zorg ervoor dat dit niet ingewikkeld is.
  3. Het systeem moet alleen de essentiële kleuren bevatten → we hebben deze zo vaak gehoord ... maar we eindigen altijd met meer kleuren dan we nodig hebben! De echte successleutel van een ontwerpsysteem is alles verwijderen wat niet nodig is (kleuren inbegrepen).

Semantische versus verklarende kleuren

Als het gaat om het instellen van de kleurvariabelen, zijn er twee hoofdbenaderingen: semantische en declaratieve kleuren.

De semantische aanpak ziet eruit als:

Hier is een voorbeeld van een declaratieve benadering:

Geen van beiden is verkeerd. Het kiezen van degene die aan uw behoeften voldoet, hangt van zoveel factoren af ​​(bijv. Projectgrootte, relevantie van merkkleuren, enz.).

Terwijl ik aan het _colors.scss bestand van ons framework werkte, moest ik er rekening mee houden dat gebruikers het gingen bewerken (100%). Dat betekent dat zelfs als de declaratieve benadering het gemakkelijkst te gebruiken was, ik het moest combineren met de semantische benadering om een ​​systeem te krijgen dat ook gemakkelijk te onderhouden was.

Het essentiële kleurenpalet

Stap nummer één was het minimale aantal kleuren aangeven dat nodig was om de webcomponenten te maken. Over het algemeen bestaat het essentiële kleurenpalet uit:

  1. De hoofd- / primaire kleur → die wordt gebruikt voor de koppelingen, de achtergrondkleur van de knop, enzovoort. Over het algemeen is dit de belangrijkste call-to-action-kleur.
  2. De accentkleur → die wordt gebruikt om iets belangrijks op de pagina te markeren. Het zou geen variatie op de primaire kleur moeten zijn, maar een complementaire kleur.
  3. Een schaal met neutrale kleuren → Het is meestal een schaal met grijstinten, te gebruiken voor tekstelementen, subtiele elementen, randen, enz.
  4. Feedbackkleuren → succes, fout, waarschuwing.

Sommige van deze kleuren hebben een variatie nodig (donkerdere / lichtere versie), vaak gebruikt om interactiviteit te markeren (bijvoorbeeld: hover /: actieve toestanden).

In CSS betekent dit:

* opmerking: we gebruiken de plug-in postcss-color-mod-function om de kleurfuncties te vertalen in RGBA-code die compatibel is met alle browsers.

Het bovenstaande fragment geeft het kleurenpalet weer: alle kleuren die in het project worden gebruikt.

De variaties van de primaire en accentkleuren worden gegenereerd met behulp van kleurfuncties. Deze aanpak is handig als u een demo.html-bestand hebt (en dat doen we in ons framework) zodat u de waarden van de functies kunt aanpassen totdat u tevreden bent met de verkregen kleuren. De tinten (of neutrale) kleuren worden gegenereerd met behulp van chroma.js. In dit geval was het gebruik van de functies niet ideaal, omdat u over het algemeen twee tegengestelde kleuren (zwart en wit) hebt en u een waardenschaal moet genereren op basis van deze twee kleuren.

Semantische kleuren toevoegen aan de mix

Zodra het kleurenpalet gereed is, kunnen we semantische kleuren toevoegen. Het creëren van semantische kleuren betekent niet dat het aantal kleuren moet worden verhoogd, maar dat de kleuren moeten worden verdeeld met behulp van semantische verwijzingen.

Waarom ik denk dat dit een goede aanpak is

Allereerst vertrouwt dit systeem op twee essentiële kleuren: primaire en accentkleuren. Dat betekent dat wanneer u de kleurvariabelen moet gebruiken, het voor u niet moeilijk zal zijn om te onthouden wat die variabelen vertegenwoordigen (zelfs als u geen verklarende namen gebruikt zoals "blauw" en "rood").

Uw systeem moet mogelijk meer kleuren bevatten (bijvoorbeeld een secundaire kleur). Je hebt nog steeds te maken met slechts drie kleuren. Het beheren van een systeem op basis van meer dan 10 hoofdkleuren zou moeilijk zijn, ongeacht de aanpak die u gebruikt, dus u kunt overwegen om het te vereenvoudigen.

De grijswaardenkleuren gebruiken een andere naamgevingsconventie: hoe hoger het getal aan het einde van de variabele, hoe donkerder de kleur.
Deze aanpak wordt handig wanneer u niet zeker weet welke neutrale kleur u wilt toepassen. Als grijs-2 te subtiel lijkt, kunt u grijs-3 proberen. Je hebt misschien gemerkt dat sommige tinten ontbreken (bijvoorbeeld grijs-5). Ze waren in ons geval niet essentieel (we hebben ze nooit gebruikt tijdens het maken van de webcomponenten), dus hebben we ze uit het kleurenpalet verwijderd.

Semantische kleuren zijn aan de mix toegevoegd om drie hoofdredenen:

  1. Het bestand _colors.scss wordt de bron van de waarheid wanneer u een kleur moet wijzigen. Vindt u dat de tekstkopelementen donkerder moeten zijn? Open het bestand _colors.scss en bewerk de variabele color-text-header.
  2. Als u bijvoorbeeld een kleurrand definieert, hoeft u de volgende keer dat u een randelement maakt niet op te zoeken welke grijze kleur u in andere componenten hebt gebruikt. Hetzelfde concept is van toepassing op veel elementen, niet alleen grenzen.
  3. Het maakt het een fluitje van een cent om verschillende thema's te maken en te onderhouden.

Theming

Zodra we CSS-variabelen kunnen gebruiken zonder afhankelijk te zijn van plug-ins of polyfill, is het maken van kleurenthema's super eenvoudig *! Betekent dit dat we vandaag geen thema's kunnen maken? Nee, dat kunnen we. We hebben twee opties.

* in ons kader gebruiken we de plug-in postcss-css-variables om CSS-variabelen te compileren. Het biedt momenteel geen ondersteuning voor het bijwerken van variabelen in een CSS-klasse.

Optie 1 is toch CSS-variabelen bijwerken. Browsers die geen variabelen ondersteunen, tonen het "standaard" kleurenthema. Dit is geen probleem, zolang de inhoud toegankelijk is.

U hebt bijvoorbeeld een standaardkleurthema → witte achtergrond en zwarte tekstkleur en een .theme-donkere → zwarte achtergrond en witte tekstkleur. Vervolgens maakt u twee componenten, één met het standaardthema, de andere met het .dark-thema. Als beide componenten met het standaardthema geen invloed hebben op de gebruikerservaring, kunt u het .dark-thema als een verbetering beschouwen (optioneel). In dit geval is het zinvol om de variabelen bij te werken om verschillende thema's te maken, zelfs als ze niet overal worden ondersteund.

Dit is hoe je een nieuw thema maakt door enkele belangrijke CSS-variabelen bij te werken:

Ik ben dol op deze oplossing omdat deze de kleurcorrectie abstract maakt en je je kleurenthema's in één bestand kunt bewaren. Door dit te doen, kunnen we mogelijk de status van elk onderdeel (van thema-a naar thema-b) wijzigen door een CSS-klasse toe te passen.

Optie 2 zou zich richten op alle elementen waarvan het uiterlijk door het thema wordt beïnvloed. Het voordeel van deze methode is dat deze door alle browsers wordt ondersteund. Het is echter niet zo eenvoudig te onderhouden in vergelijking met die volledig gebaseerd op CSS-variabelen.

Hier is een voorbeeld van optie 2 in actie:

Nu weet je hoe we van plan zijn om met kleuren in ons kader om te gaan! Als u feedback / suggesties heeft, laat het ons weten in de reactie!

Ik hoop dat je het artikel leuk vond! Volg ons voor meer informatie over webdesign op Medium of Twitter.