Aan de slag met UX-componenten

Het Webplatform Vlaanderen wordt dé referentie voor alle Vlaamse overheidsorganisaties die hun digitale dienstverlening eenvoudiger, beter herkenbaar en optimaal toegankelijk willen maken voor hun klanten en voor de burgers. U vindt er alle technische bouwblokken, voorschriften en richtlijnen die voldoen aan de meest recente digitale en gebruikersstandaarden. Voor toepassingen en applicaties die Webplatform nog niet kan ondersteunen, kunt u gebruikmaken van de webcomponenten.

De webcomponenten worden dan ook beschouwd als een onderdeel van de totaaloplossing Webplatform, en kunnen enkel gebruikt worden indien u nu of in de nabije toekomst met uw informatieve communicatie instapt in Webplatform.

Indien u gebruik wilt maken van de webcomponenten, of bijkomende informatie wenst, kunt u contact opnemen met de servicedesk van Informatie Vlaanderen.

UX-componenten gebruiken

De UX-componenten bestaan uit html, css en javascript code. Ze zijn technologieneutraal en maken geen gebruik van javascipt libraries zoals jQuery. Daarmee bedoelen we dat u ze kunt integreren in uw bestaande frameworks of toepassingen. 

Om de UX-componenten te gebruiken, volgt u de volgende stappen: 

  • 1

    Leg link naar onze CSS en javascript

    Om te starten legt u een link naar onze assets (javascript, CSS en lettertypes) vanuit de html-templates van uw website, loket of webtoepassing.

    Deze assets bieden wij aan via een CDN (content delivery network). Daarmee willen we de uptime verzekeren en de caching optimaliseren.

  • 2

    Gebruik de paginatemplate en grid

    Om u te helpen een snelle start te kunnen maken, bieden wij een eenvoudige start-template aan waarin de link naar onze assets al werd gemaakt. Lees ook meer over Pagina's bouwen en structureren.

  • 3

    Kopieer de html van de UX-componenten

    In de UX-componentenbibliotheek vindt u alle beschikbare componenten. Kopieer de html van de componenten die u wilt gebruiken in uw website of toepassing.

Versiebeheer

We hechten veel belang aan het beheer en de versionering van onze UX-componenten.

Elke versie krijgt een versie-nummer van het formaat X.Y.Z.

  • X is de Major-versie
    Een major versie bevat incompatibele aanpassingen ten opzichte van de vorige versies.
  • Y is de Minor-versie
    Een minor versie bevat nieuwe of aangepaste functionaliteiten die backwards-compatible zijn.
  • Z is de Patch-versie
    Een Patch-versie bevat backwards-compatibele bugfixes. 

Ons versioneringsmechanisme is gebaseerd op http://semver.org. 

De structuur van de versies

De versies van de UX-componenten zijn als volgt gestructureerd

  1. De meest actuele backwards-compatible versie van een major versie dragen de naam '[versienummer].latest'

    Gebruikt u deze, dan beschikt u steeds over de nieuwste versie van de componenten. Bugfixes en updates zult u dan automatisch ontvangen. 
     
  2. Eerder gereleaste versies dragen een versienummer met drie cijfers, bijvoorbeeld 1.5.0.
     
    Deze versies worden niet meer aangepast. Blijkt zo'n versie nog een bug te bevatten, dan schakelt u over naar een hogere versie of naar een latest.

De meest actuele versies van de UX-componenten

Versie 3 is de nieuwste versie van de webcomponenten. Gebruik deze versie voor alle nieuwe projecten. Versie 2 wordt niet verder ontwikkeld, we zorgen wel nog voor bugfixes via patches.

Versie 3 van de webcomponenten

Alle gedetailleerde documentatie om van start vindt u op de documentatiesite van versie 3 van de webcomponenten:

Versie 3 van de webcomponenten verdelen wij alleen via een private NPM-repository. Neem contact op met de servicedesk van Informatie Vlaanderen.

 

Versie 2 van de webcomponenten

In het overzicht van de versies kunt u alle wijzigingen en toevoegingen in de componentenbibliotheek terugvinden. 

Dit zijn de meest actuele versies van de UX-componenten:

Voor de major release 2

Vanaf versie 2 is er een opsplitsing tussen corporate en default styling.

Latest
http://dij151upo6vad.cloudfront.net/2.latest/css/vlaanderen-ui.css
http://dij151upo6vad.cloudfront.net/2.latest/css/vlaanderen-ui-corporate.css

http://dij151upo6vad.cloudfront.net/2.latest/js/vlaanderen-ui.js
2.8.3 
http://dij151upo6vad.cloudfront.net/2.8.3/css/vlaanderen-ui.css
http://dij151upo6vad.cloudfront.net/2.8.3/css/vlaanderen-ui-corporate.css

http://dij151upo6vad.cloudfront.net/2.8.3/js/vlaanderen-ui.js

Versie 2.8 zal de laatste versie zijn voor release 2. Op deze release zullen alleen nog bugfixes gepatched worden (2.8.x).

Een verbeterde versie 3 is heel binnenkort (eind mei 2018) beschikbaar.

Voor de major release 1

Latest
http://dij151upo6vad.cloudfront.net/1.latest/css/vlaanderen-ui.css
http://dij151upo6vad.cloudfront.net/1.latest/js/vlaanderen-ui.js
1.6.3
http://dij151upo6vad.cloudfront.net/1.6.3/css/vlaanderen-ui.css
http://dij151upo6vad.cloudfront.net/1.6.3/js/vlaanderen-ui.js

Versie 1.6.3 is de laatste versie van deze release 1. Versie 1 wordt niet meer verder verder ontwikkeld, we raden u aan te migreren naar versie 2. Hiervoor is een migratiegids beschikbaar.

 

Browserondersteuning

De UX-componenten ondersteunen de meeste actuele versies van Chrome, FireFox en Safari, ongeacht het platform (Windows, Mac, Linux, iOS, Android). Internet Explorer is ondersteund vanaf IE9. Raadpleeg het gedetailleerde overzicht.

Deze keuze is gemaakt op basis van het gemeten browsergebruik op vlaanderen.be.

Oudere browsers die geen veiligheidsupdates meer krijgen, ondersteunen we niet. Dit betekent ook meer veiligheid voor de gebruiker.

Namespaced

Alle componenten zijn beschikbaar in een standaard versie en een namespaced versie.

Het verschil bij de namespaced versie is:

  • Zowel de CSS als de JS bestanden moeten als prefix voor hun naam 'namespaced-' hebben
  • Alle gewone CSS klassen zijn prefixed met 'vl-'
  • Alle js-CSS klassen zijn prefixed met 'js-vl-' ipv 'js-'
  • Alle data-attributen zijn prefixed met 'data-vl-' ipv 'data-'

Door het gebruik van de namespaced versie kunt u conflicten met andere libraries vermijden.