N-Arkalite | HTML Bootstrap 4 Template

Getting Started

Welcome

Thank you for purchasing N-Arkalite Responsive Bootstrap 4 Dashboard Admin Template . If you have any questions that are beyond the scope of this help file, please feel free to post a comment on item page. If you are happy with the theme, please take a moment to rate it from your downloads page. Thank you so much!

Features

This theme based on Boostrap 4 framework grid. It's ULTRA RESPONSIVE!!. Suitable for your dashboard or admin page. It supports mobile screen, tablet screen, medium screen and large screen

  • Integrated with the latest Bootstrap Version 4
  • Support Syntactically Awesome Style Sheets (SASS)

Installation

Required scripts, please note that order matters: 
<script src="js/lib/jquery.min.js"></script>
<script src="js/lib/bootstrap.min.js"></script>    
<script src="js/lib/jquery.nicescroll.js"></script>
<script src="js/ncms.min.js"></script>
Required stylesheets, please note that order matters: 
<link rel="stylesheet" href="styles/lib/bootstrap.min.css">
<link rel="stylesheet" href="styles/ncms.min.css">
Extended stylesheets, this file includes some additional pages such as site configuration and chart. 
<link rel="stylesheet" href="styles/site.min.css">
Material icons and glyphicons are already included. For others supported Icons here are the list :
  1. Font Awesome
  2. Icomoon
  3. Foundation Icon
  4. Ionicons

Development

Installation

If you are interested to customize this theme you can start to develop by following these steps.

  1. Install Ruby, you can download ruby here
  2. Install SASS, you can download SASS here
  3. Install NodeJS, you can download NodeJS here
  4. After install NodeJS you can use Node Package Module (NPM) in your machine. NPM is bundled when you install NodeJS. After you have NPM in your machine you can install bower by executing this command 
    $ npm install -g bower
  5. After that you can install grunt by executing this command 
    npm install -g grunt-cli
  6. Go to your theme folder (in my case it will be put on D:\works\N-CMS\n-cms-theme) and then execute this command to install packages needed by this theme 
    npm install
  7. Still in your theme folder, execute this command to install web module packages needed by this theme 
    bower install
  8. Last step is to run grunt in your theme folder by execute this command 
    grunt build

Customization

If you want to make your sidebar opened you can place these two following class to your element. expanded on div which has sidebar class like this 

<div class="sidebar expanded">
and add sidebar-expanded on your body element so it will be like this 
<body class="sidebar-expanded">

Bootstrap Utility

We encouraged you to use Bootstrap Utilities if you want to make some customization. Bootstrap includes dozens of utilities—classes with a single purpose to reduce the frequency of highly repetitive declarations. It will helps you to custom your theme without changing css core too much.

We provided some examples how to use it, although we recommended you to go directly to Bootstrap Utilities page to understand it more clearly

  • Border
    • <img src="..." alt="..." class="rounded">
<img src="..." alt="..." class="rounded-top">
<img src="..." alt="..." class="rounded-right">
<img src="..." alt="..." class="rounded-bottom">
<img src="..." alt="..." class="rounded-left">
<img src="..." alt="..." class="rounded-circle">
  • Width and height
    • Easily make an element as wide or as tall as its parent using the .w-100 and .h-100 utility classes. 
    <img class="w-100" src="..." alt="Width = 100%">
  • Spacing

    • Assign margin or padding to an element or a subset of its sides with shorthand classes. Includes support for individual properties, all properties, and vertical and horizontal properties. All classes are multiples on the global default value, 1rem.

    The classes are named using the format: {property}{sides}-{size}

    Where property is one of:

    • m - for classes that set margin
    • p - for classes that set padding

    Where sides is one of:

    • t - for classes that set margin-top or padding-top
    • b - for classes that set margin-bottom or padding-bottom
    • l - for classes that set margin-left or padding-left
    • r - for classes that set margin-right or padding-right
    • x - for classes that set both *-left and *-right
    • y - for classes that set both *-top and *-bottom
    • a - for classes that set a margin or padding on all 4 sides of the element

    Where size is one of:

    • 0 - for classes that eliminate the margin or padding by setting it to 0
    • 1 - (by default) for classes that set the margin or padding to $spacer-x or $spacer-y
    • 2 - (by default) for classes that set the margin or padding to $spacer-x * 1.5 or $spacer-y * 1.5
    • 3 - (by default) for classes that set the margin or padding to $spacer-x * 3 or $spacer-y * 3

    (You can add more sizes by adding entries to the $spacers Sass map variable.)

    Here are some representative examples of these classes:

    .mt-0 {
  margin-top: 0 !important;
}

