Slim Documentation v1.1

Thank you so much for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email us at themepixels@gmail.com or submit a comment to this template. Thanks so much!

Introduction

Slim, a modern and clean Bootstrap 4 admin & dashboard template using flat 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.

Getting Started

This part of the doc will help you to quick start your project and will give you a basic idea about how slim work. For you to get start open the "themes" folder in templates/ of your download package.

What's In The Box

Once you have download the package you will see the following folder structure inside templates/ folder.

Note: If you are still unsure of what's the use of this files, you may want to proceed to the next topic:

• NodeJS
• Bower
• Gulp

NodeJS

Before installing bower and grunt 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.

Installing in Mac

Simply download the Macintosh Installer direct 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

Installing in Windows

Simply download the Windows Installer direct from the nodejs.org web site.

Bower

Before installing bower first you must have NodeJs installed, NodeJS will have npm (node packaged modules). Once you finished installing nodejs you can now install bower through npm command.

Keeping track of all these packages and making sure they are up to date (or set to the specific versions you need) is tricky. Bower to the rescue!

Bower can manage components that contain HTML, CSS, JavaScript, fonts or even image files. Bower doesn’t concatenate or minify code or do anything else - it just installs the right versions of the packages you need and their dependencies.

Installing Bower

Bower is a command line utility. Install it with npm.

$ npm install -g bower

Verify that bower in successfully installed, and version of installed bower will appear.

$ bower --version

Gulp JS

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.

Installing the CLI

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

SASS

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.

Installing SASS

Windows

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.

Mac

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.

Install SASS

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

Running Slim

You're moments away to see the slim dashboard template up and running in your local machine. First, go to the root folder where the bower.json and package.json located. In your download package it should be in the template/ folder. Please run the following command below.

Note: Running slim 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.

$ bower install

This will download all dependencies defined in bower.json file. Once it finished running the command, it will generate a folder name bower_components/ where you see downloaded files.Next, run another command below

$ npm install

This will download all tools defined in package.json file. Once it finished running the command, it will generate a folder name node_modules/ where you see downloaded tools.Next, run another command below.

$ gulp bower

This will generate a app/lib/ folder to extract all needed third party plugins and other resources like fonts to be use in the template.

Running in Browser

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.

Stylesheet

We use SASS in creating styles in this template logically grouping into sections. Below are the structure of sass files and folders

Bootstrap

All of the files organized into a name of element are override styles of Bootstrap core framework styles. It is overriden for performance and design quality improvement purposes.

To learn more about Bootstrap, visit their site at https://getbootstrap.com/

Plugins

All files organized into a name of plugin are override styles from some of the plugins used in this template and can be found in lib/ folder. It is also overriden for performance and design quality improvement purposes.

Utilities

Utilities classes are very reusable classes with a single purpose to reduce the frequency of highly repetitive declarations.

Note: Below are some of the classes that we think are more reusable. If you did not find any classes on the list be sure to check the scss files under scss/utilities/ folder if there are any existing classes you need before you can create a new style.

Background Color

Borders

Height

Width

Margins

Padding

Position

Typography

If you have any questions that are beyond the scope of this class reference, please feel free to email us at themepixels@gmail.com. Thanks so much!

HTML Structure

Header Panel

<div class="slim-header">
  <div class="container">
    <div class="slim-header-left">
      ...
    </div><!-- slim-header-left -->
    <div class="slim-header-right">
      ...
    </div><!-- header-right -->
  </div><!-- container -->
</div><!-- slim-header -->

Top Navbar

Below is the html structure of the top navbar of slim admin template that includes menu and icon menu. Some of the class found in left sidebar are explained below.

<div class="slim-navbar">
  <div class="container">
    <ul class="nav">
      <li class="nav-item with-sub">
        <a class="nav-link" href="#">
          <i class="icon ion-ios-home-outline"></i>
          <span>Dashboard</span>
        </a>
        <div class="sub-item">
          <ul>
            <li><a href="index.html">Dashboard 01</a></li>
            ...
          </ul>
        </div><!-- dropdown-menu -->
      </li>
      <li class="nav-item with-sub mega-dropdown">
        <a class="nav-link" href="#">
          <i class="icon ion-ios-filing-outline"></i>
          <span>UI Elements</span>
        </a>
        <div class="sub-item">
          <div class="row">
            <div class="col-lg-5">
              <label class="section-label">Basic Elements</label>
              <ul>
                <li><a href="chart-morris.html">Morris Charts</a></li>
                ...
              </ul>
            </div><!-- col -->
            ...
          </div><!-- row -->
        </div><!-- dropdown-menu -->
      </li>
      ...
    </ul>
  </div><!-- container -->
</div><!-- slim-navbar -->

Main Panel

Below is the html structure of the main panel of slim admin template that wraps the contents of the page.

<div class="slim-mainpanel">
  <div class="container">
    <div class="slim-pageheader">
      <ol class="breadcrumb slim-breadcrumb">
        <li class="breadcrumb-item"><a href="#">Home</a></li>
        <li class="breadcrumb-item active" aria-current="page">Blank</li>
      </ol>
      <h6 class="slim-pagetitle">Blank</h6>
    </div><!-- slim-pageheader -->

  </div><!-- container -->
</div><!-- slim-mainpanel -->

Elements

The HTML Markup of alerts, buttons, etc. are explained in the bootstrap documentation or in thelive preview of this template. Feel free to use it in your page. Any components that are beyond of this template, may submit a request and suggestion to our email at themepixels@gmail.com

More Features

Switch to RTL

You can easily switch pages into rtl direction by adding a single code in the html tag element like in the code given below:

<html lang="en" dir="rtl">

Make Header Sticky in Top

You can easily make the header stick at the top by adding a single link class to the body of the page like in the code given below:

<body class="slim-sticky-header">

Make Page in Full Width

You can easily make the page have a full width by replacing all the .container class name into .container-fluid

<div class="container-fluid">

Applying Skin Header

You can apply additional skin to header or making the page dark by adding a link tag of header like in the code given below

<link rel="stylesheet" href="../css/slim.css">
<link rel="stylesheet" href="../css/slim.one.css">

Known Issue

• Not displaying font icons in opening the html files directly in a browser.

  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.

Changelog

v1.1

• Added: Sidebar Layout
• Updated: Latest Bootstrap (4.1.1)

v1.0

• Initial Release

References

Customer Support

You can request for support via email or themeforest item comments.

We will assist you any problem you encounter while buidling your dashboard via Slim template

Email: themepixels@gmail.com

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.