Andiamo Admin Template

Andiamo v1.0.0 - Fomantic-Ui Based Admin Template

Andiamo, a modern and clean premium quality dashboard template based on Fomantic-ui using concept driven and minimal design. Its well optimized with mobile first responsive approach. Andiamo built using SASS preprocessor, HTML5, CSS3, Pug, Gulp, Bower, and help of usefull jQuery plugins. You can use this template for any kind of dashboard project. Fomantic-ui is a continuation of Semantic-ui. Semantic-Ui Realese is stopped. Fomantic-ui team continue on release

💰 Fully responsive (Mobile, Tablet, Desktop)

🔥 7 Dashboard

⚡️️ Well documented (Both online and offline)

🔥 Easy to customise

💯 Light / Dark Mode

💯 Flexible Charts and Maps

💯 Custom design for DataTables

💯 Developed with Gulp,Pug,Bower,Sass

🔥 FREE Lifetime Updates

🤖 Support by Partitect TEAM

🚀 Developable and Customizable

This project is an opinionated build automation for front-end web development based on Gulp, Node, NPM,Babel, Sass, and Pug.

Pug compilation with gulp-pug

Bower Packages Manager bower

Tidy Html files with gulp-prettier

Concatinate the Javascript files with gulp-include

Sass compilation with gulp-sass

Es6 transpilation with gulp-babel

Auto-refresh browser with browser sync

Minification (Clean CSS and Uglify)

Autoprefix CSS with Autoprefixer

Better error messages in gulp with Plumber

Compress images with Image min

Show compiled file size with gulp-size in development mode

Output project files in zip file for TemplateMonster production with gulp-zip

1- Buy this template and send access request for Andiamo github repo

2- Update this files

...
"name": "andiamo",
"version": "1.0.0"
"documentation": "docs",
"browserlist": "supported browser list"
...

...
// for TemplateMonster theme
const  isTemplatemonsterTheme  =  false;
// if production mode is active. -> false: developement mode
const  isProduction  =  false;
// if minified file included in production
const  minifiedFileInclude  =  false;
...

3- Install the project dependencies

cd andiamo
yarn install or npm install

4- Develop awesome things

npm start or yarn start or gulp

Files and Folders

📁 assets
│───📁 css
│   │──  🦄 app.css
│   │──  🦄 app.min.css
│───📁 data
│   │──  📁 maps
│   │──  │──  💾 world.json
│   │──  │──  💾 europe.json
│   │──  │──  💾 africa.json
│   │──  │──  💾 asia.json
│   │──  │──  💾 australia.json
│   │──  │──  💾 usa.json
│   │──  │──  💾 china.json
│   │──  │──  💾 russia.json
│   │──  │──  💾 ...other data files
│───📁 fonts
│   │──  📁 open-sans
│   │──  📁 muli
│   │──  📁 iconfont
│   │──  📁 food-icon
│   │──  📁 ...other fonts
│───📁 img
│   │──  📁 store-img
│───📁 js
│   │──  📁 vendors
│   │──  │──  📁 charts
│   │──  │──  │── ✨ alert.js
│   │──  │──  │── ✨ alert.min.js
│   │──  │──  │── ✨ analystic-dashboards.js
│   │──  │──  │── ✨ analystic-dashboards.min.js
│   │──  │──  │── ✨ calendar.js
│   │──  │──  │── ✨ calendar.min.js
│   │──  │──  │── ✨ ...other script files
│   │──  ✨ app.js
│   │──  ✨ app.min.js
│───📁 vendors
│   │──  📁 echarts
│   │──  │──  📁 dist
│   │──  │──  │── ✨ echarts-en.min.js
│   │──  📁 fomantic-ui
│   │──  │──  📁 dist
│   │──  │──  │── 📁 components
│   │──  │──  │── 📁 themes
│   │──  │──  │── 🦄 semantic.min.css
│   │──  │──  │── ✨ semantic.min.js
│   │──  ...other bower packages
│───📁 docs
│   │──  📄 README.md
│   │──  📄 changelog.md
│   │──  🌐 home-dashboard.html
│   │──  ...other document files
🌐 home-dashboard.html
🌐 crypto-dashboard.html
🌐 sale-dashboard.html
🌐 cards.html
🌐 buttons.html
🌐 gallery.html
...other html pages

-Buy and Download Andiamo Template

-Extract main files

-Open dist folder

-Open home-dashboard.html with browser

