Migratiegids versie 1.x naar 2.x

Deze migratiegids geeft een overzicht van de belangrijkste verschillen tussen versie 1.x en 2.x van de componentenbibliotheek. Daarbij staat ook altijd een oplossing om de migratie zo vlot mogelijk te laten verlopen.

Algemeen

Vanaf versie 2.0 worden er 2 CSS bestanden gebruikt. De opsplitsing in 2 bestanden is bewust gedaan om stijl en functionaliteit te scheiden. (https://overheid.vlaanderen.be/webuniversum/aan-de-slag-met-ux-componenten)

De default CSS-file biedt de functionele opmaak van de componenten aan, dus de componenten in een 'naakte vorm'.

De andere CSS-file biedt de styling van de componenten volgens een vooraf gedefinieerd kleurenpalet.

Aanpassingen componenten

Volgende wijzigingen zijn niet backwards compatible.

Het oude (float-based) grid-systeem is volledig verwijderd

In de eerste versie van de componenten-bibliotheek werd een float-based grid-systeem gebruikt (notatie voorbeeld: .grid-item.grid-item--a-4). In versie 2.x maken we gebruik van een flexbox-based grid-systeem (notatie voorbeeld: .grid > .col--4-6). Het float-based grid-systeem is niet langer aanwezig in versie 2.x. Dit moet volledig vervangen worden door het nieuwe systeem.

Meer info: https://overheid.vlaanderen.be/webuniversum/alle-front-end-componenten#grid

News-item is vervangen door teaser

De component "news-item" (.news-item) bestaat niet langer. De teaser-component is uitgebreid en vervangt news-item volledig.

Meer info: https://overheid.vlaanderen.be/webuniversum/alle-front-end-componenten#teaser

Bekijk ook de news-slider om nieuwsberichten te tonen.

Meer info: https://overheid.vlaanderen.be/webuniversum/alle-front-end-componenten#news-slider

De list-style component is vervangen door de bullet-list

De component "list-style" is hernoemd naar "bullet-list".

Meer info: https://overheid.vlaanderen.be/webuniversum/alle-front-end-componenten#bullet-list

Spotlight-panel is deel geworden van de spotlight

Een spotlight-panel bestaat niet meer. De spotlight is uitgebreid en neemt alle functionaliteit van de spotlight-panel over.

Meer info: https://overheid.vlaanderen.be/webuniversum/alle-front-end-componenten#spotlight

De achtergrond-kleur van de doormat is gewijzigd

De doormat heeft vanaf nu een kleur die licht contrasteert met de region-kleur. Zo is de doormat in een region–alt wit, en in een gewone region grijs.

De --alt variant heeft een transparante achtergrond waardoor de doormat minder opvallend aanwezig is.

Meer info: https://overheid.vlaanderen.be/webuniversum/alle-front-end-componenten#doormat

De tabel-component is verwijderd

De oude component 'table' bestaat niet langer. De data-table bestaat nog wel.

Meer info: https://overheid.vlaanderen.be/webuniversum/alle-front-end-componenten#data-table

De tile-component is deel geworden van de doormat

De doormat component is uitgebreid waardoor de tile-component overbodig is geworden. De tile is vanaf versie 2.0 niet langer beschikbaar.

Gebruik een doormat zonder doormat__text voor de functionaliteit van de tile.

Meer info: https://overheid.vlaanderen.be/webuniversum/alle-front-end-componenten#doormat

De banner is hernoemd naar content-header

De naam banner voldeed niet langer om de functionaliteit van de component te beschrijven. Om verdere verwarring te voorkomen is de component hernoemd naar "content-header".

Meer info: https://overheid.vlaanderen.be/webuniversum/alle-front-end-componenten#headers-en-titels