Super Admin 2.0

What's Included

The Super Admin 2.0 source code download includes the precompiled CSS, JavaScript, and font assets, along with source SCSS, JavaScript, and documentation. More specifically, it includes the following and more:

documentation/
template/
    ├── demo/
    │     ├── css/
    │     ├── img/
    │     └── js/
    ├── resources/
    │     ├── css/
    │     ├── fonts/
    │     ├── img/
    │     ├── js/
    │     └── vendors/
    ├── src/
    │     ├── _includes/
    │     ├── js/
    │     ├── scss/
    │     ├── index.html
    │     └── ...
    ├── gulpfile.js
    ├── package.json
    ├── index.html
    └── ...

The src/scss/, src/js/, src/_includes/ and are the source code for our CSS, JS, and HTML files (respectively).

Demo files

Files inside the demo/ folder are used only for demo purposes. Removing any demo files would not cause any issues in the functionality of the template.

CSS Naming Conventions

Super Admin 2.0 follows BEM naming conventions for all of it's custom CSS Class naming. BEM stands for Block, Element, Modifier and it's a popular methodology in HTML and CSS for naming convention.

The BEM approach ensures that everyone who participates in the development of a website works with a single codebase and speaks the same language. Using proper naming will prepare you for the changes in design of the website.

BEM example:

<form class="form form--simple">
    <div class="form__group">
        <label class="form__label">Label</label>
        <input type="text" class="form__field form__field--block">
    </div>

    <button class="button button--red">Submit</button>
</form>

To learn more about BEM naming convention, go to http://getbem.com/naming/

Compiling SCSS and Minifying JS

Super Admin 2.0 uses Gulp.js for it's build system. Gulp is a toolkit for automating painful or time-consuming tasks in your development workflow and helps to automate all the manual tasks.

Available Gulp tasks

Task	Purpose
`cleanFiles()`	To clean any temp and left over files during building the dist version
`cleanDist()`	To clean the generated `dist/` folder after making it zip
`handleCSS()`	To compile SCSS, Autoprefix and Minify CSS
`handleJS()`	To concat and minify JS files
`html()`	To include partial HTML files in to pages
`copyToDist()`	Copy files and folders to initiate the build task
`zipDist()`	To create zip of the `dist/` folder
`watch`	To watch file changes in order to execute certain tasks
`webserver`	To start webserver (optional)
`build`	To create a dist version

All the above tasks are added in gulpfile.js which is available at the root of the project folder.

Installing Gulp.js

To install Gulp.js, you must first download and install Node.js (which includes npm). NPM stands for node packaged modules and is a way to manage development dependencies through node.js.

Then, from the command line:

Install gulp-cli globally with:
```
npm install --global gulp-cli
```
Navigate to the root project directory, then run.
```
npm install
```

NPM will look at the package.json file and automatically install the necessary local dependencies listed there. When completed, you'll be able to run various Gulp commands provided from the command line.

Before you make any changes...

Before you make any changes in any of src/scss, src/js or src/**/*.html files, make sure to run the following Gulp command:

gulp watch

Task watch is a file watcher which will execute certain number of tasks when any of the given file have been changed. All files under src/ directory should be watched in order to make changes in the output files.

To check the official documentation of Gulp.js, go to https://gulpjs.com/

Using SCSS

Super Admin 2.0's CSS is built on SCSS, a preprocessor with additional functionality like variables, mixins, and functions for compiling CSS. We strongly recommend you use SCSS rather than directly editing the raw CSS as most of the CSS including third party's are already combined in to a single CSS output file.

To view all the SCSS variables added in this template, go to /src/scss/inc/_variables.scss. This includes all the overridden Bootstrap and custom defined variables.

To view the custom Mixins, go to /src/scss/inc/_mixins.scss/

To read more about using SCSS in Bootstrap framework, head on to https://getbootstrap.com/docs/4.1/getting-started/theming/#sass

SCSS file/folder structure

Template specific SCSS styles are splitted in to smaller files in order to make the coding process much simpler. This way, it's much easier to look for a certain element or to organize the codes in a proper way.