<!-- Default Scripts -->
<script src="assets/vendors/jquery/dist/jquery.min.js"></script>
<script src="assets/vendors/fomantic-ui/dist/semantic.min.js"></script>
<script src="assets/vendors/echarts/dist/echarts-en.min.js"></script>
<script src="assets/vendors/jquery-slimscroll/jquery.slimscroll.min.js"></script>
<script src="assets/vendors/waves/dist/waves.min.js"></script>
<script src="assets/vendors/clipboard/dist/clipboard.min.js"></script>
<script src="assets/vendors/prism/prism.js"></script>
<script src="assets/vendors/prism/plugins/normalize-whitespace/prism-normalize-whitespace.min.js"></script>
<script src="assets/vendors/prism/plugins/toolbar/prism-toolbar.min.js"></script>
<script src="./assets/js/vendors/right-sidebar-charts.min.js"></script>
<script src="./assets/js/vendors/prism-script.min.js"></script>
<script src="./assets/vendors/echarts/map/js/world.js"></script>
<script src="./assets/js/vendors/home-dashboard.min.js"></script>
<script src="./assets/fonts/svg-icon/weather/iconfont.js"></script>
<script src="assets/js/app.min.js"></script>

<!-- Example Gallery Page Scripts - gallery.html -->
<script src="assets/vendors/lightgallery/dist/js/lightgallery-all.min.js"></script>
<script src="assets/vendors/color-thief/dist/color-thief.min.js"></script>
<script src="./assets/js/vendors/gallery.min.js"></script>

<link rel="stylesheet" href="assets/vendors/fomantic-ui/dist/semantic.min.css" />
<link rel="stylesheet" href="assets/vendors/waves/dist/waves.min.css" />
<link id="iconfont" rel="stylesheet" href="assets/fonts/andiamo-icons/iconfont.css" />
<link id="iconfont" rel="stylesheet" href="assets/fonts/iconfont/iconfont.css" />
<link rel="stylesheet" href="assets/css/app.min.css" />

<!-- lightgallery.js style-->
<link rel="stylesheet" href="assets/vendors/lightgallery/dist/css/lightgallery.min.css" />
<link rel="stylesheet" href="assets/vendors/lightgallery/dist/css/lg-transitions.min.css" />

:root {
	--primary-color: #963cff;
	--primary-light-color: #cd6fff;
	--primary-dark-color:#5e00cb;
	--secondary-color:#ff2bed;
	--secondary-light-color:#ff6fff;
	--secondary-dark-color:#c800ba;
	--primary-text-color:#fff;
	--secondary-text-color:#fff;
	--font-color: #424242;
	--font-color-rgb:66,66,66;
	--bg-color: #fff;
	--link-color:rgb(0,99,248);
	--heading-color: #292922;
	--anti-dark-color:#292922;
	--partials-bg-color: #fff;
	--content-bg-color: #EFEFF5;
	--btn-primary: 150,60,255;
	--btn-success: 6,194,112;
	--btn-danger: 255,40,130;
	--btn-info: 0,99,248;
	--btn-lightInfo: 0,207,201;
	--btn-warning: 255,136,1;
	--btn-light:235,234,239;
	--btn-energy:255,204,0;
	--semi-transparent-bg:255,255,255;
	--rgb-white:0,0,0;
	//extra colors
	--loader-bg:rgba(0,0,0,.8);
	--quetzal-green:#006965;
}
[data-theme="dark"] {
	--primary-color: #FF2BED;
	--secondary-color: #ff2bed;
	--font-color: #e1e1ff;
	--anti-dark-color:#fff;
	--link-color:#91ADD4;
	--font-color-rgb:225,225,255;
	--bg-color: #111111;
	--heading-color: #818cab;
	--partials-bg-color: #202529;
	--btn-primary: 150,60,255;
	--btn-success: 6,194,112;
	--btn-danger: 255,40,130;
	--btn-info: 0,99,248;
	--btn-lightInfo: 0,207,201;
	--btn-warning: 255,136,1;
	--btn-light:235,234,239;
	--btn-energy:255,204,0;
	--content-bg-color: #32383D;
	--semi-transparent-bg:0,0,0;
	--rgb-white:255,255,255;
	--loader-bg:rgba(255,255,255,.8);
}

Name	Packages Url	Licence
Jquery	https://jquery.com/download/	MIT
Echarts	https://github.com/apache/incubator-echarts	Apache-2.0 License
docsify.js	https://github.com/docsifyjs/docsify	MIT
Echarts	https://github.com/moment/moment/	MIT
Echarts-Liquidfill	https://github.com/ecomfe/echarts-liquidfill	BSD-3-Clause License
waves	https://github.com/fians/Waves.git	MIT
datatables	https://github.com/DataTables/DataTables	MIT
jquery-ui	https://github.com/jquery/jquery-ui	MIT
sly	https://github.com/darsain/sly	MIT
color-thief	https://github.com/lokesh/color-thief	MIT
imagesloaded	https://github.com/desandro/imagesloaded	MIT
lightgallery	https://github.com/sachinchoolur/lightGallery	GPL-3.0 License
clipboard	https://github.com/zenorocha/clipboard.js	MIT
prism	https://github.com/PrismJS/prism	MIT
fullcalendar	https://github.com/fullcalendar/fullcalendar	MIT
jquery-slimscroll	https://github.com/rochal/jQuery-slimScroll	MIT

🎉 Initial Release

Andiamo Admin Documents