Usage
Learn the basics in order to get started using Nile Dashboard

Your first page

Getting started with Nile Dashboard is very easy, the pages directory within the starter package contains an initial index.html page, that page contains the following source code:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Dashboard</title>
</head>
<body>
    <partial src="/layouts/layout-1.html">
        <!-- Place your components here -->
    </partial>
</body>
</html>

There are couple of things to note here:

  • Writing style and script tags is not required, frontal.js does that automatically for us based on the rules written within the frontal.config.js file at the root of the project.
  • the <partial> HTML tag is automatically replaced with the actual HTML of the layout that is passed within the src attribute, thanks to frontal.js' partials feature.
  • the source code of the layout can be found at pages/.partials/layouts/layout-1.html.

Working with Javascript

Most of the time you will need to write javascript code that initializes certain plugins, for example, ChartJS, datatables or even bootstrap's tooltips and popovers, Nile Dashboard provides a convenient place for you to write these init scripts within the starter directory at assets/js/app.js

The app.js file is automatically injected within all your HTML pages, and is powered by frontal.js which gives amazing ecma16 features, for example, you don't have to worry about loading certain scripts before others in order for you to use a certain library, lets take jQuery for example.

// assets/js/app.js
import $ from 'jquery';

$( function() {
  // ...
});

It is that simple, and Nile Dashboard will automatically inject your script in all pages.

Working with components

The starter package comes with essential components enabled by default, such as layouts, side navigation, side menus and so on... but, what if we wanted to enable a certain component, for example select2 or chart.js.

This is when frontal.config.js comes into play, this bundle configuration file, allows you to enable components for all, or some of your HTML pages.

Lets take a look at the contents of frontal.config.js and explain each part of it:

// frontal.config.js
module.exports = {
    // Nile Dashboard library configuration options, these options allows you
    // to enable or disable certain parts of the library.
    //
    // for example you can disable utilities all together.
    library: {
        options: {
            props: true,
            reboot: true,
            grid: true,
            helpers: true,
            utilities: true,
        }
    },

    // `bundles` property allows you to easily manage which assets and components
    // are loaded for which bundle in all pages or certain pages.
    bundles: {
        // `main` is the main bundle that is injected and loaded
        // within all your HTML pages
        main: {
            // `assets` is an array of individual javascript and style files to inject
            // within your HTML pages
            assets: [
                '@assets/js/app.js',
                '@assets/style/main.scss'
            ],

            // `components` is a key/value object of components to enable for your
            // HTML pages
            components: {
                // the following are the base components to get you started
                // you can enable more components as needed
                layout: true,
                navbar: true,
                sidenav: true,
                sidenavMenu: true,
                card: true,
                badge: true,
                button: true,
                form: true,

                // its now obvious that if we want to enable select2
                // we would do the following
                select2: true
            }
        },
    }
}

The previous configuration file is very simple, yet very powerful, it enables you to control which assets to load within your HTML pages and gives you the ability to control the entire library.

Since select2 is now enabled, we can do the following from our app.js file

// assets/js/app.js
import $ from 'jquery';

$( function() {
  $('.form-select2').select2();
});

Just like that, you have select2 enabled and ready for use, without bothering yourself with loading scripts with your pages.

Next Up

Learn how to build responsive layouts using reusable HTML partials.
Learn more about the build tool and how it boosts your development and how to prepare your final package for production.

{title}