To maintain a consistent look-and-feel of the implementation, it’s needed to link to the correct styling and interaction libraries.
It’s the library’s responsibility to provide these files and the implementors responsibility to use them.
In the next section you can see an example of the minimum setup to get your started.
You can start with the following HTML output as a template which gives you the basic markup needed and all the proper references to styling and interactivity in order to start using components from this library.
All files (CSS and JavaScript) used in underneath example originate from the MDB framework and are therefor needed to kick-start your implementation.
<!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.0.0/materialdesignicons-webfont.6dab8170.woff2"
type="font/woff2"
crossorigin="anonymous">
<link rel="preload"
as="font"
href="%HOST%/v6.0.0/materialdesignicons-webfont.c803ff2e.woff"
type="font/woff"
crossorigin="anonymous">
<link rel="preload"
as="font"
href="%HOST%/v6.0.0/oranda_bold_bt.04c85cb2.woff2"
type="font/woff2"
crossorigin="anonymous">
<link rel="preload"
as="font"
href="%HOST%/v6.0.0/oranda_bold_bt.8e266873.woff"
type="font/woff"
crossorigin="anonymous">
<link rel="preload"
as="font"
href="%HOST%/v6.0.0/oranda_bt.bde3d05f.woff2"
type="font/woff2"
crossorigin="anonymous">
<link rel="preload"
as="font"
href="%HOST%/v6.0.0/oranda_bt.05235f9a.woff"
type="font/woff"
crossorigin="anonymous">
<!-- Start: Core styling -->
<!-- Bootstrap core CSS -->
<link rel="stylesheet"
href="%HOST%/v6.0.0/css/bootstrap.min.css"
integrity="sha512-bnCn1haQjQGPoq90nqpOWUiu9i60sex8WQI639yU2yElzx0pfG0hpaJrKuJTJD3bZ3lEUw+HRGEHrWm6TGsKSg=="
crossorigin="anonymous">
<!-- Material Design Bootstrap combined with custom Nijmegen styles -->
<link rel="stylesheet"
href="%HOST%/v6.0.0/nijmegen.css"
integrity="sha512-botTrmhHqzwxMOKHh5Z9CuWbhRTw1Cm0VuuAt++yFo1JiZo2ll/HOlvfRYsh5OH0BI7vpW5BS6ZhX1ucImVNVw=="
crossorigin="anonymous">
<!-- End: Core styling -->
<title>Titel van de pagina</title>
</head>
<body>
<main>
<!-- START: template component(s) -->
<!-- ... -->
<!-- END: template component(s) -->
</main>
<!-- Start: Core scripts -->
<!-- JQuery -->
<script src="%HOST%/v6.0.0/js/jquery.min.js"
integrity="sha512-pV9V1WiZq0QO8MrheyjVzI9bl2bR6bwaisa4k3aSS0dsGrDDJUl+tdRK9B9Ov47qI22Ho2kCJEuKPspUmUuHEQ=="
crossorigin="anonymous"></script>
<!-- Bootstrap tooltips -->
<script src="%HOST%/v6.0.0/js/popper.min.js"
integrity="sha512-lWJ53t3FjWFXcLO7CWRG8vJABfUOuSuMZspt8g2nDyx/ft/B+Zb5jBSjED4Qyze4tp2DqVECV9fHo3j1bzpChw=="
crossorigin="anonymous"></script>
<!-- Bootstrap core JavaScript -->
<script src="%HOST%/v6.0.0/js/bootstrap.min.js"
integrity="sha512-uIuDDliVdzuBgB2Ocut6cVdPSGZ6/my59sSOQlwnGi1qtuyyDVzj+8fr/HUr84mBlCs3zGBttci2JSALm8WMNg=="
crossorigin="anonymous"></script>
<!-- MDB core JavaScript -->
<script src="%HOST%/v6.0.0/js/mdb.min.js"
integrity="sha512-HTOV7Smd7fT2VtLuwZP+BQ4riX9YHbVMGJ22X1wMcHSNx4JIkE/1KS6ux4S78pdf8orN82idrE36YHccsaHnTA=="
crossorigin="anonymous"></script>
<!-- Nijmegen specific script -->
<script src="%HOST%/v6.0.0/nijmegen.js"
integrity="sha512-lfjiI2IukBfL745ERG22lr1oPwxtFjP8KG4wBk9PntChX3f/o/jSypcaw8vT+RePvmdhOvpwkHWVzM3xc4R/CQ=="
crossorigin="anonymous"></script>
<!-- End: Core scripts -->
<!-- Start: Additional component(s) script -->
<!-- ... -->
<!-- End: Additional component(s) script -->
</body>
</html>When you have above in place, you can start filling the blank spot between the template component(s) HTML comments. If you want to start with a grid for instance, you can have a look here MDB Grid and use one of the examples there to use in your own template.
By selecting a component you will see a preview window which will show the component’s look-and-feel. Underneath the component preview you’ll see the HTML tab in which you can copy the markup needed to use in your own template.
There are some components which have some complementary documentation which can be seen in the Notes tab, for instance: carousel, listing or select etc.
Several components (like: carousel, date picker or tooltips) specify additional JavaScript needed for the implementation. As seen in above example, the place to add additional JavaScript is just before the closing body tag and after the core scripts.
The component library has a few example templates which are listed here:
The preview page lists all components so that they can easily be viewed.
Please inform us when you started using the component library by sending an email to webmaster@irvn.nl. This way we are able to inform you as implementor about new developments regarding the library. We will not email you frequently and your emailaddress will only be used for the sole purpose of library developments.