# Getting Started This part of the doc will help you to quick start your project and will you a basic idea about how Atmos admin is structured. After you unzip the package received from themeforest you will have the following in the extracted folder. ![](https://621507229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LMWvbwDSTI9_skSMXwK%2F-LYaJa2acszE4DVC8G0e%2F-LYaJcA3U_v_9FwbQ3LU%2FScreenshot%202019-02-13%20at%202.01.17%20AM%20\(1\).png?alt=media\&token=1ac85311-c64a-417b-8b31-285f446e0918) ### Folders: #### Demo demo folder consist of demo pages available on live site. which can be used for reference for your project.we do not recommend to start your project from demo files. #### Getting Started Folder Open the `getting started` folder, select a theme default or light to proceed with developing\ check build section of docs for running via gulp {% hint style="info" %} For any support related queries just write us at with your purchase code {% endhint %} # Gulp gulp is a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something. ## Installing Gulp To install gulp first you must have [NodeJs installed](http://nodejs.org/download/), NodeJS will have npm (node packaged modules)\ Run the following commands to get started * Navigate to Getting Started folder open the folder with default or light of your choice to begin * Install `gulp` by running the following command `npm install` * Now Run `gulp` it will open browser will address ``` npm install ``` ``` gulp default ``` {% hint style="danger" %} To use gulp version 4, head to Gulp 4 section {% endhint %} {% hint style="warning" %} it will open browser display cannot **Cannot GET /** . please navigate to to view the blank file, as there is no index file in getting started folder {% endhint %} {% hint style="success" %} Compilation of resources will create `atmos.min.css` and `atmos.min.js`in `assets/css` and `assets/js`folder respectively. {% endhint %} ### Commands **gulp build** ``` gulp build ``` This will automatically minify your assets resources like css and js into respective folders **gulp watch** ``` gulp watch ``` This will automatically compile the scss and js file files on save {% hint style="info" %} `scss` source files are present in `assets/src` folder, while js files are default available at `assets/js/atlas.js` {% endhint %} ## Troubleshooting if encounter problems with installing dependencies or running Gulps commands, first delete the `/node_modules/` directory generated by `npm`. Then, rerun `npm install`. {% hint style="info" %} Please use gulp version 3.9.1\ `npm install gulp@3.9.1 --save` {% endhint %} # Gulp 4 To use gulp version 4 use the following files {% hint style="info" %} Please replace the gulpfile.js and package json file in the folder. make sure delete package-lock.json and node\_modules {% endhint %} {% tabs %} {% tab title="Package.json" %} ```javascript { "name": "atmos-admin-panel", "version": "1.0.0", "description": "A beautiful Design System build on Bootstrap 4.", "main": "gulpfile.js", "author": "atomui.com", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "devDependencies": { "@babel/core": "^7.11.6", "@babel/preset-env": "^7.11.5", "browser-sync": "^2.26.12", "gulp": "^4.0.2", "gulp-autoprefixer": "^7.0.1", "gulp-babel": "^8.0.0", "gulp-cached": "^1.1.1", "gulp-clean": "^0.4.0", "gulp-clean-css": "^4.3.0", "gulp-file-include": "^2.2.2", "gulp-gh-pages": "^0.5.4", "gulp-html-extend": "^1.1.6", "gulp-if": "^3.0.0", "gulp-markdown": "^5.1.0", "gulp-npm-dist": "^1.0.3", "gulp-replace": "^1.0.0", "gulp-sass": "^4.1.0", "gulp-uglify": "^3.0.2", "gulp-useref": "^4.0.1" } } ``` {% endtab %} {% tab title="gulpfile.js" %} ``` const autoprefixer = require('gulp-autoprefixer'); const babel = require('gulp-babel'); const browsersync = require('browser-sync').create(); const clean = require('gulp-clean'); const cleancss = require('gulp-clean-css'); const gulp = require('gulp'); const sass = require('gulp-sass'); const rename = require('gulp-rename'); // Extra included dependencies const {src, task}= require('gulp'); const paths = { src: { html: { files: './src/html/**/*.html', }, js: { files: './src/js/**/*.js' }, scss: { files: './assets/scss/atmos.scss' }, }, dist: { base: { dir: './' }, css: { dir: 'assets/css', files: 'assets/css/**/*.css', minFiles: 'assets/css/**/*.min.css', }, html: { files: 'dist/**/*.html' }, js: { dir: 'dist/assets/js', files: 'dist/assets/js/**/*.js', minFiles: 'dist/assets/js/**/*.min.js' }, }, node: { dir: './node_modules' }, package: { files: './package.json' } }; gulp.task('browsersync', callback => { browsersync.init({ server: { baseDir: paths.dist.base.dir, // Added so that we can have the server use base urls vs requiring .html serveStaticOptions: { extensions: ["html"] } } }); callback(); }); gulp.task('browsersyncReload', callback => { browsersync.reload(); callback(); }); gulp.task('clean', () => { return gulp.src([paths.dist.css.dir, paths.dist.html.files, paths.dist.js.dir, paths.dist.libs.dir], { allowEmpty: true, read: false }) .pipe(clean()); }); gulp.task('clean', () => { return gulp.src([paths.dist.css.dir], { allowEmpty: true, read: false }) .pipe(clean()); }); gulp.task('clean:js', () => { return gulp.src([paths.dist.js.files, `!${paths.dist.js.minFiles}`], { read: false }) .pipe(clean()) }); gulp.task('js', () => { return gulp .src(paths.src.js.files) .pipe(babel({ presets: ['@babel/preset-env'] })) .pipe(gulp.dest(paths.dist.js.dir)) }); gulp.task('scss', () => { return gulp .src(paths.src.scss.files) .pipe(sass().on('error', sass.logError)) .pipe(autoprefixer()) .pipe(cleancss()) .pipe(rename("atmos.min.css")) .pipe(gulp.dest(paths.dist.css.dir)) .pipe(browsersync.stream()); }); gulp.task('watch', () => { gulp.watch([paths.src.html.files], gulp.series('browsersyncReload')); gulp.watch(paths.src.scss.files, gulp.series('scss')); }); gulp.task('default', gulp.series('clean', gulp.parallel( 'scss'), gulp.parallel('browsersync', 'watch'))); ``` {% endtab %} {% endtabs %} # Page Structure ### Using Blank template You can start your project by using `blank.html` in getting started folder. it comes with default navigation and few sidebar links to begin with. {% content-ref url="/pages/-LUEX6g9LXwV32PvafVv" %} [blank template Markup](/starter-template/blank) {% endcontent-ref %} ### By using Includes #### CSS Includes ```markup ``` #### JS Includes ```markup ``` # Sass Modules > Sass is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions. sass is default compiler for Bootstrap v4. Atlas supports and extends Bootstraps sass variables and modules to build the admin interface ### Module {% hint style="info" %} Following is the list of sass modules in the .*`/src/theme/`* folder you can tweak and compile the modules according to your needs. {% endhint %} | Module Name | Description | | ----------- | ----------------------------------------------------------------------- | | alert | Classes for creating pinned alerts on the page & border style alerts | | badge | Contains tweak for bootstrap badges with soft variants | | buttons | Extends bootstrap button class for more options like rounded, ghost etc | | border | For different border styles | | cards | Bootstrap cards over-written classes with card-controls styles | | dropdown | Overriding some of dropdown menu properties, notification menu styles | | forms | Form related classes including form dark options | | modal | Extending bootstrap modal classes with more styles | | table | All table related classes | | tab | Adding line tab to existing bootstrap Tabs module | | typography | Contains all typo related styles | | accordion | Bootstrap accordions with variation | | avatar | Contains style for avatars | | loader | Styles for loading effect on cards | | timeline | Contains variations for timeline pages large and small | | sidebar | Sidebar classes with side menu options | | layout | Contains layout for page like page header and main | | spacing | contains spacing and margin options | | sizing | Contains classes for page heights from 10vh to 100vh | | panel | Flex panels used for chat and mail apps | | Chat | Contains css related to chat app | | kanban | Contains css related to kanban app | | guide | Contains css related to guide app | | mail | Contains css related to mail app | | background | Additional background classes | | grid-xlg | Grid for extra large devices greater than 1800px | | helper | Miscellaneous helper classes | | demo | For demo purpose can be removed | # Colors ### Site Colors Every color used throughout the theme has been generated by using color variables defined at `_variables.scss` . you can customize the colors by changing the values of variables. ![site colors](https://621507229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LMWvbwDSTI9_skSMXwK%2F-LUEoae0LGv4oz-ex593%2F-LUEpJ_lY71r984PvyD-%2Fimage.png?alt=media\&token=0c1361c6-6388-4754-954c-b38b99b8a1e3) ### Gray Shades ![gray colors from gray-100 to gray-900](https://621507229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LMWvbwDSTI9_skSMXwK%2F-LUEpTZSrsyX2MnLhHro%2F-LUEpmbtxtIZe5qdxvt3%2Fimage.png?alt=media\&token=6fdc7769-5117-4838-bfb2-c4dc1e55a0bb) ### Chart Colors Atmos comes with preselected chart colors ```javascript window.colors = [ "#687ae8", "#12bfbb", "#ffb058", "#2991cf", "#87b8d4", "#109693", "#f29494", "#527cf9", "#7140d1", "#e79e4e", "#52b4ee", "#6ed7e0", "#8fa6b4", "#ffcfcf", "#28304e", "#95aac9", "#f2545b", "#f7bc06", "#00cc99", "#19b5fe", "#E3EBF6" ]; ``` {% hint style="info" %} Chart colors are stored in color array in `atmos.js` file located in `assets/js` folder {% endhint %} ![](https://621507229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LMWvbwDSTI9_skSMXwK%2F-LUEqwyPn3eAo68Vcktk%2F-LUErCDXQfwgYg4U96eq%2Fimage.png?alt=media\&token=2b042350-253e-45df-b7fd-964716d2bc4f) # Buttons Buttons follow the same contextual classes as of bootstrap with additional modifiers.
```markup ``` ### Rounded Buttons
```markup ``` ### Button Badge badges can be combined with buttons following is an example of badges with soft version of their color you can also use non soft color variation like `badge-primary`
```markup ``` ### Rounded Circle Buttons
```markup ``` # Icons Atmos comes bundled with 1500+ material design icons which are available from . To use the icons include the following css file ```markup ``` #### ### Mapped Icons we have used material icons as default icon family in atlas. you can change the icons used in atlas by changing values in variables ```css //Icons $icon-font: 'Material Design Icons'; //Icon Mappings $icon-chevron-down: "\F140"; $icon-chevron-up: "\F143"; $icon-chevron-left: "\F141"; $icon-chevron-right: "\F142"; $icon-sidebar-pin: "\F930"; $icon-sidebar-pin-off: "\F92F"; $icon-search: "\F349"; $icon-arrow-right: "\F054"; $icon-arrow-left: "\F04D"; $icon-close: "\F156"; $icon-close-circle: "\F15a"; $icon-check: "\F12c"; $icon-check-circle: "\F5e0"; $icon-circle: "\F130"; $icon-fullscreen: "\F293"; $icon-fullscreen-close: "\F294"; $icon-reload: "\F453"; $icon-menu: "\F35C"; ``` # Cards Cards inherit the same properties as bootstraps default cards. we have tuned it to match the scheme of admin panel ### Default card ```markup
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem cupiditate deleniti dolore exercitationem explicabo facere ipsa itaque iusto, maiores minima modi molestias nobis optio provident quas repudiandae tempore temporibus, voluptatem.

