Material Admin Extended Dark

## Site Components

## Toggleable Blocks

Toggleable Blocks are used to show/hide any elements using data-attributes set on any other elements.

In order to use this feature, you must set 2 data-attribute values to identify the click as well as the target element.

    <a href="" data-mae-actions="block-open" data-mae-target="#sidebar">Open Sidebar</a>

When you click any element holding `data-mae-actions="block-open"`, it'll add class `.toggled` to the target element set using `data-mae-target`.

Assuming `#sidebar` is hidden by default and in order to make it visible, we can use the following CSS

    #sidebar.toggled {
       display: block
    }

To reset, use data-attribute `data-mae-actions="block-close"` on any clickable element.

e.g

    <a href="" data-mae-action="block-close" data-mae-target="#sidebar">Close Sidebar</a>

This will remove `.toggled` class from the target element(#sidebar) set on `data-mae-target`.

Source JS file: `/js/inc/actions.js`

Usage in template:

1. `/index.html`
2. `/listings-grid.html`
3. `/listings-list.html`
4. `/dashboard/index.html`
5. ...

## Javascript Actions

Material Admin Includes the following Javascript actions. You can use these actions with any clickable HTML dom elements by providing the following data-attributes.

- `data-mae-action="fullscreen"`: Fullscreen browsing.
- `data-mae-action="print"`: Trigger browser print.
- `data-mae-action="clear-localstorage"`: Clear browser local storage.

#### Usage examples

    <a href="" data-mae-action="fullscreen">Toggle Fullscreen</a>

    <div class="btn btn-default" data-mae-action="print">Print Documents</div>

    <span class="clear" data-mae-action="clear-localstorage">Clear Cache</span>

Source JS file: `/js/inc/actions.js`

## Salvatore Masonry Grids

Salvatore is jQuery Masonry alternative with CSS-driven configuration.

Official website and detailed documentation: http://salvattore.com/

In Material Admin we use this plugin to define custom variable grids based on the screen size.

Usage in Material Admin:

- `/index.html`
- `/widget.html`

Source files:

- Plugin:
  - JS: `/vendors/bower_components/salvattore/dist/salvattore.min.js`
- LESS: `/less/inc/dashboard.less`