.ml-1 {
  margin-left: $spacer-x !important;
}

.px-2 {
  padding-left: ($spacer-x * 1.5) !important;
  padding-right: ($spacer-x * 1.5) !important;
}

.p-3 {
  padding: ($spacer-y * 3) ($spacer-x * 3) !important;
}

Please visit Bootstrap Utilities for more information.

Timeline Page

We provide a timeline page, this is an example how you can use it : 


<div class="timeline-group">
    <h3 class="timeline-year">2015</h3>
    <div class="timeline-item">
        <div class="timeline-icon"><i class="material-icons">description</i>
        </div>
        <h4 class="timeline-date">December 24 | 12.51 PM</h4>
        <div class="card">
            <div class="card-header">
                <div class="media">
                    <div class="media-left">
                        <a href="#">
                            <img class="media-object rounded-circle" src="/img/avatar.jpg" alt="Generic placeholder image" style="width:40px;height:40px;">
                        </a>
                    </div>
                    <div class="media-body">
                        <h4 class="media-heading title-timeline-author">Amara Nisa</h4><span class="title-timeline-type text-muted">posted a new blog</span>
                        <div class="float-md-right card-header-location">
                            <i class="material-icons text-muted title-timeline-location">location_on</i>
                            <a href="#" class="text-muted title-timeline-location">Merseyside</a>
                        </div>
                        <small class="text-muted title-timeline-active">Active 7 mins ago</small>

                    </div>
                </div>
            </div>
            <img src="img/pict11.jpg" alt="" class="mb-1 w-100" />
            <div class="card-block">
                <h4 class="card-title">Office Annual Meeting</h4>
                <div class="card-text">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </div>
                <a href="#" class="float-xs-right mt-1">Read More</a>
            </div>
            <div class="card-footer">
                <ul class="list-inline timeline-meta-link mt-1 text-muted">
                    <li class="list-inline-item"><i class="icon ion-heart timeline-footer-link"></i><a href="#" class="text-muted timeline-footer-link"> 3465</a>
                    </li>
                    <li class="list-inline-item"><i class="icon ion-eye timeline-footer-link"></i><a href="#" class="text-muted timeline-footer-link"> 4476</a>
                    </li>
                    <li class="list-inline-item"><i class="fa fa-user timeline-footer-link" aria-hidden="true"></i><a href="#" class="text-muted timeline-footer-link"> Admin</a>
                    </li>
                    <li class="list-inline-item"><i class="icon ion-edit timeline-footer-link"></i><a href="#" class="text-muted timeline-footer-link"> Edit</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

Cards

We provided a lot of cards you can use
  • Statistic Success Card
    • <div class="card statistic-card success">
  <div class="card-block">
    <i class="material-icons">monetization_on</i>
    <div class="stats-counter">
      <h1 class="count-number">21.5M $</h1>
      <p>Profit</p>
    </div>
  </div>
</div>
  • Statistic Purple Card
    • <div class="card statistic-card purple">
  <div class="card-block">
    <i class="material-icons">shopping_cart</i>
    <div class="stats-counter">
      <h1 class="count-number">152</h1>
      <p>New Order</p>
    </div>
  </div>
</div>
  • Statistic Warning Card
    • <div class="card statistic-card warning">
  <div class="card-block">
    <i class="material-icons">show_chart</i>
    <div class="stats-counter">
      <h1 class="count-number">9623</h1>
      <p>Sales</p>
    </div>
  </div>
