+
[ModularAdmin](http://modularcode.github.io/modular-admin-html/) is an open source dashboard theme built in a modular way. That makes it extremely easy to scale, modify and maintain.
-
-#### Heads up for the ModularAdmin v2!
-We're working hard on version 2, which is a complete rewrite.
-V2 demo | V2 code
-**Please consider [supporting us](#support-us) to make this happen!**
-
----
-
-
-## Getting Started
-
-> **Note:** If you don't want to re-build the project, you may just clone this branch directly ```https://github.com/modularcode/modular-admin-html/tree/gh-pages```
-
-### 1. [Download ZIP](https://github.com/modularcode/modular-admin-html/releases) or Git Clone
-
-```
-git clone https://github.com/modularcode/modular-admin-html.git
-```
-### 2. Build the project
-
-The cloned/downloaded repository desn't contain prebuilt version of the project and you need to build it. You need to have [NodeJs](https://nodejs.org/en/) with npm. You also need to have [Bower](http://bower.io/) installed globally.
-
-
-Install npm dependencies
-```
-npm install
-```
-
-Install bower dependencies
-```
-bower install
-```
-
-Build the project and start local web server
-```
-npm start
-```
-
-Open the project [http://localhost:4000](http://localhost:4000).
-
-
-**Warning!** all changes made in ```dist/``` folder would be overwriten on application build.
-
-
-
-You can also [run the project in docker](#running-in-docker) thanks to @japrogramer
-
-
-
-## Folder Structure
+## Getting started
```
-├── bower_components/ # vendor libraries installed by bower
-├── build/ # app build tasks and tools
-├── node_modules/ # node dependencies
-├── dist/ # compiled result
-├── src/ # source files
-│── bower.json # bower configuration file
-└── package.json # npm configuration file
-```
-
-#### ```src/``` folder
-
-This folder contains our application source files.
-The folder structure reflects the app component structure.
+# 1. Clone the repo
+git clone -b v2-dev --single-branch https://github.com/modularcode/modular-admin-html.git modular-admin-html
+# 2. Install dependenices
+cd modular-admin-html
+yarn install
-Each non-underscored folder represents a single component module. Modules can be nested inside each other.
-
-There are also special folders which start with an underscore.
-For example ```_common/``` folder contains common components that are used by other components at the same level.
-
-This file structuring makes our app file organization very semantic and scalable. Also It's very easy to work on separate components even if you're developing large-scale applications.
-
-```
-├── _assets/ # application assets
-├── _common/ # common components
-| ├── helpers/ # handlebars helpers
-| └── styles/ # application common styles
-├── _themes/ # different theme versions
-├── app/ # app module (dashboard view)
-│ ├── _common/ # app common components
-│ | ├── editor/ # wysiwyg editor files
-│ | ├── footer/ # footer files
-│ | ├── header/ # header files
-│ | ├── modals/ # common modal dialogs (confirm, image library, etc)
-│ | └── sidebar/ # sidebar files
-│ ├── {different modules}
-│ ├── app-layout.hbs # app view layout
-│ └── app.scss # main app view styles
-├── auth/ # auth module (login/signup/recover)
-│ ├── {different modules}
-│ ├── auth-layout.hbs # auth view layout
-│ └── auth.scss # main auth view styles
-├── _context.js # main handlebars variables
-├── _main.scss # main styles
-├── _variables.scss # variables
-├── config.js # javascript configs
-└── main.js # main script file
+# 3. Launch dev script
+yarn dev
```
-#### ```build/``` folder
-
-This folder contains files related to our application compilation. That can be styles preprocessing (LESS,SASS,PostCSS) and template engine compilation, script file concatenation and minification and other related tasks.
-
-```
-├── paths/ # application file paths
-| ├── app.js # application file paths
-| └── vendor.js # 3-rd party plugins paths
-├── tasks/ # tasks folder
-| └── {different tasks} # each file represents a single build task
-├── utils/ # some utils
-├── config.js # build configs
-└── gulpfile.js # main build file for gulp build system
-
-```
-
-#### ```dist/``` folder
-
-Compiled state of our app with processed styles, templates, scripts and assets.
-
-**Warning! Never work inside this folder, because your changes would be overwritten on every build**
-
-
-
-## File Types
-
-Our app consists of different file types.
-
-#### Styles (*.scss)
-
-We use [SASS](http://sass-lang.com/) as CSS preprocessor language.
-Main variables are defined in ```src/_variables.scss``` folder.
-For making life easier we broke down styles into components, and on build we're just merging all ```.scss``` files together and processing it to ```dist/css/app.css``` file. Style files are merged in the following order
-
-```
-{variables.scss}
-{bootstrap variables}
-{bootstrap mixins}
-{rest style files}
-```
-The remaining style files are merged in the alphabetical order.
-
-There are also different theme variations located in ```src/_themes/ folder```, where you can change the main variables to get different themes. There are a few predefined themes built in. You can add new themes by adding a new file in ```src/_themes/``` folder. The file name must end with ```-theme.scss```.
-
-#### Scripts (*.js)
-
-We separate application's scripts across its components. For simplicity we use ES5 in this version, and just wrap each component's script in jQuery ```$(function() { })```. JS configurations are defined in ```src/config.js``` file. On build, application script files are merged together and copied to ```dist/js/app.js``` folder. The script files are merged in the following order.
-
-```
-{config.js}
-{all .js files except main.js}
-{main.js}
-```
-
-#### Templates (*.hbs)
-
-Templates are pieces of HTML files written in template engine language. We use [Handlebars](http://handlebarsjs.com/), which allows to have conditions in HTML, reuse partials in different pages (e.g. sidebars, footers), use loops, layouts etc.
-
-#### Pages (*-page.hbs)
-
-Templates themselves are just parts of the markup, and aren't compiled as separate files. What we really want in the final output is a ```.html``` page in the ```dist/``` folder. There are special handlebar templates for it, their filenames ending with ```-page.hbs```. Each ```{pagename}-page.hbs``` file would be compiled to ```dist/{pagename}.html``` page with a flatened file structure.
-
-Pages can consist of different templates (partials) which can be included thanks to handlebars partial including feature. Also each page has its context, which is a data passed into the template on rendering. That data is used in template expressions and variables. page contexts can be defined in two ways:
-
-**YAML** headers ([example](https://github.com/modularcode/modular-admin-html/blob/master/src/app/dashboard/index-page.hbs))
-
-```
----
-foo: bar
-list:
- - One
- - Two
- - Three
----
-```
-and **_context.js** files.
-```
-module.exports = {
- foo: 'bar',
- foo2: function() {
- // do some magic, return some string
- },
- list: [
- 'One', 'Two', 'Three'
- ]
-}
-```
-
-The final result of page context is a combination of both ways. Moreover, different depth level _context.js files are extending each other and then are extended with YAML headers data. For simplicity we use only **YAML** headers.
-
-#### Layouts (*-layout.hbs)
-
-If different pages have a lot of common components like sidebars, headers, footers, then it's a good idea to define a layout for those common pages, and define in page files only the content which is unique.
-
-Layout is a page content wrapper. If the page has a layout in output we'll get page's content inserted into the layout. Layouts should have ```{{{body}}}``` handlebars tag, which is entry point for the page content. ([example](https://github.com/modularcode/modular-admin-html/blob/master/src/app/app-layout.hbs))
-
-To define a page layout you need to specify page file context's ```layout``` variable. It can be done both with a YAML header or a _context.js file. ([example](https://github.com/modularcode/modular-admin-html/blob/master/src/app/forms/forms-page.hbs)).
-
-Layouts can also have contexts and parent layouts.
-
-```
-{_main-layout.hbs} # main layout with doctype, head, scripts declaration
- {app/app-layout.hbs} # dashboard layout with sidebar, header and footer
- {app/forms/forms-page.hbs} # any dashboard page
-```
-
-
-If you need more advanced layouting with multiple content blocks at the same time you can use [handlebar-layouts](https://www.npmjs.com/package/handlebars-layouts) helper approach, which is also available out of the box.
-
-#### Vendor files
-
-In addition to application files, there are also third party plugin files (e.g. Bootstrap). They are managed by using [Bower](http://bower.io/). Usually vendor libraries consist from scripts, styles and assets (images, fonts). The build system will concatenate and copy all the script and style files accordingly to ```dist/js/vendor.js``` and ```dist/css/vendor.css```. It also will copy all assets to the ```dist/assets/``` folder.
-
-
-
-## Running in Docker
-
-You can run the project in docker. To build the container, you need to install docker and docker-compose than launch the docker daemon. After launching the daemon run the following commands from the project folder:
-
-Build the image
-```
-docker-compose build
-```
-
-Launch the container
-```
-docker-compose up
-```
-
-
-## Support us!
-
-### Contribute
-
-Be part of our team! Feel free to open new issues/pull-requests.
-
-### Get in touch
-
-You can get in touch with us in gitter chat [](https://gitter.im/modularcode/modular-admin?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge) or in the [ModularCode Facebook Group](https://www.facebook.com/groups/710770032358423/).
-Feel free to contact us with any questions, sugestions, remarks and potential feature requests that you might have.
-
-* Gevorg Harutyunyan | [LinkedIn](https://www.linkedin.com/profile/view?id=AAMAAA7ne4gBF-IVNsoiBaeOeDTd5YGSTVN2eBs) | [Facebook](https://www.facebook.com/madextreme) | [Twitter](https://twitter.com/mad4extreme) | gevharut[at]gmail.com
-* Aram Manukyan | [LinkedIn](https://www.linkedin.com/profile/view?id=AAkAABCehqwBm7aTR7IohpOidW1sVIHMo33U46o)
-* David Tigranyan | [LinkedIn](https://www.linkedin.com/profile/view?id=AAkAAAk1QJIB86I-V65l3qtgpTvfrMozBNc4p_8)
-
+After all this done, you should see result at http://localhost:8080/
-### Backers
+## Backers
Support us with a monthly donation and help us continue our activities. [[Become a backer](https://opencollective.com/modular-admin-html#backer)]
diff --git a/bower.json b/bower.json
deleted file mode 100644
index a0734c6d..00000000
--- a/bower.json
+++ /dev/null
@@ -1,86 +0,0 @@
-{
- "name": "modular-admin-html",
- "version": "1.2.0",
- "devDependencies": {},
- "dependencies": {
- "animate.css": "~3.4.0",
- "font-awesome": "~4.7.0",
- "jquery": "~2.1.4",
- "jquery-flot": "~0.8.3",
- "flot.tooltip": "~0.8.5",
- "jquery-validation": "~1.14.0",
- "jquery.sparkline": "http://omnipotent.net/jquery.sparkline/2.1.2/jquery.sparkline.js",
- "jqvmap": "~1.4.0",
- "metisMenu": "~2.0.3",
- "morrisjs": "~0.5.1",
- "nprogress": "~0.2.0",
- "quill": "~0.20.1",
- "responsive-bootstrap-toolkit": "~2.5.0",
- "Sortable": "~1.4.2",
- "tether": "~1.3.7",
- "tinycolor": "~1.2.1",
- "dropzone": "~4.2.0",
- "jquery-touchswipe": "^1.6.18",
- "jquery.browser": "^0.1.0",
- "popper.js": "^1.12.3",
- "bootstrap": "v4.0.0-beta"
- },
- "overrides": {
- "bootstrap": {
- "main": [
- "dist/css/bootstrap.css",
- "dist/css/bootstrap-theme.css",
- "dist/js/bootstrap.js"
- ]
- },
- "font-awesome": {
- "main": [
- "./css/font-awesome.css",
- "./fonts/*"
- ]
- },
- "jquery-flot": {
- "main": [
- "jquery.flot.js",
- "jquery.flot.resize.js",
- "jquery.flot.pie.js",
- "jquery.flot.time.js"
- ]
- },
- "flot.tooltip": {
- "main": "js/jquery.flot.tooltip.js"
- },
- "jqvmap": {
- "main": [
- "dist/jqvmap.css",
- "dist/jquery.vmap.js",
- "dist/maps/jquery.vmap.world.js"
- ]
- },
- "animate.css": {
- "main": "animate.css"
- },
- "Sortable": {
- "main": [
- "Sortable.js",
- "jquery.binding.js"
- ]
- },
- "quill": {
- "main": [
- "dist/quill.js",
- "dist/quill.base.css",
- "dist/quill.snow.css"
- ]
- },
- "dropzone": {
- "main": [
- "dist/dropzone.css",
- "dist/dropzone.js"
- ]
- },
- "raphael": {
- "main": "raphael.js"
- }
- }
-}
diff --git a/build/config.js b/build/config.js
deleted file mode 100644
index da96398e..00000000
--- a/build/config.js
+++ /dev/null
@@ -1,10 +0,0 @@
-var path = require('path');
-
-module.exports = {
- rootDir: "../", // Root dir
- srcDir: path.resolve("../src"), // Source files
- destDir: path.resolve("../dist"), // Build destination
- bowerDir: "../bower_components", // Bower dir
- npmDir: "../node_modules", // Npm dir
- port: 4000
-};
\ No newline at end of file
diff --git a/build/gulpfile.js b/build/gulpfile.js
deleted file mode 100644
index 92727a0c..00000000
--- a/build/gulpfile.js
+++ /dev/null
@@ -1,93 +0,0 @@
-var glob = require('glob');
-var path = require('path');
-
-var gulp = require('gulp');
-var plugins = require('gulp-load-plugins')();
-
-var utils = require('./utils/utils');
-
-/********************************************
-* Configs And Paths
-*********************************************/
-
-var config = require('./config');
-
-var paths = {
- app: require('./paths/app'),
- vendor: require('./paths/vendor')
-};
-
-
-/********************************************
-* Load Build Tasks
-*********************************************/
-
-var buildTasks = utils.loadTasks(gulp, plugins, paths);
-
-gulp.task('build', buildTasks);
-
-/*********************************************
-* Other Tasks
-**********************************************/
-
-// Local server pointing on build folder
-gulp.task('connect', function() {
- plugins.connect.server({
- root: config.destDir,
- port: config.port || 3333,
- livereload: true
- });
-});
-
-
-// Rerun the task when a file changes
-gulp.task('watch', function() {
- // When template changes recompile .html pages
- plugins.watch(paths.app.templates, function() {
- gulp.start('app-pages');
- });
-
- // When context file changes recompile .html pages
- plugins.watch(config.srcDir + "/**/.context.js", function() {
- gulp.start('app-pages');
- });
-
- // When script changes recompile scripts
- plugins.watch(paths.app.scripts, function() {
- gulp.start('app-scripts');
- });
-
- // When style changes recompile styles
- plugins.watch(paths.app.styles, function() {
- gulp.start('app-styles');
- });
-
- // When theme changes recompile themes
- plugins.watch(paths.app.themes, function() {
- gulp.start('app-themes');
- });
-});
-
-// Builds and deploys to github pages
-gulp.task('deploy', ['build'], function() {
- return gulp.src('../dist/**/*')
- .pipe(plugins.ghPages({
- cacheDir: '../.deploy'
- }));
-});
-
-
-
-/********************************************
-* Main Tasks
-*********************************************/
-
-
-// // Run this task for development
-gulp.task('develop', [
- 'build',
- 'watch',
- 'connect'
-]);
-
-gulp.task('default', ['develop']);
\ No newline at end of file
diff --git a/build/paths/app.js b/build/paths/app.js
deleted file mode 100644
index ef7db8fe..00000000
--- a/build/paths/app.js
+++ /dev/null
@@ -1,101 +0,0 @@
-var path = require('path');
-
-var config = require('../config');
-
-var rootDir = config.rootDir;
-var srcDir = config.srcDir;
-var destDir = config.destDir;
-
-/***********************************************
-* Application script files
-************************************************/
-
- /*
- Specifiing the source this way means:
-
- "take all .js files except /_main/main.js file
- and then take /_main/main.js file"
-
- This ensures that main.js file is loaded in the end.
- Ignore context.js files.
- */
-
- exports.scripts = [
- srcDir + "/config.js",
- srcDir + "/**/!(_context|config|main|*-helper)*.js",
- srcDir + "/main.js",
- "!" + srcDir + "/_vendor/**"
- ];
-
-/***********************************************
-* Application style files
-************************************************/
-
- exports.styles = [
- srcDir + "/_main.scss",
- srcDir + "/**/!(_main|_variables|*-theme)*.scss",
- ];
-
-/***********************************************
-* Application theme files
-************************************************/
-
- exports.themes = srcDir + "/**/*-theme.scss";
-
-/***********************************************
-* Application template files
-************************************************/
-
- /*
- All template files in application.
- Those should registered as handlebars partials
- in order to use feature like includes or layouts
- */
-
- exports.templates = srcDir + "/**/*.hbs";
-
-/***********************************************
-* Application page files
-************************************************/
-
- /*
- Each page file represents a page which will be rendered into .html page.
- Pages can extend layouts.
-
- */
-
- exports.pages = srcDir + "/**/*-page.hbs";
-
-/***********************************************
-* Application layout files
-************************************************/
-
- /*
- Layouts are used for "wrapping" the content of individual pages with common elements,
- such as the and footer sections, which usually contain necessities
- such as and
-
-
- {{{body}}}
-
-
-
-
-
-
-
-
- {{!-- Google Analytics code if GOOGLE_ANALYTICS_ID id available --}}
- {{#if GOOGLE_ANALYTICS_ID}}
-
- {{/if}}
-
-
-
-