Core

De core van uno bestaat uit een minimale set van componenten en basic styling. Iedereen die de library gebruikt moet minimaal de core inladen.

Core bestanden

CSS

Wanneer er gebruik wordt gemaakt van de losse css bestanden, dan dienen de volgende css bestanden te worden ingeladen:

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

De samengevoegde CSS bestaat uit één bestand, uno.css, deze bevat ook alle componenten:

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

Javascript (non-angular)

Bepaalde componenten hebben javascript nodig om correct te kunnen functioneren, hiervoor is naast de javascript file voor het component ook een third-party library benodigd, systemJS. Voor internet explorer is nog een polyfill nodig, welke door when geleverd wordt

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

Na het inladen van systemJS kunnen de componenten (modules) worden ingeladen:

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. In dit voorbeeld staat het button component in zijn eigen bestand, maar alle componenten kunnen samengevoegd worden in één bestand. De functie retourneert een promise, de promise bevat één parameter, module. Dit is een object met alle ingeladen modules / componenten. In dit voorbeeld bevat module alleen de Button class.