Getting started

Thanks for purchasing Marino. Marino is here to help you with your next project. If you have any questions that are beyond the scope of this help file, please feel free to contact us via email at support@batchthemes.com or through our contact form in our Theme Forest profile.

Marino is an advanced, responsive dashboard UI kit built using Bootstrap 4, the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web, AngularJS, the Superheroic JavaScript MVW Framework which enhances your HTML for web apps and jQuery, the fast, small, and feature-rich JavaScript library. It includes 9 different layouts, 9 color schemes, more than 150 HTML files and lots of widgets and custom made reusable components to help you develop your next application.

Template versions

Marino is available in both jQuery and AngularJS versions. To try the demos, please click here.

AngularJS version

Template requirements

The following frameworks, components and dependencies are required to install Marino:

• AngularJS 1.4+

  HTML enhanced for web apps!

  Official Documentation

• Bootstrap 4

  Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

  Official Documentation

• jQuery

  jQuery is a fast, small, and feature-rich JavaScript library.

  Official Documentation

• NodeJS

  Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

  Official Documentation

• Bower

  A package manager for the web. Web sites are made of lots of things — frameworks, libraries, assets, and utilities. Bower manages all these things for you.

  Official Documentation

• Grunt

  The JavaScript Task Runner. With literally hundreds of plugins to choose from, you can use Grunt to automate just about anything with a minimum of effort.

  Official Documentation

• SASS

  CSS with superpowers. Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

  Official Documentation

Installation instructions for local development

After installing all the required frameworks, components and dependencies, go to the root folder of and run the following commands from the command line:

• npm install
• bower install
• grunt serve

If everything was installed correctly, you should see the AngularJS version of Marino running in http://localhost:9003/

Compilation instructions

If you want to compile the application to deploy it to a remote server, run the following command:

• grunt build

Your application is now ready to deploy and can be found in the dist/ folder.

Source code structure

The main folders of the AngularJS version of Marino are:

• app

  Includes the entire application and its development files

• bower_components

  Includes all the dependencies installed with bower

• node_modules

  Includes all node packages, components and dependencies installed with NPM

• dist

  After compiling the application with the grunt build command, this folder is created and all production ready files and folders are put in this folder. This is the folder you have to upload if you want to publish your application to the world

Important files

• app/index.html

  Main application file. This file includes every script, stylesheet and template used in the application

• scripts/app.js

  Main javascript file. Includes module and route definitions, global theme and component configuration

• styles/main.scss

  Main SCSS stylesheet of the application. Any global style or additional .scss file added to the application must be included in this file

• styles/_variables.scss

  Global SCSS variables are defined here. The entire palette system for colors is defined in this file

