Upgrade

Een nieuwe major release gaat gepaard met enkele breaking changes

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 font worden niet meer meegeleverd met Uno.

Footer

De opmaak & structuur van de footer is gewijzigd. Daarnaast is er een nieuwe payoff geïntroduceerd.

  • Onderwijs mogelijk makenOntwikkeling mogelijk maken
  • nieuw 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
  • .lower-roman.list--lower-roman
  • .upper-roman.list--upper-roman
  • .lower-alpha.list--lower-alpha
  • .upper-alpha.list--upper-alpha
  • .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.