Nijmegen Component Library
You are viewing version 6.4.1 of the library, the latest version is

NL Design System

Intro

Lorem ipsum

Why

Lorem ipsum

How to use

We encourage you to use the NLDS components instead of the MD Bootstrap components. Not all components are allready available in NLD and our MD Bootstrap components have active implementatations so you can use both design components side by side. You can start your implementation by loading the following files.

Type Url Integrity hash
stylesheet %HOST%/v6.4.1/nijmegen-nlds.min.css sha512-FNvacNmESXvHiby0EUeftZtpbngCZQe2/gvHeWiVFsAHpSUO8/FVKpXwMO2WUzoHQ2KmOU9GRDYAgaExjvyLxg==

The Nijmegen NLDS components styles will only be applied inside the nijmegen-theme class, for example the button:

<div class="nijmegen-theme">
      <button class="utrecht-button" type="button">Button</button>
</div>

Best practice to use the NLDS Nijmegen theme is to apply the nijmegen-theme class on the body element as stated in the example below.

Example use NLDS and MD Bootstrap components

<!doctype html>
<html lang="nl">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">

    <!-- Preload fonts and external styles -->
    <link rel="preload" 
          as="style"
          href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,600,700&display=swap">
    <link rel="preconnect" 
          href="https://fonts.gstatic.com/" 
          crossorigin="anonymous">
    <link rel="preload" 
          as="font" 
          href="%HOST%/v6.4.1/materialdesignicons-webfont.6dab8170.woff2" 
          type="font/woff2"
          crossorigin="anonymous">
    <link rel="preload" 
          as="font" 
          href="%HOST%/v6.4.1/materialdesignicons-webfont.c803ff2e.woff" 
          type="font/woff"
          crossorigin="anonymous">
    <link rel="preload" 
          as="font" 
          href="%HOST%/v6.4.1/oranda_bold_bt.04c85cb2.woff2" 
          type="font/woff2"
          crossorigin="anonymous">
    <link rel="preload" 
          as="font" 
          href="%HOST%/v6.4.1/oranda_bold_bt.8e266873.woff" 
          type="font/woff"
          crossorigin="anonymous">
    <link rel="preload" 
          as="font" 
          href="%HOST%/v6.4.1/oranda_bt.bde3d05f.woff2" 
          type="font/woff2"
          crossorigin="anonymous">
    <link rel="preload" 
          as="font" 
          href="%HOST%/v6.4.1/oranda_bt.05235f9a.woff" 
          type="font/woff"
          crossorigin="anonymous">

    <!-- Start: Core styling -->
    <!-- Bootstrap core CSS -->
    <link rel="stylesheet" 
          href="%HOST%/v6.4.1/css/bootstrap.min.css"
          integrity="sha512-bnCn1haQjQGPoq90nqpOWUiu9i60sex8WQI639yU2yElzx0pfG0hpaJrKuJTJD3bZ3lEUw+HRGEHrWm6TGsKSg=="
          crossorigin="anonymous">
    <!-- Material Design Bootstrap combined with custom Nijmegen styles -->
    <link rel="stylesheet" 
          href="%HOST%/v6.4.1/nijmegen.css"
          integrity="sha512-XkgD7+5bJSUmxFIMBACRhbVQ/KXL7IagmwYHkbNEwDAMKs0FlbXPAKhBugz/cjBYLpz94OOXeoxudWWh5u2qKw=="
          crossorigin="anonymous">
    <!-- End: Core styling -->

    <!-- Start: NLDS styling -->
    <link rel="stylesheet" 
        href="%HOST%/v6.4.1/nijmegen-nlds.min.css"
        integrity="sha512-FNvacNmESXvHiby0EUeftZtpbngCZQe2/gvHeWiVFsAHpSUO8/FVKpXwMO2WUzoHQ2KmOU9GRDYAgaExjvyLxg=="
        crossorigin="anonymous">
    <!-- End: NLDS styling -->

    <title>Titel van de pagina</title>
</head>
<body class="nijmegen-theme">

<main>
    <!-- START: MD Bootstrap component(s) -->
        <!-- ... -->
    <!-- END: MD Bootstrap component(s) -->

    <!-- START: NLDS Nijmegen theme -->
    <!-- ... -->
    <!-- END: NLDS Nijmegen theme -->
</main>

<!-- Start: Core scripts -->

<!-- JQuery -->
<script src="%HOST%/v6.4.1/js/jquery.min.js"
        integrity="sha512-pV9V1WiZq0QO8MrheyjVzI9bl2bR6bwaisa4k3aSS0dsGrDDJUl+tdRK9B9Ov47qI22Ho2kCJEuKPspUmUuHEQ=="
        crossorigin="anonymous"></script>

<!-- Bootstrap tooltips -->
<script src="%HOST%/v6.4.1/js/popper.min.js"
        integrity="sha512-lWJ53t3FjWFXcLO7CWRG8vJABfUOuSuMZspt8g2nDyx/ft/B+Zb5jBSjED4Qyze4tp2DqVECV9fHo3j1bzpChw=="
        crossorigin="anonymous"></script>

<!-- Bootstrap core JavaScript -->
<script src="%HOST%/v6.4.1/js/bootstrap.min.js"
        integrity="sha512-uIuDDliVdzuBgB2Ocut6cVdPSGZ6/my59sSOQlwnGi1qtuyyDVzj+8fr/HUr84mBlCs3zGBttci2JSALm8WMNg=="
        crossorigin="anonymous"></script>

<!-- MDB core JavaScript -->
<script src="%HOST%/v6.4.1/js/mdb.min.js"
        integrity="sha512-H56F+Qof8I/t0pk5+LOVy7qxPSZ6pIIpWMIKeEJubSU/YS1oRFamgnVw5bs9qx4MoZiE2NobFJBZSeLHhSPKRg=="
        crossorigin="anonymous"></script>

<!-- Nijmegen specific script -->
<script src="%HOST%/v6.4.1/nijmegen.js"
        integrity="sha512-y0gUuZrCRPP/3ZWOZAhB1O9JX7kdSXt+PcPkDdlvyLBsfim4d0EVHdkUsu4+TfIEnd0npvAahtg1u3dcbqGYRw=="
        crossorigin="anonymous"></script>

<!-- End: Core scripts -->
<!-- Start: Additional component(s) script -->
<!-- ... -->
<!-- End: Additional component(s) script -->
</body>
</html>

Roadmap

The development and implementation of NLDS components is active at the moment. The current progress can be found in the corresponding Github project. In the long termn the NLDS components will replace all MD Bootstrap components.