• styles/layouts/*.scss

  Template layouts are defined in this folder

• styles/helpers/*.scss

  Includes global CSS and SCSS helpers

• styles/_mixins.scss

  Includes SASS mixins used in some parts of the application

• scripts/services/colors.js

  Global colors used in .js files are defined here. This file is the javascript version of the styles/_variables.scss file

• scripts/services/functions.js

  Global functions used in the application are defined here

• scripts/services/dashboards.js

  Common functions used in every dashboard view are defined here. This includes the maps, charts and notifications that are reused in the dashboard views

• scripts/services/navigation.js

  Global menus and navigation links are defined here. This includes the left sidebar, navbar and horizontal navigation links and menus

• scripts/services/sample-data.js

  All the sample data used in the controllers and in some directives is defined here

Naming convention for widgets

Every widget included in the AngularJS version of Marino is located in the app/views/{section}-widgets. All the widgets used in the application are directives and they use the following coding and naming convention

For example, for the <activity-widget-1> widget:

• HTML files are located in the app/views/activity-widgets folder
• SCSS files are located in the app/styles/activity-widgets folder
• JS files are located in the app/scripts/directives folder

• In this case, for this widget the file names are the following:

  1. app/views/activity-widgets/activity-widget-1.js
  2. app/styles/activity-widgets/activity-widget-1.html
  3. app/scripts/directives/_activity-widget-1.scss

jQuery version

Template requirements

The following frameworks, components and dependencies are required to install Marino:

• Bootstrap 4

  Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

  Official Documentation

• jQuery

  jQuery is a fast, small, and feature-rich JavaScript library.

  Official Documentation

• NodeJS

  Node.js is a platform built on Chrome's JavaScript runtime for easily building fast, scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.

  Official Documentation

• Bower

  A package manager for the web. Web sites are made of lots of things — frameworks, libraries, assets, and utilities. Bower manages all these things for you.

  Official Documentation

• Grunt

  The JavaScript Task Runner. With literally hundreds of plugins to choose from, you can use Grunt to automate just about anything with a minimum of effort.

  Official Documentation

• SASS

  CSS with superpowers. Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

  Official Documentation

Installation instructions for local development

After installing all the required frameworks, components and dependencies, go to the root folder of and run the following commands from the command line:

• npm install
• bower install
• grunt serve

If everything was installed correctly, you should see the jQuery version of Marino running in http://localhost:9002/

Compilation instructions

If you want to compile the application to deploy it to a remote server, run the following command:

• grunt build

Your application is now ready to deploy and can be found in the dist/ folder

Source code structure

The main folders of the jQuery version of Marino are:

• app

  Includes the entire application and its development files

• bower_components

  Includes all the dependencies installed with bower

• node_modules

  Includes all node packages, components and dependencies installed with NPM

• dist

  After compiling the application with the grunt build command, this folder is created and all production ready files and folders are put in this folder. This is the folder you have to upload if you want to publish your application to the world

Important files

• app/index.html

  Index file and home page

• scripts/main.js

  Main javascript file. Includes global theme and component configuration

• styles/main.scss

  Main SCSS stylesheet of the application. Any global style or additional .scss file added to the application must be included in this file

• styles/_variables.scss

  Global SCSS variables are defined here. The entire palette system is defined in this file

• styles/layouts/*.scss

  Template layouts are defined in this folder

• styles/helpers/*.scss

  Includes global CSS and SCSS helpers

• styles/_mixins.scss

  Includes SASS mixins used in some parts of the application

• scripts/colors.js

  Global colors used in .js files are defined here. This file is the javascript version of the styles/_variables.scss file.

• scripts/functions.js

  Global functions used in the application are defined here.

• scripts/dashboards.js

  Common functions used in every dashboard view are defined here. This includes the maps, charts and notifications that are reused in the dashboard views.

Template Structure

Elements

This template includes the following elements:

• Navbar
• Color selector
• Horizontal navigation
• Left sidebar
• Right sidebar
• Main content
• Footer

Layouts

The following options are provided:

• default-sidebar
• collapsed-sidebar
• off-canvas
• left-sidebar-over
• left-sidebar-under
• horizontal-navigation-1
• horizontal-navigation-2
• horizontal-navigation-3
• mega-menu

Color schemes

Marino includes 9 different color schemes with light, dark and colored variations.

Full list of components used in Marino

Tether

Velocity.js

Notify.js

Full Calendar

boostrap-datepicker

SweetAlert2

angular-timer

Mousetrap

Dragula

The Final Countdown

noUiSlider

Typed.js

Bourbon

Dropzone.js

PACE

List.js

Elevate Zoom

Boostrap Validator

mjolnic-bootstrap-colorpicker

Google fonts

Summernote

d3

Font Awesome

angular-animate

textAngular

flag-icon-css

ngstorage

JQuery Storage

Toastr

Ionicons

Owl Carousel 2

Material Design Iconic Font

Sortable

jQuery File Upload

enhance.js

jCrop

highlight.js

Google Maps

Lodash

Chart.js

gauge.js

jQuery Fullscreen Plugin

Datatables

jQuery Knob

Easy pie chart

WOW.js

Counter-Up

Toolbar.js

DataMaps

angular-bootstrap-colorpicker

Animate.css

moment

angular-file-upload

Hover

Unsplash

Chartist.js

angular-chartist

FAQs

• How do I start the local development server?

  After installing all the required dependencies, you have to go to the root folder and run <code>grunt serve</code>. This should start the live reload server

• How do I install/uninstall a dependency with Bower?

  Run bower install <dependency-name> --save. For the AngularJS version you need to add it to the index.html file, and for the jQuery version you need to add it to every .html you wish to use

• How do I install/uninstall a dependency without Bower?

  In the AngularJS and jQuery version you just have to add your files manually to the app/{views,styles,scripts} folders. In the AngularJS you have to add the references to the app/index.html file and in the jQuery version you have to create an HTML file and add the references to it.

• How do I change the default page layout?

  In the AngularJS version global layouts are defined in the scripts/app.js file. A layout is set when you add the data-layout attribute to the body element. If you want to define it globally you have to set it up here. Also in the page-change directive you can set up the layout on a per file basis. For the jQuery version you can either set it up directly in the body element in every .html file, or you can add it dynamically by setting set data-layout attribute in the scripts/main.js file

• How do I change the default color palette?

  In the AngularJS version global palettes are defined in the scripts/app.js file. A color palette is set when you add the data-palette attribute to the body element. If you want to define it globally you have to set it up here. Also in the page-change directive you can set up the palette on a per file basis. For the jQuery version you can either set it up directly in the body element in every .html file, or you can add it dynamically by setting set data-palette attribute in the scripts/main.js file

• How can I change the theme colors and styles?

  In the AngularJS version global colors are defined in the scripts/services/colors.js and styles/_variables.scss files. If you want to add a new color palette you have to add it to this 2 files. In the jQuery file, global colors are defined in the scripts/colors.js and styles/_variables.scss files. If you want to add a new color palette you have to add it to this 2 files

• How do I add an item to the left sidebar, navbar or horizontal navigation?

  In the AngularJS version you have to modify the scripts/services/navigation.js file. In this file the global routes are defined. In the jQuery version you have to add them manually to every .html file.

• I have a question, but it is not listed here, what can I do?

  Send us an email to support@batchthemes.com or contact us through our Theme Forest profile and we'll do our best to try to help you.

• I would like to see a new plugin installed or functionality developed in Marino, is it possible?

  We are always trying to improve and adding new functionalities and plugins to Marino, so every request is welcomed and will be evaluated.

• Are updates free?

  Yes, they are and always will be free.

Change log

• newInitial release Apr 23, 2016