Link
``` ### Card with controls ```markup
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem cupiditate deleniti dolore exercitationem explicabo facere ipsa itaque iusto, maiores minima modi molestias nobis optio provident quas repudiandae tempore temporibus, voluptatem.

Link
``` ### Card with scrolling body ```markup
Scrollable Card

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem cupiditate deleniti dolore exercitationem explicabo facere ipsa itaque iusto, maiores minima modi molestias nobis optio provident quas repudiandae tempore temporibus, voluptatem.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem cupiditate deleniti dolore exercitationem explicabo facere ipsa itaque iusto, maiores minima modi molestias nobis optio provident quas repudiandae tempore temporibus, voluptatem.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem cupiditate deleniti dolore exercitationem explicabo facere ipsa itaque iusto, maiores minima modi molestias nobis optio provident quas repudiandae tempore temporibus, voluptatem.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem cupiditate deleniti dolore exercitationem explicabo facere ipsa itaque iusto, maiores minima modi molestias nobis optio provident quas repudiandae tempore temporibus, voluptatem.

Link
``` {% hint style="info" %} for card scrolling to work you need to define height to `card-body` default is set to `350px` in`card.scss` {% endhint %} # Alerts ### Default Alerts ```markup ``` ### Dismissable Alerts ```markup ``` ### Bordered Alerts
```markup ``` ### Pinned Alerts These alerts are pinned to body when they are trigger. they can be used for delivering contextual notifications on the panel ```javascript $('.admin-content').alertNotify({ message: "Alert Message it can contain html Danger", type: "danger", //primary,danger,success,info,warning dismiss: true // can be dismissed or not }); ``` # Modals Modals are created using Bootstrap Native Modals, they will work as the same way how it works in bootstrap. To run a Bootstrap Modal, there is no dependencies, you do not have to include extra JS or CSS files,To add a modal please refer following guidelines. {% embed url="" %} ### Modal Variations we extended more options to bootstrap modals by adding different positioning classes to the modal to use it. #### Slide right modal Simply add the class `modal-slide-right` to main modal DIV Your HTML tag structure should look like this. You can change the id attribute of the modal to anything you want. ```markup ``` #### Slide left Simply add the class `modal-slide-left` to main modal DIV Your HTML tag structure should look like this. You can change the id attribute of the modal to anything you want. ```markup ``` ### Modal Positions we extended more options to bootstrap modals by adding different positioning classes to the modal to use it. ```markup ``` #### Position Options: Simply add the class `positionclass` to main modal DIV Your HTML tag structure should look like this. You can change the id attribute of the modal to anything you want. | Position class | Position | | ------------------- | ------------------ | | modal-top-left | page top left | | modal-top-right | page top right | | modal-bottom-left | page bottom left | | modal-bottom-right | page bottom right | | modal-bottom-center | page bottom center | ### Calling a Modal ```markup ``` {% hint style="success" %} Atmos modal inherits bootstrap 4 modal methods and events. {% endhint %} # Avatar Create and group avatars of different sizes and shapes with a single component. ### Avatar Sizes
```markup
...
...
...
...
...
...
``` ### Avatar with text placeholders
```markup
AR
EQ
VV
SM
XS
SS
``` ### Avatar Status
```markup
...
...
...
...
``` ### Avatar Group
```markup
...
...
...
...
AB
``` ### Avatar Shape
```markup
...
...
...
``` ### Avatar as file picker in forms You can avatar file picker, this comes handy when you want to create profile picture updating scenarios
#### Markup ```markup ``` #### JS Code for picker ```javascript function readFile(input) { if (input.files && input.files[0]) { var reader = new FileReader(); reader.onload = function (e) { $(input).parents('.avatar-input').find('.avatar-img').attr('src', e.target.result); }; reader.readAsDataURL(input.files[0]); } } $('.avatar-file-picker').on('change', function () { readFile(this); }); ``` {% hint style="info" %} Please note file picker does not upload image on selection {% endhint %} # Tables Atmos extensively uses bootstrap 4 `.table` classes you can refer their documentation on their site below {% embed url="" %} ### Datatables Datatables provides advanced interaction controls to your HTML tables it also supports bootstrap 4 tables. to use data table please follow the steps. you can read detailed documentation of datatable at {% embed url="" %} #### Step 1 Include the following in head ```markup ``` #### Step 2 Include the following before `` ```markup ``` #### Step 3 ```markup ​ ​
Name Position Office Age Start date Salary
Name Position Office Age Start date Salary
Tiger Nixon System Architect Edinburgh 61 2011/04/25 $320,800
Garrett Winters Accountant Tokyo 63 2011/07/25 $170,750
Ashton Cox Junior Technical Author San Francisco 66 2009/01/12 $86,000
Cedric Kelly Senior Javascript Developer Edinburgh 22 2012/03/29 $433,060
``` #### Step 4 Initialize the datatable ```javascript $('#example').DataTable({ //DataTable Options }); ``` # Mail Templates We have now included standard transactional E-Mail templates in to the package, you can find them in email folder in root of the demo or getting started directory We have used MJML for building the mails just refer to mjml placed in MJML directory for modification.you can copy the contents of any mjml file you like and paste here ![](https://621507229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LMWvbwDSTI9_skSMXwK%2F-LZOnfoY8OPmQnOUQM1_%2F-LZOnjlvdJSZhnJguq0s%2Fatmos.atomui.com_light_emails_confirm-mail%20\(1\).png?alt=media\&token=355b607b-05eb-4f00-bff5-9c873ca15343) To read the complete documentation head over to {% embed url="" %} # Form Layouts Atmos inherits bootstrap 4 form layouts so there is no need of external JS or CSS libraries. ### Standard Bootstrap Form ```markup
``` ### Horizontal Form Layout ```markup
Radios
Checkbox
``` ### Floating Label Form Create Floating label form by adding `.floating-label` class to `.form-group` and make sure you have label as first child then followed by input. ```markup
``` {% hint style="info" %} You can find `floating-label` styles at floating.scss {% endhint %} ### Form Dark Atmos comes with form variation for creating dark inputs, to achieve this just make the add `.form-dark` to make all children inputs dark style. ```markup
``` {% hint style="info" %} form-dark also works for floating labels {% endhint %} ### Input Group Flush To remove borders from the input group we have included `input-group-flush` class. following is an sample markup of flushed group borders ```markup
``` # Switch We have created css only switches in atmos, so you do not need to include any additional css or JavaScript files into your project, moreover they also support default browser based validation without any additional configuration.
```markup ``` ```markup ``` ### Switch as radio You can use switch as checkbox as well as radio just change the input type to radio for radio buttons ```markup ``` ### Switch Size Just add `.size-lg` to `.custom-switch-indicator` for large sizes.
```markup ``` {% hint style="info" %} You can check switch.scss for further customization {% endhint %} # Tag Input Tag input checkbox do not require any additional includes for working they are css only tags.
```markup
``` {% hint style="info" %} Tag input css code is at taginput.scss file {% endhint %} # Radio Box adio box can be used for making clear and distinctive labels with more information. radio box does not require additional css and JavaScript apart from atmos defaults.
```markup
``` ### Radio box Columns Radio box Column is similar to radio-box with a slight variation
![](https://621507229-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LMWvbwDSTI9_skSMXwK%2F-LUL1q027gaM1AUxbdkK%2F-LUL3KxVuHbBdNn8WqYL%2Fimage.png?alt=media\&token=81a3c392-843e-4d1d-a909-34f533a7b300) ```markup
``` # Select2 We have included select2 plugin for enhanced select options. select2 is free and open source plugin you can check it here ### Setup #### Step 1 Add the plugin css before the atlas stylesheet as we have tuned it according to the scheme of our admin panel ```markup ``` #### Step 2 Include plugin Javascript file before \ ```markup ``` #### Step 3 Add `.js-select` class as selector ```markup ``` #### Step 4 Initialize the plugin ```javascript $(".js-select2").select2(); ``` ### Select2 Tag Input you also have multiple inputs by using multiple attribute with select tag ```markup ``` ### For more options refer {% embed url="" %} # Datepickers Atmos comes with host date input options which can be useful for various scenarios, we have included some of the most popular datepicker plugins that are available and are free to use ## Bootstrap Datepicker Bootstrap datepicker is most simple and easy to implement datepicker, it by default supports bootstrap. #### step 1 Include the stylesheet `datepicker3.css` inside the if it's not there already. add this before atmos stylesheet ```markup ``` #### Step 2 Include the relevant javascript files inside the before core template script inclusions, if it's not there already. ```markup ``` #### Step 3 Add the Markup ```markup ``` #### Step 4 Initialize the plugin ```javascript $(".js-datepicker").datepicker(); ``` {% embed url="" %} ## Daterangepicker Daterangepicker is used for selecting date ranges. To use daterangepicker take a look at following steps #### Step 1 Include the stylesheet `daterangepicker.css` inside the if it's not there already. add this before atmos stylesheet ```markup ``` #### Step 2 Include the relevant javascript files inside the before core template script inclusions, if it's not there already. ```markup ``` #### Step 3 Add Following Markup ```markup ``` #### Step 4 Initialize the plugin ```javascript $('.input-daterange').daterangepicker(); ``` {% embed url="" %} ## Timepicker Bootstrap timepicker for selecting times convenently. we have customised bootstrap timepicker for atmos admin panel. you can check its core at timepicker.scss #### Step 1 Include the stylesheet `bootstrap-timepicker.min.css` inside the if it's not there already. add this before atmos stylesheet ```markup ``` #### Step 2 Include the relevant javascript files inside the before core template script inclusions, if it's not there already. ```markup ``` #### Step 3 Add Markup ```markup ``` #### Step 4 initialize the plugin ```javascript $('.timepicker').timepicker({ showInputs: false }); ``` {% embed url="" %} ## Datedropper datedropper is a fancy datepicker plugin build on top jqueryui datepicker, it has really playful UI for pickup dates. #### Step 1 Include the stylesheet datedropper.min.css inside the if it's not there already. add this before Atmos stylesheet ```markup ``` #### Step 2 Include the relevant javascript files inside the before core template script inclusions, if it's not there already. ```markup ``` #### Step 3 Add the Markup ```markup ``` #### Step 4 Initialize the plugin ```javascript $('.datedropper').dateDropper(); ``` {% embed url="" %} # Masked Input Masked input plugin extends formatting of user input for better representation while inputs for inputs like numbers, telephone, currency etc. #### Step 1 Include JavaScript before end of body tag ```markup ``` #### Step 2 Add markup with data parameters. use data-mask for formatting ```markup ``` {% embed url="" %} # Rangeslider We have used jQueryUI range slider for input range slider inputs.
#### Step 1 Include jQueryUI stylesheet before atmos theme Stylesheet to make sure it properly overrides the UI according to our needs ```markup ``` #### Step 2 Add jqueryUI JavaScript files if not included already. ```markup ``` #### Step 3 Add markup ```markup
``` #### Step 4 Initialize the plugin ```javascript $(".input-slider").slider({ range: "min", }); ``` {% embed url="" %} # Dropzone Fileupload DropzoneJS is an open source library that provides drag’n’drop file uploads with image previews. #### Step 1 Add dropzone stylesheets before atmos to make sure we override styles to fit our theme ```markup ``` #### Step 2 Include JavaScript file before closing body tag ```markup ``` #### Step 3 Add `.dropzone` to initialize dropzone plugin with default options. ```markup

Drop files here or click to upload.
(This is just a demo dropzone. Selected files are not actually uploaded.)
Upload File
``` {% embed url="" %} # Form Wizard [Bootstrap Wizard plugin](http://vinceg.github.io/twitter-bootstrap-wizard/) to build a wizard out of a formatter tabable structure. It allows to build a wizard functionality using buttons to go through the different wizard steps and using events allows to hook into each step individually. #### Step 1 Add JavaScript file before enclosure of body tag ```markup ``` #### Step 2 Prepare the Markup ```markup

Welcome Fella,

We'll never share your email with anyone else.
``` #### Step 3 Initialize the plugin ```javascript $('#rootwizard').bootstrapWizard({ 'tabClass': 'nav nav-pills', 'onNext': function (tab, navigation, index) { }, }); ``` {% embed url="" %} # Form Validation [jQuery Validation](https://jqueryvalidation.org/) plugin makes simple clientside form validation easy, whilst still offering plenty of customization options. It makes a good choice if you’re building something new from scratch, but also when you’re trying to integrate something into an existing application with lots of existing markup. #### Step 1 Add JavaScript file before end body tag ```markup ``` #### Step 2 Add Markup ```markup
``` #### Step 3 Initialize the Plugin ```javascript $(".needs-validation").validate({ errorClass: "is-invalid", validClass: "is-valid", }); ``` {% embed url="" %} # Charts We have used comprehensive charts to make Atmos bring to life. we have included 4 different charting libraries to go ahead with your needs and create impressive data visualization of your data. you can check each in charts>demo. ### General Chart Colors ```javascript window.colors = [ "#687ae8", "#12bfbb", "#ffb058", "#2991cf", "#87b8d4", "#109693", "#f29494", "#527cf9", "#7140d1", "#e79e4e", "#52b4ee", "#6ed7e0", "#8fa6b4", "#ffcfcf", "#28304e", "#95aac9", "#f2545b", "#f7bc06", "#00cc99", "#19b5fe", "#E3EBF6" ]; ``` # Apex Charts [ApexCharts ](https://apexcharts.com/)is an open-source modern charting library that helps developers to create interactive visualizations for web pages. #### Step 1 Add Javascript library to body ```markup ``` #### Step 2 Add Chart area DOM element markup ```markup
``` #### Step 3 ```javascript var options = { chart: { type: 'line' }, series: [{ name: 'sales', data: [30,40,35,50,49,60,70,91,125] }], xaxis: { categories: [1991,1992,1993,1994,1995,1996,1997, 1998,1999] } } var chart = new ApexCharts(document.querySelector("#chart"), options); chart.render(); ``` {% hint style="warning" %} To trigger resize charts use following JS Snippet `window.dispatchEvent(new Event('resize'));` {% endhint %} # Chartjs [Chartjs](https://www.chartjs.org/) simple yet flexible JavaScript charting for designers & developers. #### Step 1 ```markup ``` #### Step 2 Add canvas tag for chartjs DOM element ```markup ``` #### Step 3 Initialize charts ```javascript var ctx = document.getElementById("myChart").getContext('2d'); var myChart = new Chart(ctx, { type: 'bar', data: { labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"], datasets: [{ label: '# of Votes', data: [12, 19, 3, 5, 2, 3], backgroundColor: [ 'rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)', 'rgba(153, 102, 255, 0.2)', 'rgba(255, 159, 64, 0.2)' ], borderColor: [ 'rgba(255,99,132,1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)', 'rgba(153, 102, 255, 1)', 'rgba(255, 159, 64, 1)' ], borderWidth: 1 }] }, options: { scales: { yAxes: [{ ticks: { beginAtZero:true } }] } } }); ``` # Google Charts Google chart tools are powerful, simple to use, and free. Try out our rich gallery of interactive charts and data tools. {% embed url="" %} #### Step 1 Add google chart hosted library to the page ```markup ``` #### Step 2 Add markup ```markup
``` #### Step 2 Include the chartist javascript library ```markup ``` #### Step 3 Add the markup ```markup
``` #### Step 4 Initialize with chart with data ```javascript new Chartist.Line('#chartist-01', { labels: [1, 2, 3, 4, 5, 6, 7, 8], series: [ [5, 9, 7, 8, 5, 3, 5, 4] ] }, { low: 0, showArea: true, height: 300 }); ``` # Google Maps This section will guide you to setup basic google maps. for more information checkout [Google Developer API](https://developers.google.com/maps/documentation/javascript/tutorial). {% hint style="danger" %} Google Maps will not work without API Key. please create one before implementing maps {% endhint %} #### Step 1 Add Google maps JavaScript ```markup ``` #### Step 2 Add the markup ```
``` #### Step 3 Initialize the map ```javascript var map; function initMap() { map = new google.maps.Map(document.getElementById('map'), { center: {lat: -34.397, lng: 150.644}, zoom: 8 }); } ``` ### Map themes You can checkout more themes at [snazzymaps](https://snazzymaps.com/) # Vector Maps Vector maps are created using [jQuery Mapael](https://github.com/neveldo/jQuery-Mapael). it is a jQuery plugin based on raphael.js that allows you to display dynamic vector maps. #### Step 1 Add JavaScript library to your body tag on page ```markup ``` {% hint style="info" %} you can additional maps like one in demo by including it in js. {% endhint %} #### Step 2 Add Markup ```markup
Alternative content
``` {% hint style="warning" %} Remember to add child to the selector with class name `.map` {% endhint %} #### Step 3 Initialize the map with data ```javascript $(".map-container").mapael({ map : { name : "world_countries" } }); ``` {% embed url="" %} # blank template Markup Markup of blank starter template {% code title="blank.html" %} ```markup Blank Starter
``` {% endcode %}