brand
Layout

Choose your preferred layout

layout layout layout
Navigation

Menu comes in two modes: dark & light

Top Nav

Choose your liked color mode

Scrollable Header
brand brand

Documentation

Introduction

Martian is a Bootstrap 4.1.X & Sass based solid core framework that works well for all screen sizes and modern browsers. HTML5 validated clean code is focused - keeping it simple and orderly. With Martian's UI components library, you can actually get more time on building stuff, rather than editing pixel distances. Martian - HTML template and Admin UI kit can be used for any type of web application: CRM, Project Management, Statistics, Analytics or any custom admin dashboard. This documentation will guide you through installing the template and exploring the various components that are bundled with the template.

File Structure
							HTML
							  ├── 
							  │   └── dist
							  │     └── css
							  │     └── fonts
							  │     └── img
							  │     └── js
							  │   └── src
							  │     └──scss
							  │    	  └── colors.scss
							  │    	  └── mixins.scss
							  │    	  └── navbar.scss
							  │    	  └── style.scss
							  │   └── vendors
							  │       └── All Required plugins files
							  │   └── All Html Pages
							  │   └── .jshintrc
							  │   └── Gruntfile.js
							  │   └── package.json
							  │   └── package-lock.json
							  └──
Installation (Install Node.js,Grunt)

Use of these tools are completely optional.

  • Node.js and NPM. You can download Node.js from here https://nodejs.org. Npm comes bundled with Node.js
  • Next you need to install bower.
  • At last install grunt using npm install -g grunt-cli and npm install grunt --save-dev

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
  • grunt dist
  • grunt

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


Above all procedures are optional you can directly use the compiled file which we provided you.

Menu Style

For vertical navigation you have to first add hk-vertical-nav class with hk-wrapper.

For Horizontal navigation you have to first add hk-horizontal-nav class with hk-wrapper.

For vertical alt navigation you have to first add hk-alt-nav class with hk-wrapper.

For this menu style you have to add hk-navbar-alt class with navbar

For light & dark menu you can add hk-nav-light or hk-nav-dark with hk-nav class.

For Scrollable Navigation please add scrollable-nav class with hk-wrapper.

Twitter Feed

We implemented live Twitter Feed on Pangong, for that we used twitterFetcher third party plugin.

How to Setup
HTML Structure
								<div class="card bg-primary text-center">
									<div class="twitter-slider-wrap card-body">
										<div class="twitter-icon text-center mb-15">
											<i class="fa fa-twitter"></i>
										</div>
										<div id="tweets_fetch" class="owl-carousel owl-theme"></div>
									</div>
								</div>
CSS
								<!-- Lightgallery CSS -->
								<link href="../vendors4/lightgallery/dist/css/lightgallery.min.css" rel="stylesheet" type="text/css">
JS
								<!-- twitter JavaScript -->
								<script src="dist/js/twitterFetcher.js"></script>
								<script src="dist/js/widgets-data.js"></script>
								​
								<!-- Owl JavaScript -->
								<script src="../vendors4/owl.carousel/dist/owl.carousel.min.js"></script>
								​
								<!-- Owl Init JavaScript -->
								<script src="dist/js/owl-data.js"></script>
								​
Initialize Twitter Feed
								if( $('#tweets_fetch').length > 0 ){
										var configList = {
										  "profile": {"screenName": ' '},
										  "domId": 'tweets_fetch',		 
										  "maxTweets": 2,
										  "enableLinks": true, 
										  "showUser": false,
										  "showTime": true,
										  "showImages": false,
										  "showInteraction":false,
										  "lang": 'en'
										};
										twitterFetcher.fetch(configList);
									}	
								});
								​
								$(window).on('load', function () {
									setTimeout(function(){
										$('#tweets_fetch').owlCarousel({
											loop:true,
											margin:0,
											autoplay:true,
											responsiveClass:true,
											autoHeight:true,
											autoplayTimeout:4000,
											responsive:{
												0:{
													items:1
												}
											}
										});
									},2000);
								});
								​
Credits