Cassie, a premium quality modern and clean Bootstrap 4 dashboard template using simplicity and minimal design. It is fully responsive built using SASS preprocessor, HTML5, CSS3 and jQuery plugins. It uses most of the helper/utilities classes which are reusable class that makes the page faster and increases the speed of page time load. It can be used for most type of dashboard and app templates like analytics, admin or messenger app for your desktpo or mobile applications. Amazing flexibility and reusability. See the demo.
This part of the doc will help you to quick start your project and will give you a basic idea about how this template work. For you to get start open the template download package.
| File Reference | |
|---|---|
| docs.html | Online documentation |
| index.html | Landing page |
Before installing gulp and sass first you must have NodeJs installed,NodeJS will have npm(node packaged modules).
Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js' package ecosystem,npm,is the largest ecosystem of open source libraries in the world.
Online Reference:https://nodejs.org/en/
Simply download the Macintosh Installerdirect from the nodejs.org web site.
If you want to download the package with bash:
curl "https://nodejs.org/dist/latest/node-${VERSION:-$(wget -qO- https://nodejs.org/dist/latest/ | sed -nE 's|.*>node-(.*)\.pkg.*|\1|p')}.pkg">"$HOME/Downloads/node-latest.pkg" && sudo installer -store -pkg "$HOME/Downloads/node-latest.pkg" -target "/"Using Homebrew:
brew install node
Simply download the Windows Installerdirect from the nodejs.org web site.
Before installing gulp first you must have NodeJs installed,NodeJS will have npm(node packaged modules).
Gulp is a toolkit for automating painful or time-consuming tasks in your development workflow,so you can stop messing around and build something.
Online Reference:https://gruntjs.com/
If you have previously installed a version of gulp globally,please run npm rm --global gulp to make sure your old version doesn't collide with gulp-cli.
$ npm install -g gulp-cli
Verify that gulp is successfully installed, and version of installed gulp will appear.
$ gulp --version
Before running grunt first you must check if you have sass installed in your machine. You can verify that sass is already installed by running the command.
$ sass --version
If version appear, it means sass already installed in your machine and proceed to the next topic, otherwise follow the instructions below on installing sass.
Before you start using Sass you will need to install Ruby. The fastest way to get Ruby on your Windows computer is to use Ruby Installer. It's a single-click installer that will get everything set up for you super fast.
If you prefer the command line over an application then getting Sass set up is a fairly quick process. Sass has a Ruby dependency but if you're using a Mac, congratulations, Ruby comes pre-installed.
Ruby uses Gems to manage its various packages of code like Sass. In your open terminal or cmd window:
$ gem install sass
You should now have Sass installed, but it never hurts to double-check.
$ sass --version
Online Reference: http://sass-lang.com/install
You're moments away to see the dashboard template up and running in your local machine. First,go to the root folder where the package.json located. In your download package it should be in the root folder. Please run the following command below.
Note:Running this template to you local machine is not a requirements for you to see the template. You can directly browse to the template folder and choose any html file you want to open by opening it directly to the browser.
$ npm install
This will download all dependencies defined in package.json file. Once it finished running the command,it will generate a folder name node_modules/ where you see downloaded files.Next,run another command below.
$ gulp npm-lib
This will extract all dependencies defined in package.json file. Once it finished running the command,it will generate a folder name lib/ where you see extracted files.
Now you're good to go in running the template and preview it in browser by running the command below.
$ gulp serve
The template is now up and running in your browser. Feel free to visit each page and familiarize the flow of it.
Include the following stylesheet into the head of your page. This must be present in all of your pages.
<!-- vendor css -->
<link href="../lib/@fortawesome/fontawesome-free/css/all.min.css" rel="stylesheet">
<link href="../lib/ionicons/css/ionicons.min.css" rel="stylesheet">
<!-- cassie CSS -->
<link rel="stylesheet" href="../assets/css/cassie.css">
<!-- some additional css here -->Include the following scripts into the end of the body your page. This must be present in all of your pages.
<script src="../lib/jquery/jquery.min.js"></script>
<script src="../lib/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../lib/feather-icons/feather.min.js"></script>
<script src="../assets/js/cassie.js"></script>Below is the starter template structure that you can use in creating a new dashboard page.
<div class="sidebar">
<div class="sidebar-header">...</div>
<div id="dpSidebarBody" class="sidebar-body">...</div>
</div><!-- sidebar -->
<div class="content">
<div class="header">
<div class="header-left">...</div>
<div class="header-right">...</div>
</div><!-- header -->
<div class="content-header">...</div>
<div class="content-body">
// your content goes here...
</div><!-- content-body -->
</div><!-- content -->
Below is the starter template structure that you can use in creating a new page other than dashboard and apps.
<div class="sidebar">
<div class="sidebar-header">...</div>
<div id="dpSidebarBody" class="sidebar-body">...</div>
</div><!-- sidebar -->
<div class="content">
<div class="header">
<div class="header-left">...</div>
<div class="header-right">...</div>
</div><!-- header -->
<div class="content-header">...</div>
<div class="content-body">
// your content goes here...
</div><!-- content-body -->
</div><!-- content -->
A page loaded from a file:// URI, only files in (or below) the same directory of the filesystem are considered to be "same origin", and so putting the font in a different subtree (../font/) means it will be blocked by security policy restrictions. Most browser disables cross-domain fonts "by default. By fixing this, you need to put the file in a remote or local server. Anyway, that what where we're going.
The images you see in the demo are use only for demo purposes only and is not allowed to be included in the download package.
You can request for support via email or themeforest item comments.
We will assist you any problem you encounter while buidling your dashboard via this template
We use request help form in comments and email to manage customer support. Soon,as we grow,we will invest and find the best customer support system we can use to serve you better. For the meantime,submit a help request to the link given for any issues and concerns that you have. Don't worry, we will respond to you as quickly as we can. Thank you.
© 2019. Cassie Documentation v1.0.0. All Rights Reserved. Created by: ThemePixels