Fully responsive multi-page template built on Bootstrap 4 stable version
Thank you for purchasing our item. If you have any questions that are beyond the scope of this help file, please feel free to email via our user page contact form here. Thanks so much!
Arion is a Admin Dashboard HTML5 Template that contains 40 pages. The template comes with beautiful vector graphics and icons that makes all the pages to look amazing across the retina devices.
The layout is developed on the bootstrap grid, which makes it easy to convert it into an adaptive html template, Angular, Vue, React.js, Laravel and other.
If you liked our template, please rate it for 5 stars, for us it is very important!
The general template structure is the same throughout the template. Here is the general structure.
<!DOCTYPE html> <html class="no-js" lang="en" data-theme="light"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="MobileOptimized" content="320" /> <meta name="HandheldFriendly" content="True" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Arion Admin Dashboard</title> <meta name="description" content="Arion — This is the best dashboard" /> <meta name="msapplication-tap-highlight" content="no" /> <meta name="mobile-web-app-capable" content="yes" /> <meta name="application-name" content="Arion — This is the best dashboard" /> <meta name="apple-mobile-web-app-title" content="Arion Admin Dashboard" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <link rel="stylesheet" href="css/bootstrap.min.css" /> <link rel="stylesheet" href="css/apexcharts.css" /> <link rel="stylesheet" href="css/tippy/tippy.css" /> <link rel="stylesheet" href="css/flatpickr.min.css" /> <link rel="stylesheet" href="css/select2.min.css" /> <link rel="stylesheet" href="css/quill/quill.snow.css" /> <link rel="stylesheet" href="css/quill/quill.core.css" /> <link rel="stylesheet" href="css/filepond.min.css" /> <link rel="stylesheet" href="css/filepond-plugin-image-preview.min.css" /> <link rel="stylesheet" href="css/swiper-bundle.min.css" /> <link rel="stylesheet" href="css/style.css" /> <link rel="apple-touch-icon" sizes="57x57" href="img/content/favicons/apple-icon-57x57.png" /> <link rel="apple-touch-icon" sizes="60x60" href="img/content/favicons/apple-icon-60x60.png" /> <link rel="apple-touch-icon" sizes="72x72" href="img/content/favicons/apple-icon-72x72.png" /> <link rel="apple-touch-icon" sizes="76x76" href="img/content/favicons/apple-icon-76x76.png" /> <link rel="apple-touch-icon" sizes="114x114" href="img/content/favicons/apple-icon-114x114.png" /> <link rel="apple-touch-icon" sizes="120x120" href="img/content/favicons/apple-icon-120x120.png" /> <link rel="apple-touch-icon" sizes="144x144" href="img/content/favicons/apple-icon-144x144.png" /> <link rel="apple-touch-icon" sizes="152x152" href="img/content/favicons/apple-icon-152x152.png" /> <link rel="apple-touch-icon" sizes="180x180" href="img/content/favicons/apple-icon-180x180.png" /> <link rel="icon" type="image/png" sizes="192x192" href="img/content/favicons/android-icon-192x192.png" /> <link rel="icon" type="image/png" sizes="32x32" href="img/content/favicons/favicon-32x32.png" /> <link rel="icon" type="image/png" sizes="96x96" href="img/content/favicons/favicon-96x96.png" /> <link rel="icon" type="image/png" sizes="16x16" href="img/content/favicons/favicon-16x16.png" /> <!-- <link rel="manifest" href="img/content/favicons/manifest.json" />--> <meta name="msapplication-TileColor" content="#ffffff" /> <meta name="msapplication-TileImage" content="/ms-icon-144x144.png" /> <meta name="theme-color" content="#ffffff" /> </head> <body class="page-home"> <svg xmlns="http://www.w3.org/2000/svg" style="border: 0 !important; clip: rect(0 0 0 0) !important; height: 1px !important; margin: -1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; width: 1px !important;" class="root-svg-symbols-element"> <symbol id="icon-action" viewBox="0 0 22 22"> <path d="M14.2 6.6H6.2V5L3 7.8L6.2 10.6V9H14.2V6.6ZM19 13.4L15.8 10.6V12.2H7.8V14.6H15.8V16.2L19 13.4Z" /> </symbol>
Main template features
In the zip package you download you will find 2 folders: HTML and DOCUMENTATION.
| Plugin Name | Description |
|---|---|
Bootstrap |
Quickly design and customize responsive mobile-first sites with Bootstrap, the world’s most popular front-end open source toolkit, featuring Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful JavaScript plugins. |
jQuery |
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. |
ECharts |
A Declarative Framework for Rapid Construction of Web-based Visualization |
Apexcharts.js |
FusionCharts offers additional visualizations for your dashboards including: |
Quilljs |
Your powerful rich text editor. WYSIWYG editor built for the modern web. With its modular architecture and expressive API, it is completely customizable to fit any need. |
Here's a list of the stylesheet files we are using with this template, you can find more information opening each file:
| File Name | Description |
|---|---|
"css/bootstrap.min.css" |
|
"css/apexcharts.css" |
|
"css/filepond-plugin-image-preview.min.css" |
|
"css/filepond.min.css" |
|
"css/flatpickr.min.css" |
|
"css/select2.min.css" |
|
"css/swiper-bundle.min.css" |
|
"css/tippy.css" |
|
"css/tippy/animations/" |
Plugins for tippy for animation tooltips |
"css/quill.core.css" |
|
"css/quill.bubble.css" |
Theme plugin for quill |
"css/quill.snow.css" |
Theme plugin for quill |
"css/style.css" |
Main Stylesheet of the template - where you will find most of the customizable CSS. |
Here's a list of the javascript files we are using with this template.
| Plugin Filename | Description |
|---|---|
"js/gsap/gsap.min.js""js/gsap/ScrollToPlugin.min.js""js/gsap/ScrollTrigger.min.js" |
Professional-grade JavaScript animation for the modern web |
"js/vendor/popper.min.js"
|
Tooltip & Popover Positioning Engine |
"js/vendor/popper.min.js"
|
Tooltip & Popover Positioning Engine |
"js/vendor/jquery.min.js"
|
jQuery library. |
"js/vendor/popper.min.js"
|
|
"js/vendor/bootstrap.bundle.min.js"
|
Bootstrap's javascript file. |
"js/vendor/imagesloaded.pkgd.min.js"
|
Checks if all images are loaded or confirmed broken. That allows to build masonry grid correctly. |
"js/vendor/grid/masonry.pkgd.min.js"
|
Creates photo portfolio layout. |
"js/vendor/grid/isotope.pkgd.min.js"
|
Filters portfolio categories. |
"js/vendor/swiper-bundle.min.js"
|
Most Modern Mobile Touch Slider. |
js/vendor/calendar/flatpickr/flatpickr.min.js
|
flatpickr is a lightweight and powerful datetime picker. |
js/vendor/charts/apexcharts/apexcharts.min.js
|
|
js/vendor/charts/circle-progress.min.js
|
|
js/vendor/charts/echarts.common.min.js
|
|
js/vendor/cleave/cleave.min.js
|
|
js/vendor/editor/quill.min.js
|
|
js/vendor/filepond/filepond.min.js
|
A JavaScript library that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user experience. |
js/vendor/filepond/filepond-plugin-image-preview.min.js
|
Extends plugin |
js/vendor/jqvmap/jquery.vmap.min.js
|
jQuery Vector Map |
js/vendor/jqvmap/jquery.vmap.sampledata.js
|
|
js/vendor/jqvmap/jquery.vmap.world.js
|
|
js/vendor/scrollmagic/ScrollMagic.min.jsjs/vendor/scrollmagic/debug.addIndicators.min.js
|
The javascript library for magical scroll interactions. |
js/vendor/select2.min.js
|
The jQuery replacement for select boxes |
js/vendor/simplebar.min.js
|
SimpleBar does only one thing: replace the browser's default scrollbar with a custom CSS-styled one without losing performances. |
js/vendor/tippy-bundle.umd.min.js
|
Tippy.js is the complete tooltip, popover, dropdown, and menu solution for the web |
js/components.js" |
The file that contains all the components Functions constructors. |
js/common.js" |
js file for components initialization. |
We've used the following images, icons or other files as listed.
Note: Images you may have seen in the live preview are not included in the final item purchase.
Once again, thank you so much for purchasing this item. As we said at the beginning, we'd be glad to help you if you have any questions relating to this item. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.
Our profile page - http://themeforest.net/user/netgon