src/
└── scss/
    ├── app.scss
    └── inc/
         ├── bootstrap-overrides/
         ├── vendor-overrides/
         ├── widgets/
         ├── _base.scss
         ├── _charts.scss
         └── ...

app.scss is the core SCSS file which includes all the sub files inside inc directory.

/bootstrap-overrides directory includes Bootstrap style overrides such as Buttons, Dropdown, Cards etc.

/vendor-overrides directory includes third party plugin UI overrides.

Using JS

Like SCSS, Custom Javascript codes used in this template are also splitted in to partial files in order to simplify the coding process. A Gulp task (handleJS()) is used to concat these partial files in to a single minified JS output when there is a change detected. Concated JS file can be found at /resources/js/app.min.js.

Custom JS file/folder structure

Template specific SCSS styles are splitted in to smaller files in order to make the coding process much simpler. This way, it's much easier to look for a certain element or to organize the codes in a proper way.

src/
└── js/
    ├── vendors/
    |   ├── calendar.js
    |   ├── datatables.js
    |   └── ...
    ├── functions.js
    └── actions.js

/vendors - Includes all the JS codes needed for third party plugins in use.

functions.js Functions required for template functionality.

actions.js Re-usable actions required for template functionality such as Sidebar toggle, Search toggle etc.

Font

Nunito is the font used in this template for both body copy and headings. It's a google font from https://fonts.google.com and to further check it out, go to https://fonts.google.com/specimen/Nunito. For monospace, Bootstrap 4's default 'Menlo' is used.

If you want to change the default font to any other font:

Copy your new font inside /resources/fonts/[font-name-directory]/
Include @font-face rule for the newly added font at /src/scss/inc/_font.scss
Update the SCSS variable $font-family-sans-serif at /src/scss/inc/_variables.scss
Example:
```
$font-family-sans-serif: 'Roboto';
```

Third party vendors

Third party vendors are managed statically and you can find all the vendors used in this template inside /resources/vendors directory.

Available plugins

Basic Template

Following is a basic template markup which you can use to create any new page from scratch.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>Page Title</title>

        <!-- App styles -->
        <link rel="stylesheet" href="/resources/css/app.min.css">
    </head>

    <body data-ma-theme="1">
        <main class="main">

            <!-- Header -->
            <header class="header">
                <div class="navigation-trigger d-xl-none" data-ma-action="aside-open" data-ma-target=".sidebar">
                    <i class="zwicon-hamburger-menu"></i>
                </div>

                <div class="logo d-none d-sm-inline-flex">
                    <h1><a href="index.html">Logo</a></h1>
                </div>

                <!-- Other Header Contents -->
            </header>


            <!-- Sidebar -->
            <aside class="sidebar">
                <div class="scrollbar">
                   <!-- Sidebar Contents -->
                </div>
            </aside>


            <!-- Contents -->
            <section class="content">
                <div class="content__title">
                    <h1>
                        Main heading
                        <small>Sub heading contents</small>
                    </h1>
                </div>

                <!-- Page Contents -->

                <!-- Footer -->
                <footer class="footer">
                     <!-- Footer Contents -->
                </footer>
            </section>
        </main>


        <!-- Javascript -->
        <!-- Vendors -->
        <script src="resources/vendors/jquery/jquery.min.js"></script>
        <script src="resources/vendors/popper.js/popper.min.js"></script>
        <script src="resources/vendors/bootstrap/js/bootstrap.min.js"></script>
        <script src="resources/vendors/overlay-scrollbars/jquery.overlayScrollbars.min.js"></script>

        <!-- App functions -->
        <script src="resources/js/app.min.js"></script>
    </body>
</html>

Themes

Super Admin 2.0 comes with 10 optional themes which can be accessed from top right themes menu.

Switching themes manually

Themes can be switched using the data-attribute data-sa-theme which is applied on the body tag.

Theme names are nothing but numbers from range 1 - 10. In order to apply a new theme, simply add the number associated to the theme.

e.g:

<body data-sa-theme="5">
   ...
</body>

Saving a theme

Currently themes are used only for static demo purposes. You can use a backend database or a simple LocalStorage solution to save the theme so the applied new theme will also work after page refreshes.

Getting Started