:: Aqua :: Documentation

Getting Started

Aqua is carefully well thought UI frame work that is built on top of Bootstrap 5, This part of the doc will help you to quickly start your project and will you a basic idea about how aqua work.

aqua is a fully responsive and premium Bootstrap 5 Admin & Dashboard Template. Whether you're creating a Web App, Dashboards, Admin Panels, Project App, Analytics Admin, CRM, or SASS-based interface then you are at the right place to buy aqua admin dashboard template.

Installation

Grunt is a JavaScript task runner, a tool used to automatically perform frequent tasks such as minification, compilation, unit testing, and linting. It uses a command-line interface to run custom tasks defined in a file.

Quick start Grunt

Installing Grunt: Run npm install grunt --save-dev command from your teminal to install grunt within your project.

Grunt Sass: Run grunt sass command from your project directory. It will compile SASS to CSS for the project. This will read the file assets/scss/filename.scss and output a plain-css file to /assets/css/filename.css.

Grunt JSHint: Run grunt jshint command from your project directory. It will checks all *.js files under assetsjs/filename for common syntax or coding errors using the JSHint utility.

Grunt Sprite: Run grunt sprite command from your project directory.

Further help: To get more help on the grunt checkout Grunt

Note: However, any SASS code you write must be able compile via Grunt as well.It will generate pre-compiled javascript templates. Reads all the *.html files from assets/js/filename and outputs assets/js/filename.templates.js. Template.js will contains code of UI design and will be change each time you build solution through above command.

HTML Quick Start

Open the .html file from one of the above HTML folders inside one of your browsers
That's it, no other configuration needed

Folder Structure

dist
- assets
  - bundles
  - css
  - fonts
  - img
  - js
  - scss
    - bootstrap
    - global
    - vendor
    - widgets
    - _bootstrap.scss
    - _global.scss
    - _vendor.scss
    - _widgets.scss
    - style.scss
  - vendor - Third party plugins
- Docs
- partials
- index.html
- More HTML pages
- node_modules ( NPM dependencies (by default the folder is not included) npm installs dependencies. )
- Gruntfile.js
- package.json
- README.md

Theme Configurations

Theme color scss file path: aqua/src/assets/global/_themes.scss you can change as per your project/client requirements.

Theme light/dark version you can changes in HTML tage data-theme="light", data-theme="dark"

.bg-primary
.bg-accent

.theme-color1
.theme-color2
.theme-color3
.theme-color4
.theme-color5
.theme-color6

<!-- Primary theme colors -->
--primary-color: 		#D63B38;
--accent-color: 		#8467cb;	
--secondary-color: 		#1a2022;	

--theme-color1:	 		#da3164;
--theme-color2: 		#ce3c8d;
--theme-color3: 		#b152b1;
--theme-color4: 		#8467cb;
--theme-color5: 		#9aa9e0;
--theme-color6: 		#314674;

--primary-gradient: linear-gradient(-45deg, var(--primary-color), var(--secondary-color));

Template Features

Vendor Plugin

Below is the list of all plugins used to power this template.

Name	Version & Link
Data Table	Version: ^1.13.5 Official Link: https://datatables.net/
owl Carousel	Version: ^2.3.4 Official Link: https://owlcarousel2.github.io/OwlCarousel2/
Summernote	Version: ^0.8.20 Official Link: https://summernote.org/
Fancybox	Version: ^2.1.5 Official Link: http://fancybox.net/
Full Calendar	Version: ^6.1.14 Official Link: https://fullcalendar.io/
tui Calendar	Version: ^1.15.3 Official Link: https://ui.toast.com/tui-calendar
Dropify	Version: ^0.2.2 Official Link: https://dropify.shop/
jkanban	Version: ^1.3.1 Official Link: https://www.jointjs.com/
Tagify	Version: ^4.26.5 Official Link: https://yaireo.github.io/tagify/
jsGrid	Version: ^1.5.3 Official Link: http://js-grid.com/
Masonry Gallery	Version: ^4.2.2 Official Link: https://masonry.desandro.com/
Nestable	Version: ^0.8.0 Official Link: https://dbushell.github.io/Nestable/
Pure Counter	Version: ^2.1.0 Official Link: https://github.com/srexi/purecounterjs
Table Dragger	Version: ^1.0.3 Official Link: https://sindu12jun.github.io/table-dragger/
Swiper	Version: ^10.0.4 Official Link: https://swiperjs.com/
js Preadsheet	Version: ^4.13.3 Official Link: https://jspreadsheet.com/
Rating	Version: ^1.2.2 Official Link: https://antennaio.github.io/jquery-bar-rating/

Thank you!

All the important stuff - compiling the source, file structure, build tools, file includes - is documented here, but should you have any questions, always feel free to reach out to [email protected]

Set Theme Color

More App Setting