</div>
  • Statistic Danger Card
    • <div class="card statistic-card danger">
  <div class="card-block">
    <i class="material-icons">feedback</i>
    <div class="stats-counter">
      <h1 class="count-number">368</h1>
      <p>New Feedback</p>
    </div>
  </div>
</div>
  • Reverse Card
    • you can also add .reverse class combined with color you want such as .card-warning if you want to reverse the content. 
    <div class="card statistic-card reverse card-warning">
    <div class="card-block">
        <div class="stats-counter">
            <h2 class="count-number">368</h2>
            <p>New Feedback</p>
        </div>
        <i class="material-icons">feedback</i>
    </div>
</div>
  • Reminder Card
    • <div class="card reminder">
    <div class="card-header no-border-bottom">
        <h4 class="card-title">Reminder</h4>
        <div class="bookmark-icon"></div>
    </div>
    <div class="card-block">
        <p>
            Pick the day. Enjoy it - to the hilt. The day as it comes. People as they come... The past, I think, has helped me appreciate the present, and I don't want to spoil any of it by fretting about the future.
        </p>
    </div>
</div>
  • Card With Header
    • You can also add header on your card by adding .card-header to your header element. 

    <div class="card tasks-card">
    <div class="card-header">
        <h4>Tasks</h4>
    </div>
    <div class="card-block">
        <ul class="list-unstyled mb-0 v-scroll" style="overflow-y: hidden; outline: none;" tabindex="5001">
            <li class="mb-2">
                <div class="media">
                    <label class="custom-control custom-checkbox media-left">
                        <input type="checkbox" checked="checked" class="custom-control-input">
                        <span class="custom-control-indicator"></span>
                    </label>
                    <div class="media-body">
                        <h5>Schedule Meeting</h5> Opportunity for new customers
                    </div>
                </div>
            </li>
            <li class="mb-2">
                <div class="media">
                    <label class="custom-control custom-checkbox media-left">
                        <input type="checkbox" checked="checked" class="custom-control-input">
                        <span class="custom-control-indicator"></span>
                    </label>
                    <div class="media-body">
                        <h5>Upload files to servers</h5> Files must be shared to all board members
                    </div>
                </div>
            </li>
            <li class="mb-2">
                <div class="media">
                    <label class="custom-control custom-checkbox media-left">
                        <input type="checkbox" class="custom-control-input">
                        <span class="custom-control-indicator"></span>
                    </label>
                    <div class="media-body">
                        <h5>Monthly sales report</h5> As soon as possible
                    </div>
                </div>
            </li>
            <li class="mb-2">
                <div class="media">
                    <label class="custom-control custom-checkbox media-left">
                        <input type="checkbox" class="custom-control-input">
                        <span class="custom-control-indicator"></span>
                    </label>
                    <div class="media-body">
                        <h5>Career applicants</h5> Review and forward career aplications
                    </div>
                </div>
            </li>
            <li>
                <div class="media">
                    <label class="custom-control custom-checkbox media-left">
                        <input type="checkbox" class="custom-control-input">
                        <span class="custom-control-indicator"></span>
                    </label>
                    <div class="media-body">
                        <h5>Quarter 3 Reports</h5> Send Q3 Reports to CEO
                    </div>
                </div>
            </li>
        </ul>
    </div>
