Material Admin Extended Dark

## Getting Started

## What's Included

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

    documentation/
    template/
        ├── css/
        ├── less/
        ├── js/
        ├── img/
        ├── fonts/
        ├── vendors/
        │     ├── bower_components/
        │     └── ...
        ├── demo/
        │     ├── css/
        │     ├── js/
        │     ├── img/
        │     └── media/
        ├── gruntfile.js
        ├── package.json
        ├── index.html
        └── ...

The less/, js/, and fonts/ are the source code for our CSS, JS, and icon fonts (respectively).

## CSS Naming Conventions

Material Admin follows BEM naming conventions for all of it's 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, please go to http://getbem.com/naming/

## Compiling CSS and JavaScript

Material Admin uses GruntJs for its 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:

1. Compiling LESS to CSS.
2. Splitting main CSS file to sub instances.
3. Minification of CSS and JS files.
4. Concating JS files.
5. Cleaning Temp files.
6. Copy/Move files and folders.
7. Watch project file changes (dev).

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:

1. Install `grunt-cli` globally with:

       npm install -g grunt-cli

2. Navigate to the root 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 the various Grunt commands provided from the command line.

#### Before you make any changes...

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

    grunt watch

Task `grunt watch` is a file watcher which will execute certain tasks when any given file changes. All less 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 LESS

Material Admin's CSS is built on LESS, a preprocessor with additional functionality like variables, mixins, and functions for compiling CSS. We strongly recommend you use LESS 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 with splits.

To view all the LESS variables added in this template, go to `/less/inc/variables.less`. This includes all the overridden Bootstrap and custom defined variables.

To view the custom Mixins, go to `/less/inc/mixins.less/`

To read more about using LESS in Bootstrap framework, head on to http://getbootstrap.com/css/#less

## Third party vendors

At Material Admin, most of the third party vendors are managed 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 package, 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 packages.

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

#### Installed Vendors List

1. jQuery
2. Bootstrap
3. Bootstrap Growl
4. Farbtastic Color Picker
5. Simple File Input
6. jQuery Sparklines
7. Animate.css
8. Autosize Textarea
9. Flot
10. Flot Orderbars
11. Flot CurvedLines
12. Flot Tooltips
13. FullCalendar
14. jQuery Mask
15. jQuery Bootgrid
16. jQuery Placeholder
17. Easy Pie charts
18. LightGallery
19. Malihu jQuery Custom Scrollbar
20. Material Design Iconic Font
21. Moment.js
22. noUiSlider
23. Salvattore
24. Select 2
25. Simple Weather
26. SweetAlert 2
27. Bootstrap Wizard

## Basic Template

    <!DOCTYPE html>
    <html lang="en">
        <!--[if IE 9 ]><html class="ie9"><![endif]-->
        <head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <title>Page Title</title>

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

        <body>
            <header id="header">

                <!-- Logo -->
                <div class="logo">
                    <a href="index.html" class="hidden-xs">
                        Material
                        <small>admin inversed</small>
                    </a>
                </div>

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

            <section id="main">
                <aside id="notifications">
                    <!-- Notifications Content -->
                </aside>

                <aside id="navigation">
                    <!-- Site Navigation Content -->
                </aside>

                <section id="content">

                    <!-- Page Heading -->
                    <div class="content__header">
                        <h2>Sample heading</h2>
                    </div>

                    <!-- Page Contents -->
                </section>

                <footer id="footer">
                    <!-- Footer Contents -->
                </footer>

            </section>

            <!-- Javascript Libraries -->

            <!-- jQuery -->
            <script src="vendors/bower_components/jquery/dist/jquery.min.js"></script>

            <!-- Bootstrap -->
            <script src="vendors/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
        </body>
    </html>