Configuratie

CSS

Er zijn er twee CSS-bestanden die je altijd moet inladen. Deze basis bevat onder andere de grid en kleuren, iconen en typografie.

<link rel="stylesheet" href="/node_modules/uno/dist/core/base.css">
<link rel="stylesheet" href="/node_modules/uno/dist/core/grid.css">

Uno bestaat uit losse componenten. Per component laad je bijbehorende CSS in. Deze vind je in de documentatie van het component.

JavaScript

Sommige componenten hebben JavaScript nodig. Dit staat per component beschreven in de documentatie. Om de JavaScript-bestanden te kunnen gebruiken is systemjs nodig.

<script src="/node_modules/systemjs/dist/system.js"></script>
<script>
    System.config({
        packages: {
        '/': {
            defaultExtension: 'js'
        }
    }
    });
<script>

Voor Internet Explorer is nog een polyfill nodig. Hiervoor gebruik je when.

<script src="/node_modules/when/es6-shim/Promise.min.js"></script>

Laad vervolgens het component in.

System.import('/node_modules/uno/dist/components/button/button.js').then(
    function (module) {
        /* Select all a.btn elements on the page */
        var buttons = document.querySelectorAll('a.btn');
        /* Initialize all 'fake' buttons */
        for (var i = 0; i < buttons.length; i++) {
            new module.Button(buttons.item(i));
        }
    }
});

Aan de functie System.import() geef je het pad naar het javascript bestand. De functie retourneert een promise met één parameter, module. Dit is een object met alle ingeladen componenten.