</div>
  • Card With Image Inside Header and Additional Information on Footer
    • To insert image into your card you need to insert your img tag inside .card-header element. You also can add additional information inside yout footer on your card by adding .card-footer to your card element. 

    <div class="card">
    <div class="card-header">
        <div class="media">
            <div class="media-left">
                <a href="#">
                    <img class="media-object rounded-circle" src="/img/nadya-avatar.jpg" alt="Generic placeholder image" style="width:40px;height:40px;">
                </a>
            </div>
            <div class="media-body">
                <h5 class="media-heading">Nadya Nainggolan</h5>
                <small class="text-muted">3 days ago - 23 min</small>
            </div>
        </div>
    </div>
    <img class="card-img-top mt-1" src="/img/women-in-office.jpg" alt="Card image cap">
    <div class="card-block">
        <h4 class="card-title">Work In Office</h4>
        <div class="card-text">
            When these remote personalities work remotely they’re very happy. 43% of them say they love their job. But when remote personalities have to go work . . .                                        
        </div>
    </div>
    <div class="card-footer">
        <i class="material-icons">location_on</i> <a href="#" class="text-muted">San Fransisco</a>
    </div>
</div>
  • Card With Image Header and Image Footer as Background
    • You can insert your favourite images into header and footer as a background of your card 

    <div class="card">
    <div class="card-image-header as-background" style="background-image: url(img/4.png); height: 140px;">
        <h4>Paolo</h4>
        <small class="text-muted">3 days ago - 23 min</small>
        <img src="/img/paolo-avatar.jpg" alt="Generic placeholder image" width="50" height="50">
    </div>
    <div class="card-block">
        <h4 class="card-title">About Me</h4>
        <div class="card-text">
            UX Design is an analytical and technical field. UI Design is closer to graphic design, though the responsibilities are somewhat more complex . . . 
        </div>
    </div>
    <div class="card-footer">
        <i class="material-icons">location_on</i> <a href="#" class="text-muted">San Fransisco</a>
    </div>
    <div class="card-image-footer">
        <img src="/img/pict1.jpg" alt="Card image cap">
    </div>
</div>
  • Profile Card
    • We also provide a profile card that you can use easily by adding .profile-card into your card element. 

    <div class="card profile-card px-0">
    <div class="card-profile-header" style="background-image:url(img/personal-desk.jpg);width:100%;height:200px;background-size:cover">
    </div>
    <div class="card-block">
        <img class="profile-picture" src="img/avatar.jpg" alt="Emily Burnt" width="100" height="100">
        <h4>
            <a href="profile/index.html">Amara Nisa</a>
        </h4>
        <p>Hi, it's been pleasure to meet you. I'm Amara the Chief Executive Officer at Arkalite. We hope you enjoy our page. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cum sociis natoque penatibus et magnis
            dis parturient ...
        </p>
    </div>
    <div class="card-footer text-xs-center">
        <ul class="list-inline">
            <li class="list-inline-item">
                <a href="#userModal" class="aku" data-toggle="modal">
            Following
            <h5 class="ali">375</h5>
        </a>
            </li>
            <li class="list-inline-item">
                <a href="#userModal" class="aku" data-toggle="modal">
            Friends
            <h5 class="ali">845</h5>
        </a>
            </li>
            <li class="list-inline-item">
                <a href="#userModal" class="aku" data-toggle="modal">
            Favorites
            <h5 class="ali">150</h5>
        </a>
            </li>
        </ul>
    </div>
</div>

Loader

We are using using jQuery Pace as our default page loader. If you want to use it as your page loader you need to include these 2 files :

<script src="js/lib/pace.min.js"></script>
<link rel="stylesheet" href="styles/lib/pace.min.css">

And add .using-loader inside your body element.

However if you decide to not used page loader you can remove all those required files and remove .using-loader on your body element.

Scroll

We included jQuery.NiceScroll as our default scroll. You have 2 class you can use for your scroll :
  1. .v-scroll is used if you want to show only vertical scroll and disable horizontal scroll
  2. .nice-scroll is used if you want to show scroll both horizontally and vertically
