Upgrade

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 maken → Ontwikkeling 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.