Uno 4.x → Uno 5
Per component worden de breaking changes beschreven
Badges & labels
Badges en labels zijn samengevoegd. We behouden alleen .badge
. Wijzig daarom alle elementen met een
.label
class naar .badge
.
Tooltips & popovers
Het popover element verdwijnd en is samengevoegd met de Tooltip. We behouden alleen .tooltip
.
Wijzig daarom alle Popover componenten naar een Tooltip component.
Pagination
De volgorde van de html
elementen is aangepast vanwege een toegankelijkheidsprobleem. .pagination__item--previous
staat ook daadwerkerlijk als eerste in de hiërarchie (ipv als laatste). Zet voor een juiste werking van de paginering de HTML elementen
als volgt neer:
<nav aria-label="pagination">
<ul class="pagination">
<li class="pagination__item pagination__item--previous"><a href="#" class="pagination__link"><span>Vorige</span><span class="screenreader-only">pagina</span></a></li>
<li class="pagination__item pagination__item--first"><a href="#" class="pagination__link"><span class="screenreader-only">pagina</span>1</a></li>
<li class="pagination__item"><a href="#" class="pagination__link"><span class="screenreader-only">pagina </span>10</a></li>
<li class="pagination__item pagination__item--active"><span class="screenreader-only">U bevindt zich op pagina </span>12</li>
<li class="pagination__item"><a href="#" class="pagination__link"><span class="screenreader-only">pagina </span>14</a></li>
<li class="pagination__item pagination__item--last"><a class="pagination__link" href="#"><span class="screenreader-only">pagina </span>20</a></li>
<li class="pagination__item pagination__item--next"><a href="#" class="pagination__link"><span>Volgende</span><span class="screenreader-only">pagina</span></a></li>
</ul>
</nav>
Notification
De oude classes van het notification component zijn verwijderd. Vanaf nu kun je alleen de nieuwe notification gebruiken.
Lists
De niet langer gebruikte Alpha en Roman lijsten zijn verwijderd. Deze kunnen niet meer gebruikt worden.
Icons
Niet langer gebruikte iconen zijn verwijderd.
Buttons
Buttons die niet aan de BEM standaarden voldoen, werken vanaf deze versie niet meer. Update alle buttons naar de BEM standaarden volgens de voorbeelden bij het button component.
Uno 3.x → Uno 4
Per component worden de breaking changes beschreven
Javascript
De configuratie voor SystemJS is gewijzigd. Update de config naar:
System.config({
packages: {
'/': {defaultExtension: 'js'}
}
});
Fonts
De serif varianten van het Rijksoverheid fontworden niet meer meegeleverd met Uno.
Footer
De opmaak & structuur van de footer is gewijzigd. Daarnaast is er een nieuwe payoff geïntroduceerd.
- Onderwijs mogelijk maken → Ontwikkeling mogelijk maken
- nieuwe Engelse vertaling voor de payoff: Making development possible
- Het element
.payoff
verwijderen .footer__content
moet een.background--
modifier krijgen.- De payoff komt als eerste kolom in de footer:
<div class="col-xs-12 col-md-5 col-md-offset-1"> <span class="footer__header footer__header--title">Ontwikkeling mogelijk maken</span> </div>
- De andere kolommen hebben een titel dmv
<span class="footer__header">
- Eventuele navigatie plaats je in een
.list--links
met als extra class.footer__nav
Lijsten
De classnames van alle lijsten zijn gewijzigd. De BEM methodiek wordt nu strikter gevolgd, dus een base class
.list
met een modifier
- Alle ‘Uno’ lijsten krijgen de classname
.list
- Alle
<li>
binnen.list
→ class.list__item
toevoegen
Core
.decimal
→.list--decimal
.link-list
→.list--links
.link-list--chevrons
→.list--chevrons
.decimal--circled
→.list--decimal-circled
.
Nieuw Dit is een op zichzelf staande modifier. Dus niet combineren met.list--decimal
Bestanden
Bestanden kunnen nu ook zonder lijst gebruikt worden. In plaats van in een ul
/ li
kun je het bestand bijvoorbeeld in een div
plaatsen.
nieuw .file
is een losstaand component geworden.
.list-files
→.list.list--files
.list-files__file
→.file
.list-files__data
→.file__data
.list-files__filename
→.file__filename
.list-files__title
→.file__title
.list-files__icon
→.file__icon
.list-files__button
→.file__button
Timeline
.list-timelime
→.list.list--timeline
.list-timelime--compact
→.list.list--compact
.list-timeline--large
→.list.list--timeline.list--timeline-large
Link list
.link-list
→.list.list--links
.link-list--chevrons
→.list.list--links.list--chevrons
Notification list
.list-notification
→.list.list--notification
.list-notification__item
→.list__item
Filter list
De filter list is uit de core van uno verwijderd. Wanneer je Uno met de losse css files gebruikt, dien je
/components/list/filter.css
extra in te laden
nieuw Voor een filter met sluit knop de modifier .list--filter-closable
ook nog toevoegen.
.filter-list
→.list.list--filter
.filter-list--inline
→.list.list--filter.list--filter-inline
Subject list
.list-subject
→.list.list--subjects
.list-subject__link
→.list__link
.list-subject__description
→.list__description
In-page navigatie
De html structuur van in-page navigatie is gewijzigd.
- De blauwe achtergrond is verwijderd.
- De
.content
div krijgt een modifier.content--inpage-nav-header
- De
.content
div dient binnen een<div class="col-xs-12">
te staan - De lijst met pagina's heeft de classes
list list--decimal list--decimal-with-dot columns
- De footer nav staat in het
.content
element - De footer nav heeft de volgende structuur:
<div class="prev-next"> <a href="#" class="prev-next__prev"> <span class="prev-next__meta">VORIGE</span> <span class="prev-next__text">1. Wat moet je doen</span> </a> <a href="#" class="prev-next__next"> <span class="prev-next__meta">VOLGENDE</span> <span class="prev-next__text">3. Hoe het werkt</span> </a> </div>
Tabellen
Tabellen hebben nu standaard een witte achtergrond. .table--striped
voegt afwisselende
achtergronden toe, in plaats van strepen tussen de rijen. Voor alleen strepen is de class
.table
afdoende.