Material Admin

What's Included

The Material 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/
    ├── css/
    ├── demo/
    │     ├── css/
    │     ├── img/
    │     ├── data/
    │     └── js/
    ├── fonts/
    ├── img/
    ├── js/
    ├── scss/
    ├── vendors/
    │     ├── bower_components/
    │     └── ...
    ├── gruntfile.js
    ├── package.json
    ├── index.html
    └── ...

The scss/, js/, and fonts/ are the source code for our CSS, JS, and icon fonts (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. Some of the source codes of JS demo such as charts are kept inside the demo directory. You can refer those codes samples to create instances of it if requirred.

CSS Naming Conventions

Material Admin 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 CSS and JavaScript

Material Admin uses GruntJs for it's build system. GruntJs is a task-based command line build tool for JavaScript projects ans it helps making most of our manual tasks to automate. In Material Admin we use GruntJs for:

Compiling SCSS to CSS.
Include HTML partial files in production mode.
Minification of CSS and JS files.
Concating JS files.
Cleaning Temp files.
Copy/Move files and folders.
Automatically adding vendor prefixes for some CSS.
Watch project file changes (dev).
Create distribute version from production mode.

All the above tasks are added in gruntfile.js which is available in the main project folder. gruntfile just creates a basic grunt.js that you can fill in with tasks.

Installing Grunt

To install Grunt, 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 grunt-cli globally with:
```
npm install -g grunt-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 Grunt commands provided from the command line.

Before you make any changes...

Before you make any changes in SCSS or js files, in your command line, make sure to run:

grunt watch

Task grunt watch is a file watcher which will execute certain number of tasks when any given file changes. All SCSS and js files should be watched in order to make changes in the output files (css and js).

To check the official documentation of GruntJs, go to http://gruntjs.com

Using SCSS

Material Admin'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 direct editing of 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 /scss/inc/_variables.scss. This includes all the overridden Bootstrap and custom defined variables.

To view the custom Mixins, go to /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

About 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 style codes in a proper way.

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

app.scss is the main style file which includes all the sub styles inside inc directory.

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

/vendor-overrides directory includes all third party plugin style overrides.

Font

Roboto 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/Roboto. For monospace, Bootstrap 4's default 'Menlo' is used.

If you want to change the default font to something else:

Copy your new font inside /fonts/[font-name-directory]/
Include the @font-face code at /scss/inc/_font.scss
Update the SCSS variable $font-family-sans-serif at /scss/inc/_variables.scss
e.g: $font-family-sans-serif: 'Nunito';

Third party vendors

Material Admin manages it's most of third party vendors through Bower package manager. 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.

To install Bower in your machine globally with npm(assuming you have NodeJs installed), go to command line and run:

npm install -g bower

To install any third party bower packages, run command bower install [package-name] --save

e.g

bower install jquery --save

Bower is initiated inside /vendors/ folder. So make sure to navigate to the respective folder before you install any new packages.

To read more about bower and bower packages, go to https://bower.io/

Third part plugins used in Material Admin:

Bootstrap
Popper.js (For Bootstrap)
jQuery
Material Design Iconic Font
Animate.css
Salvattore
Flot
Flot Orderbars (For Flot charts)
Flot CurvedLines (For Flot charts)
jQuery Vector Maps
Easy Pie charts
Data Tables
Buttons for DataTables (For Data Tables)
JSZip (For Data Tables)
Autosize Textarea
jQuery Mask
Select 2
Dropzone JS
FullCalendar
Moment JS (For FullCalendar)
Flatpickr
noUiSlider
Bootstrap Colorpicker
Trumbowyg WYSIWYG Editor
SweetAlert 2
LightGallery
Clamp.js (For notes.html)
Bootstrap Notify
jQuery Scrollbars
Scroll Lock (For jQuery Scrollbars)
Rate Yo!
jqTree
jQuery Text Counter
jQuery Sparklines

Basic Template

<!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>

        <!-- Vendor styles -->
        <link rel="stylesheet" href="vendors/bower_components/material-design-iconic-font/dist/css/material-design-iconic-font.min.css">
        <link rel="stylesheet" href="vendors/bower_components/jquery.scrollbar/jquery.scrollbar.css">

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

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

            <!-- Header -->
            <header class="header">
                <div class="navigation-trigger hidden-xl-up" data-ma-action="aside-open" data-ma-target=".sidebar">
                    <div class="navigation-trigger__inner">
                        <i class="navigation-trigger__line"></i>
                        <i class="navigation-trigger__line"></i>
                        <i class="navigation-trigger__line"></i>
                    </div>
                </div>

                <div class="header__logo hidden-sm-down">
                    <h1><a href="index.html">Material Admin 2.0</a></h1>
                </div>

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


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


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

                <!-- Page Contents -->

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


        <!-- Javascript -->
        <!-- Vendors -->
        <script src="vendors/bower_components/jquery/dist/jquery.min.js"></script>
        <script src="vendors/bower_components/popper.js/dist/umd/popper.min.js"></script>
        <script src="vendors/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
        <script src="vendors/bower_components/jquery.scrollbar/jquery.scrollbar.min.js"></script>
        <script src="vendors/bower_components/jquery-scrollLock/jquery-scrollLock.min.js"></script>

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

Themes

Material Admin comes with 10 optional color themes which can be access from the top-right navigation menu.

Switching themes manually

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

Available color themes:

green
blue
red
orange
teal
cyan
blue-grey
purple
indigo
brown

In order to switch themes, simple add the color from the colors list to the data-attribute data-ma-theme which you can find on the body tag.

e.g:

<body data-ma-theme="blue">
   ...
</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 a theme so the applied new theme will also work after page refreshes.

Getting Started