Het boek van de maand oktober is Handboek HTML5 en CSS3, 5de editie van Peter Doolaard. Deze maand bespreken we het boek, geven we op dit blog wat voorproefjes uit het boek. Dit is deel 1 uit een serie over het maken van een HSL-kleurenkiezer met HTML, CSS en wat JavaScript. Deel 2 uit deze serie vind je HIER, deel 3 HIER en deel 4 HIER. De site die bij het boek hoort vind je HIER. (H.F.)

Er bestaan allerlei hulpmiddelen om de CSS-code van een RGB- of HSL-kleur te bepalen, maar zelf iets bouwen is een perfect oefenproject. In een serie korte artikelen lees je hoe je zelf een kleurkiezer voor HSL maakt met HTML, CSS en een beetje JavaScript. Dit is deel 1: de interface (UI).

De kleurkiezer is gebaseerd op het HSL-kleurmodel en biedt daarom instelmogelijkheden voor hue (tint), saturation (verzadiging) en lightness (helderheid). Er is een vak waarin de gekozen kleur wordt getoond en er is een vak voor de CSS-kleurdeclaratie. De knop Kopieer zet de code op het klembord zodat je die in de CSS kunt plakken en de knop Herstel zet alles terug naar de beginwaarden. De helpknop rechtsboven opent een overlay met instructies.

Het ontwerp bestaat uit drie hoofdcomponenten:

• een header met de titel en de helpknop;
• de schuifregelaars en het kleurvlak;
• de controls: het codevak en de knoppen.

De overlay met de helptekst bekijken we later apart.

In HTML ziet de hoofdstructuur er zo uit:

[html]

<form>

<header>

<h1>HSL-kleurkiezer</h1>

<button class="help" id="btn-help" title="Help">?</button>
</header>

<main>
<input type="range" min="0" max="360" class="slider color" id="color-slider">
<input type="range" min="0" max="100" class="slider" id="saturat-slider">
<input type="range" min="0" max="100" class="slider" id="light-slider">

<div class="color-field" id="color-field"></div>

<div class="controls">
<input type="text" readonly id="color-value">
<button class="controls-btn" id="btn-copy-color-value">Kopieer</button>
<button type="reset" id="btn-reset">Herstel</button>
</div>

</main>
</form>

[/html]

De basisopmaak

We beginnen met wat algemene CSS. De box-sizing wordt voor alle elementen border-box, het lettertype wordt Segoe UI en de marges van body, h1 en h2 worden 0.

[css]
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
font-family: "Segoe UI", sans-serif;
margin: 0;
}
h1, h2 {
margin: 0;
}
[/css]

Op een mobiele telefoon mag de kleurkiezer de hele vensterbreedte gebruiken, maar op een groter scherm mag de interface niet breder worden dan 500px. Een form heeft standaard display: block en wordt daarom vanzelf zo breed als kan. We hoeven daarom alleen de breedte te beperken:

[css]
form {
max-width: 500px;
}
[/css]

De header

Het eerste onderdeel in het formulier is de header. Daarin staan de kop en de helpknop. Die moeten beide tegen de buitenkant worden uitgelijnd. Dat gaat eenvoudig en snel met flexbox en de eigenschap justify-content: space-between:

[css]
header {
  display: flex;
  justify-content: space-between;
}
[/css]

Flexbox plaatst standaard items in de rijrichting. Daarom komen de kop en knop naast elkaar. Alleen het vraagteken in de helpknop moet nog naar het midden en dat doet de flexeigenschap:

[css]
.help {
align-self: center;
}
[/css]

De sliders en vakken

De schuifregelaars en het kleurvak staan in main. Daar staat ook een div in met de klasse .controls en die bevat het tekstvak en de knoppen.

[css]
main {
display: flex;
flex-flow: column;
}
[/css]

Met deze CSS worden de flexitems in main onder elkaar gezet (flex-flow: column). Omdat in de kruisrichting items standaard worden uitgerekt (align-items: stretch) worden die items net zo breed als main. En main is net zo breed als form en dat is de vensterbreedte of maximaal 500px.

De controls

De div met daarin het tekstvak en de knoppen is ook een flexcontainer:

[css]
.controls {
display: flex;
flex-flow: wrap;
margin: 2px 0;
}
[/css]

De items worden in de regelrichting geplaatst (row is de standaard), maar als ze niet naast elkaar passen, mogen ze naar de volgende regel (wrap). Zo kunnen de onderdelen een redelijke grootte houden en toch in een smartphonevenster passen.

Flexitems kunnen standaard wel krimpen maar niet groeien. De volgende CSS zorgt ervoor dat alle items in .controls volledig flexibel worden.

[css]
.controls > * {
flex: 1 1 auto;
}
[/css]

Je kunt dit uitproberen door de ontwikkelaarshulpmiddelen te openen en de responsive-designmodus te activeren (Ctrl+Shift+M). Vergelijk je resultaat met het werkende voorbeeld.

Volgende aflevering

De hoofdstructuur van de app is klaar. Het kleurvak is nog wel onzichtbaar. Dat is namelijk nog een lege div, omdat de CSS daarvoor nog niet is geschreven. De onderdelen zullen altijd op de goede plek staan, welk formaat het venster ook heeft.

In deel 2 maken we de schuifregelaars voor de tint, de helderheid en de verzadiging, het kleurvak en controls: het tekstvak en de beide knoppen. Vooral voor de schuifregelaars (<span class="token tag"><span class="token punctuation"><</span>input <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>range<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>) zijn nog heel wat regels CSS nodig. Deze HTML5-elementen krijgen veel eigenschappen van de browser die voor de kleurkiezer in de weg zitten. Bovendien zijn die verschillend voor Chrome en Firefox.

Deel 2 van deze serie vind je HIER, deel 3 HIER en deel 4 HIER.

Peter Doolaard

Peter Doolaard is auteur van het Handboek HTML5 en CSS3. Dat geeft een behoorlijk compleet overzicht van wat HTML en CSS te bieden hebben. Hij werkt nu aan een nieuw boek: Websites bouwen met HTML, CSS en JavaScript. Een praktisch doe-boek, met vragen, opdrachten en projecten. En natuurlijk uitleg over HTML-elementen, CSS-eigenschappen en JavaScript-opdrachten. De komende tijd publiceert Computer Creatief artikelen die je een idee geven van wat je van het nieuwe boek kunt verwachten. Bekijk alle boeken van Peter.