Following is the example of how to usage .v-scroll in a card. 
<div class="card chats-card">
    <div class="card-header">
        <h4>Chats</h4>
        <span class="tag tag-pill tag-info">2</span>
    </div>
    <div class="card-block">
        <ul class="media-list v-scroll mb-0" style="overflow-y: hidden; outline: none;" tabindex="5004">
            <li class="media left-message mb-2">
                <div class="media-left">
                    <a href="#">
                        <img class="media-object rounded-circle" src="img/amara-avatar.jpg" alt="user2" height="42" width="42">
                    </a>
                </div>
                <div class="media-body">
                    <h5>Amara Nisa</h5>
                    <small class="text-muted">1 day ago</small>
                </div>
                <div class="text-xs-right chat-bubble">
                    Hi Paolo, could you please arrange me a meeting with technical team. There are some feedbacks from our clients and I want it to be done in few weeks. This is really important feedback from important users.
                </div>
            </li>
            <li class="media right-message">
                <div class="media-body text-xs-right">
                    <h5>Paolo Aurelio</h5>
                    <small class="text-muted">1 day ago</small>
                </div>
                <div class="media-right">
                    <a href="#">
                        <img class="media-object rounded-circle" src="img/paolo-avatar.jpg" alt="user2" height="42" width="42">
                    </a>
                </div>
                <div class="text-xs-left chat-bubble">
                    Hi Amara, sure why not. I will arrange a meeting between you and technical team as soon as possible. I will send an invitation by email and I will let you know the place and the time. The meeting will be held at your office. The technical director also
                    will be attending the meeting.
                </div>
            </li>
        </ul>
        <hr class="mt-2 mb-2">
        <form name="chat" method="post">
            <div class="input-group">
                <input type="text" class="form-control" placeholder="type your message here">
                <span class="input-group-btn"><button class="btn btn-info"><i class="fa fa-paper-plane" aria-hidden="true"></i></button></span>
            </div>
        </form>
    </div>
</div>
here is the result of code above :

Events

Sidebar has 2 events to handle :

  1. Collapsed
  2. Expanded

If you have some elements in your body you have to make sure that it will be integrated with sidebar's events. For example in Dashboard 1 we have chart inside our content. Every time we expand and collapse sidebar menu we need to resize the chart so its width will be always like what we want.

Those 2 events are expanded.nc.sidebar and collapsed.nc.sidebar

Following is the example code on how to use the sidebar event :

This example is taken from index.html file, you can find this example at the bottom of the page. Imagine we already have chart element as following : 

var chart = new Chartist.Line('.ct-chart', {
    labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Des'],
    series: [
        [23, 42, 50, 20, 48, 90, 60, 41, 70, 80, 36, 60],
        [35, 15, 65, 42, 25, 65, 77, 100, 20, 58, 60, 45]
    ]
}, {
    low: 0,
    high: 100,
    lineSmooth: false,
    showArea: false,
    showPoint: true,
    fullWidth: true,
    axisX: {
        showGrid: false
    },
    axisY: {
        showGrid: false
    }
});

We need to resize this chart every time we expand or collapse menu. So we need to write this following code to handle this case.

$('.sidebar').on('expanded.nc.sidebar', function(e) {
    chart.update(); // resize chart if sidebar is expanded
});   

$('.sidebar').on('collapsed.nc.sidebar', function(e) {
    chart.update(); // resize chart if sidebar is collapsed
});

Support

Contact

Once again, thank you so much for purchasing this theme. Please take a moment to rate it from your Downloads page.

Need support?

For support contact me using the form on my profile page with subject [ThemeForest Support] Template name, or submit a comment on item page. You will receive an answer within 24-48 hours (working days) GMT +7.

  • I only provide support for fixing bugs or small issues on my items.
  • I don't provide free support for additional custom modifications to the items.
  • Please provide your site link, screenshots and other information about your issue.
  • Envato support terms

Need customization or availability for freelance projects?

Just send an email via profile page form; please don't forget to specify

  • if you are a company, agency or private user
  • all the information about your projects, needs, site urls, project sheet, etc..
  • from which country you are
  • if you have a deadline
  • if you have basic knowledge of HTML , CSS, JS, PHP

Sources and Credits

I've used the following images, icons or other files as listed. For the JS listed below, you can find the more documentation on the relative sites.

Thanks to Frittt Templates who provide this documentation template from Arkalite :)