- View Demo | Download ZIP + View Demo | Download ZIP
-[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. +ModularAdmin is an open source **dashboard theme** built in a modular way. That makes it easy to scale, modify and maintain. +--- -## Download +## 📣 Heads up for the Modular Material Admin + React! -You can download this project in 2 different ways: download zip or ```git clone https://github.com/modularcode/modular-admin-html.git ```. +Currently I work on the Modular Admin ReactJS version, which uses **React**, **MaterialUI**, **Redux** and **TypeScript**. [**🎖 Star**](https://github.com/modularcode/modular-admin-react/stargazers) the project or [**👣 follow me on Twitter**](https://twitter.com/modularcoder) to stay up to date! -#### [Download ZIP](https://github.com/modularcode/modular-admin-html/releases/download/v1.0.1/modular-admin-html-1.0.1.zip) +**👉 [Support me on pateron](https://www.patreon.com/modularcoder) to make this happen! 👍** -The downloaded zip file will contain ```dist/``` folder which is compiled version of the project (with all scripts are merged together, processed styles and templates). You can use it as final result, but for development you should use aplication sources locaed in ```src/``` folder and rebuild the project. See [development](#development). +--- -**Warning!** all changes made in ```dist/``` folder would be overwriten on application build. -#### Git clone +## 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/latest) or Git Clone -Clone repository to the local `modular-admin-html` folder ``` git clone https://github.com/modularcode/modular-admin-html.git ``` +### 2. Build the project -The cloned repository desn't contain prebuilt version of the project and you need to build it, See [development](#development). - -## Other versions +The cloned/downloaded repository doesn't contain prebuilt version of the project and you need to build it. You need to have [NodeJs](https://nodejs.org/en/) (v8+) with npm (v3+) installed. -This is the HTML version, which is great for enhancing and integrating it into other platforms and environments. -AngularJS, Angular2, React and Meteor versions are coming soon. -### Table of contents - - * [Browser support](#browser-support) - * [Development](#development) - * [Folder structure](#folder-structure) - * [File types](#file-types) - * [Build tasks](#build-tasks) - * [Get in touch](#get-in-touch) +Install npm dependencies +``` +npm install +``` -------- +Build the project and start local web server +``` +npm start +``` -## Browser support +Open the project [http://localhost:4000](http://localhost:4000). -* Last 2 Versions FF, Chrome, IE 10+, Safari Mac -* IE 10+ -* Android 4.4+, Chrome for Android 44+ -* iOS Safari 7+ -Some of the components use the new Flexbox Layout module which is available in most modern browsers. Bootstrap4 is used as main framework. Please make sure that it's suitable for you: [Flexbox browser support](http://caniuse.com/#feat=flexbox). +**Warning!** all changes made in ```dist/``` folder would be overwriten on application build.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+## Sponsors
+
+Become a sponsor and get your logo on our README on Github with a link to your site. [[Become a sponsor](https://opencollective.com/modular-admin#sponsor)]
+
+
+
+
+
+
+
+
+
+
+
+
+### Credits
+
+* 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)
-
-## Hire Us?
-
-Do you have a great project? Need theme customization or intagration with back-end? Want to create something awesome?
-We may be available for hire. Just drop a message to [gevharut@gmail.com](mailto:gevharut@gmail.com) and let's talk.
diff --git a/bower.json b/bower.json
deleted file mode 100644
index 9ae69fc3..00000000
--- a/bower.json
+++ /dev/null
@@ -1,77 +0,0 @@
-{
- "name": "modular-admin-html",
- "version": "1.0.1",
- "devDependencies": {},
- "dependencies": {
- "animate.css": "~3.4.0",
- "bootstrap": "v4.0.0-alpha.2",
- "font-awesome": "~4.3.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.1.1",
- "tinycolor": "~1.2.1",
- "dropzone": "~4.2.0"
- },
- "overrides": {
- "bootstrap": {
- "main": [
- "dist/css/bootstrap.css",
- "dist/css/bootstrap-theme.css",
- "dist/js/bootstrap.js"
- ]
- },
- "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
index 92727a0c..066ce288 100644
--- a/build/gulpfile.js
+++ b/build/gulpfile.js
@@ -1,93 +1,88 @@
-var glob = require('glob');
-var path = require('path');
-var gulp = require('gulp');
+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')
-};
-
+var config = require('../config/');
+var paths = config.paths;
/********************************************
* Load Build Tasks
*********************************************/
-var buildTasks = utils.loadTasks(gulp, plugins, paths);
+// Dynamic Tasks with Gulp 4
+// https://cobwwweb.com/dynamic-tasks-gulp-4
+// With Gulp 4, it's not so simple.
-gulp.task('build', buildTasks);
+//var buildTasks = utils.loadTasks(gulp, plugins, paths);
+//gulp.task('build', buildTasks);
+
+const app_assets = require('./tasks/app-assets').task(gulp, plugins, paths);
+const app_pages = require('./tasks/app-pages').task(gulp, plugins, paths);
+const app_scripts = require('./tasks/app-scripts').task(gulp, plugins, paths);
+const app_styles = require('./tasks/app-styles').task(gulp, plugins, paths);
+const app_themes = require('./tasks/app-themes').task(gulp, plugins, paths);
+
+const vendor_assets = require('./tasks/vendor-assets').task(gulp, plugins, paths);
+const vendor_scripts = require('./tasks/vendor-scripts').task(gulp, plugins, paths);
+const vendor_styles = require('./tasks/vendor-styles').task(gulp, plugins, paths);
+
+const clean = (done) => {
+ // Error: Cannot delete files/directories outside the current
+ // working directory. Can be overridden with the `force` option.
+ return require('del')([config.destDir], { force: true });
+};
+
+const build = gulp.parallel(
+ gulp.parallel(app_assets, app_scripts, app_pages, gulp.series(app_styles, app_themes)),
+ gulp.parallel(vendor_assets, vendor_scripts, vendor_styles)
+);
/*********************************************
* Other Tasks
**********************************************/
// Local server pointing on build folder
-gulp.task('connect', function() {
- plugins.connect.server({
+const connect = () => {
+ return plugins.connect.server({
root: config.destDir,
port: config.port || 3333,
livereload: true
});
-});
-
+};
-// Rerun the task when a file changes
-gulp.task('watch', function() {
+const watch = (done) => {
// When template changes recompile .html pages
- plugins.watch(paths.app.templates, function() {
- gulp.start('app-pages');
- });
-
+ gulp.watch(paths.app.templates, app_pages);
// When context file changes recompile .html pages
- plugins.watch(config.srcDir + "/**/.context.js", function() {
- gulp.start('app-pages');
- });
-
+ gulp.watch(config.srcDir + "/**/.context.js", app_pages);
// When script changes recompile scripts
- plugins.watch(paths.app.scripts, function() {
- gulp.start('app-scripts');
- });
-
+ gulp.watch(paths.app.scripts, app_scripts);
// When style changes recompile styles
- plugins.watch(paths.app.styles, function() {
- gulp.start('app-styles');
- });
-
+ gulp.watch(paths.app.styles, app_styles);
// When theme changes recompile themes
- plugins.watch(paths.app.themes, function() {
- gulp.start('app-themes');
- });
-});
+ gulp.watch(paths.app.themes, app_themes);
+
+ done();
+};
// Builds and deploys to github pages
-gulp.task('deploy', ['build'], function() {
- return gulp.src('../dist/**/*')
+const deploy = () => gulp.series(build, () =>
+ gulp.src('../dist/**/*')
.pipe(plugins.ghPages({
cacheDir: '../.deploy'
- }));
-});
-
+ }))
+);
+module.exports.deploy = deploy;
/********************************************
* Main Tasks
*********************************************/
-
-// // Run this task for development
-gulp.task('develop', [
- 'build',
- 'watch',
- 'connect'
-]);
-
-gulp.task('default', ['develop']);
\ No newline at end of file
+// Run this task for development
+module.exports.build = build;
+module.exports.default = gulp.series(clean, build, gulp.parallel(watch, connect));
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
+ {{/if}}