logo

Let's make it simple.

A complet guide on how to use VSDocs.

Get started Ask a question

Flie structure

We've prepared a very intuitive file structure. Please click on the folders below to see what's inside.

Docs file hierarchy
  • Expand all
  • Collapse all
  • css - acompiled css files
    • custom.css - An empty css file where you can write your custom css code.
    • style.css - Compiled css (unminified).
    • style.min.css - Compiled css (minified).
  • fonts - fonts used inside the template
    • fontawesome.otf - Font Awesome in otf format.
    • fontawesome-webfont.eot - Font Awesome in eot format.
    • fontawesome-webfont.svg - Font Awesome in svg format.
    • fontawesome-webfont.ttf - Font Awesome in ttf format.
    • fontawesome-webfont.woff - Font Awesome in woff format.
    • fontawesome-webfont.woff2 - Font Awesome in woff2 format.
  • img - images used inside this template
    • img1.jpg
    • img2.png
    • img3.gif
    • ...
  • js - javascript files
    • dev - unminified version of the scripts
      • libs - JavaScript libraries
        • plugins - List of jQuery and non-jQuery plugins.
        • jquery.min.js - jQuery library.
      • custom.js - An empty JavaScript file where you can write your custom JavaScript code.
      • modernizr.js - Feature detection library for HTML5 and CSS3.
      • modules.js - General function, bindings and plug-ins initializations.
    • all.js - All the JavaScript files concatenated and minified.
    • custom.js - An empty JavaScript file where you can write your custom JavaScript code.
    • modernizr.js - Feature detection library for HTML5 and CSS3.
  • less - less files
    • global - Global less files which define some general behavior.
    • libs - Css and less files required by some JavaScript plugins.
    • modules - List of less modules.
    • custom.less - An empty less file where you can write your custom less code.
    • style.less - A global less file where all other less files are imported.
  • swf - flash files
    • zeroclipboard.swf - File used by a copy-to-clipboard plugin.
  • dev-boilerplate.html - Development version of the layout where are included all the unminified version of the files.
  • prod-boilerplate.html - Pre-production version of the layout where are included the vendor scripts and the modules.js file.
  • index.html - First header version.
  • index-2.html - Second header version.
  • index-3.html - Third header version.
  • ... - etc.

Grid

VSDocs uses Bootstrap's grid system, you can see its structure below. For more information please visit the official bootstrap documentation page.

copy 
<div class="row">
	<div class="col-md-8">.col-md-8</div>
	<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
	<div class="col-md-4">.col-md-4</div>
	<div class="col-md-4">.col-md-4</div>
	<div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
	<div class="col-md-6">.col-md-6</div>
	<div class="col-md-6">.col-md-6</div>
</div>

Typography

All you need for writing and presenting your ideas into a user friendly way.

copy 
<!-- Headings -->
<h1>H1 Heading</h1>
<h2>H2 Heading</h2>
<h3>H3 Heading</h3>
<h4>H4 Heading</h4>
<h5>H5 Heading</h5>
<h6>H6 Heading</h6>

<!-- Paragraph -->
<p>Expedita eius iusto officia aliquam necessitatibus, ratione cumque et exercitationem quam saepe.</p>

<!-- Blockquote -->
<blockquote>
	Autem officiis, minima, accusamus molestias adipisci sunt voluptas necessitatibus consectetur dicta.
</blockquote>

<!-- Marks -->
<p>
	An example of a <span class="mark bold">bold</span> mark.
	An example of a <span class="mark bolder">bolder</span> mark.
	An example of a <span class="mark italic">italic</span> mark.
	An example of a <span class="mark underline">underline</span> mark.
	An example of a <span class="mark line-through">line-through</span> mark.
	An example of a <span class="mark sup">sup</span> mark.
	An example of a <span class="mark sub">sub</span> mark.
	An example of a <span class="mark small">small</span> mark.
	An example of a <span class="mark help">help</span> mark.
	An example of a <span class="mark code">code</span> mark.
</p>

<!-- Marks Colored -->
<p>
	Example of a <span class="color blue">blue</span> mark.
	Example of a <span class="color blue-light">blue-light</span> mark.
	Example of a <span class="color purple">purple</span> mark.
	Example of a <span class="color green">green</span> mark.
	Example of a <span class="color orange">orange</span> mark.
	Example of a <span class="color red">red</span> mark.
	Example of a <span class="color grey">grey</span> mark.
</p>

<!-- Labels -->
<span class="mark fill blue">blue</span>
<span class="mark fill blue-light">blue-light</span>
<span class="mark fill purple">purple</span>
<span class="mark fill green">green</span>
<span class="mark fill orange">orange</span>
<span class="mark fill red">red</span>
<span class="mark fill grey">grey</span>

<!-- Labels with icons -->
<span class="mark fill blue"><i class="fa fa-thumbs-o-up"></i> blue</span>
<span class="mark fill blue-light"><i class="fa fa-info"></i> blue-light</span>
<span class="mark fill purple"><i class="fa fa-star"></i> purple</span>
<span class="mark fill green"><i class="fa fa-pencil"></i> green</span>
<span class="mark fill orange"><i class="fa fa-exclamation-triangle"></i> orange</span>
<span class="mark fill red"><i class="fa fa-times"></i> red</span>
<span class="mark fill grey"><i class="fa fa-code"></i> grey</span>

Layouts

VSDocs supports five different layouts. The sidebars from the presented pages are sticky by default. If you don't want your sidebar to be sticky, just remove the 'js-sidebar-fixed' class from it.

Boxed

copy 

<!-- Boxed layout without sidebars -->
<div id="content">
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<!-- Star writing your page content here -->
			</div>
		</div>
	</div>
</div>

Boxed left

copy 

<!-- Boxed layout with left sidebar -->
<div id="content">
	<div class="container">
		<div class="layout with-left-sidebar js-layout">
			<div class="row">
				<div class="col-md-3 hidden-sm hidden-xs">
					<div class="sidebar js-sidebar-fixed">
						<!-- Star writing your sidebar content here -->
					</div>
				</div>
				<div class="col-md-9">
					<div class="main-content">
						<!-- Star writing your page content here -->
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Boxed right

copy 

<!-- Boxed layout with right sidebar -->
<div id="content">
	<div class="container">
		<div class="layout with-right-sidebar js-layout">
			<div class="row">
				<div class="col-md-9">
					<div class="main-content">
						<!-- Star writing your page content here -->
					</div>
				</div>
				<div class="col-md-3 hidden-sm hidden-xs">
					<div class="sidebar js-sidebar-fixed">
						<!-- Star writing your sidebar content here -->
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Full left

copy 

<!-- Full width layout with left sidebar -->
<div id="content">
	<div class="container-fluid container-spaced">
		<div class="layout with-left-sidebar js-layout">
			<div class="row">
				<div class="col-md-3 hidden-sm hidden-xs">
					<div class="sidebar js-sidebar-fixed">
						<!-- Star writing your sidebar content here -->
					</div>
				</div>
				<div class="col-md-9">
					<div class="main-content">
						<!-- Star writing your page content here -->
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Full right

copy 

<!-- Full width layout with right sidebar -->
<div id="content">
	<div class="container-fluid container-spaced">
		<div class="layout with-right-sidebar js-layout">
			<div class="row">
				<div class="col-md-9">
					<div class="main-content">
						<!-- Star writing your page content here -->
					</div>
				</div>
				<div class="col-md-3 hidden-sm hidden-xs">
					<div class="sidebar js-sidebar-fixed">
						<!-- Star writing your sidebar content here -->
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Preloader

If you have a massive page with a lot of content and you don't want to show it to the user while it's loading, you can active the animated preloader. Please see the instructions below.

copy 

<!-- Add the 'js-preload-me' class on the <body> tag. -->
<body class="js-preload-me">

	...

    <!-- Search and uncomment the Preloader block. -->
    <div class="preloader js-preloader">
    	<div class="preloader-animation"></div>
    </div>

    ...

</body>

Header & Header Back

We've predefined for you four custom headers, you can switch between them by copy-pasting the one you liked the most. However, you can still build your own header by using the classes described below.

copy 

<!-- Header markup -->
<div class="header [add some helpers here]"></div>
Helper Description
small makes header smaller in height
large makes header bigger in height
header-over changes the header's position to absolute, so it comes over the elements
js-header-fixed makes the header sticky and the sticky sidebar from the same page will be transformed into a static one
header-fixed-light use this class together with the '.js-header-fixed' class for the light versions of the header
copy 

<!-- Header Back markup -->
<div class="header-back [ add some helpers ]">
	<div class="header-back-container">
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					[ Page Info Block ]
				</div>
			</div>
		</div>
	</div>
</div>
Helper Description
header-back-large makes the block larger
header-back-small makes the block smaller
header-back-light invert the text color, for cases when the background image is dark
pheader-back-full-page usually used with the JavaScript class 'js-full-page', switches to display table and aligns vertically the content to the middle.

Footer

The footer of VSDocs has a very simple and compact structure. It has the following components: 'smaller logo, alternative menu, copyright, scroll to top button and the version picker'. To create your footer, just copy paste the code below. However, if you need a more complex footer, you may use the 'Footer Extended', see the code bellow.

By default the footer is fixed, in other words, even if there is no content on the page, the footer will be positioned at the bottom of the page. If you want to disable this feature, just remove the 'js-footer-is-fixed' class from it.

copy 

<!-- Footer -->
<footer class="js-footer-is-fixed">
	[ Footer Extended goes here - optional ]
	<div class="footer">
		<div class="container">
			<div class="row">
				<div class="col-md-3 col-sm-3 col-xs-12">
					<div class="footer-logo-wrapper">
						<a href="index.html" class="logo-image"><img src="[logo image]" alt="logo"></a>
						<!-- Slogan -->
						<p class="slogan">
							<!-- Write your slogan -->
						</p>
						<!-- End of Slogan -->
					</div>
				</div>
				<div class="col-md-9 col-sm-9 col-xs-12">
					<div class="footer-wrapper">
						<!-- Scroll top -->
						<span class="scroll-top js-scroll-top"><i class="fa fa-angle-up"></i></span>
						<!-- End of Scroll top -->
						<!-- Version -->
						<div class="docs-version js-docs-version">
							<span class="docs-current-version js-docs-current-version">v3.5</span>
							<ul class="js-docs-version-list">
								<li><a href="#">1.0</a></li>
								<li><a href="#">1.5</a></li>
								<li><a href="#">2.5</a></li>
								<li><a href="#">3.0</a></li>
								<li><a href="#">3.1</a></li>
							</ul>
						</div>
						<!-- End of Version -->
						<!-- Footer Menu -->
						<ul class="footer-menu helper right">
							<li>
								<a href="#">Menu item</a>
							</li>
							<li>
								<a href="#">Menu item</a>
							</li>
							<li>
								<a href="#">Menu item</a>
							</li>
						</ul>
						<!-- End of Footer Menu -->
						<!-- Copyright -->
						<p class="copyright helper right">
							<!-- Write your copyright here. -->
						</p>
						<!-- End of Copyright -->
					</div>
				</div>
			</div>
		</div>
	</div>
</footer>
copy 

<!-- Footer Extended -->
<div class="footer-extended">
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<div class="footer-extended-container">
					<div class="row">
						<div class="col-md-2 col-sm-2 col-xs-4">
							<div class="footer-extended-menu">
								<h5 class="footer-extended-menu-title">[ Category Title ]</h5>
								<ul class="footer-extended-menu-list">
									<li><a href="#">[ Menu Item ]</a></li>
									<li><a href="#">[ Menu Item ]</a></li>
									<li><a href="#">...</a></li>
								</ul>
							</div>
						</div>
						<div class="col-md-2 col-sm-2 col-xs-4">
							<div class="footer-extended-menu">
								<h5 class="footer-extended-menu-title">[ Category Title ]</h5>
								<ul class="footer-extended-menu-list">
									<li><a href="#">[ Menu Item ]</a></li>
									<li><a href="#">[ Menu Item ]</a></li>
									<li><a href="#">...</a></li>
								</ul>
							</div>
						</div>
						<div class="col-md-2 col-sm-2 col-xs-4">
							...
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Logo

As usual, we have two types of logos: text and image. See below the markup for both of them.

copy 

<!-- Logo Image -->
<a href="index.html" class="logo-image"><img src="[path to the logo image]" alt="logo"></a>

<!-- Logo Text -->
<a href="index.html" class="logo-text">[your text logo]</a>

Menus

There are two menu types in VSDocs, the first one is the regular one, which is fully visible on desktop devices and is hidden on mobile devices and the second one which is always hidden, but it's out of canvas and appears once the trigger is clicked.

copy 

<!-- Regular menu -->
<nav>
	<ul class="menu sf-menu js-menu [add some helpers here]">
		<li>
			<a href="#">Menu item</a>
			<ul>
				<li><a href="#">Sub menu item</a></li>
				<li><a href="#">Sub menu item</a></li>
				<li><a href="#">Sub menu item</a></li>
			</ul>
		</li>
		<li><a href="#">Menu item</a></li>
	</ul>
</nav>
Helper Description
upper all the letters from the menu become uppercase
menu-light invert the text color of the menu
copy 

<!-- Out of canvas menu -->
<a href="#" class="js-menu-side menu-side-trigger [add some helpers here]"></a>
<nav class="sidr js-menu-side-content">
	<ul>
		<li>
			<a href="#">Menu item</a>
			<ul>
				<li><a href="#">Sub menu item</a></li>
				<li><a href="#">Sub menu item</a></li>
				<li><a href="#">Sub menu item</a></li>
			</ul>
		</li>
		<li><a href="#">Menu item</a></li>
	</ul>
</nav>
Helper Description
menu-side-trigger-right moves the trigger to the right
menu-side-trigger-light invert the color of the trigger
copy 

<!-- Vertical Menu -->
<nav class="menu-vertical-wrapper">
	<ul class="menu-vertical js-menu-vertical" data-prepend-to=".js-layout" data-select="Menu">
		<li>
			<a href="#">Menu item</a>
			<ul>
				<li><a href="#">Sub menu item</a></li>
				<li><a href="#">Sub menu item</a></li>
				<li><a href="#">Sub menu item</a></li>
			</ul>
		</li>
		<li>
			<a href="#">Menu item</a>
		</li>
	</ul>
</nav>
Attribute Description
data-prepend-to a selector of the element where the mobile dropdown menu should be prepended
data-select the header of the mobile dropdown menu

Languages

If your documentation is multilingual, than you may find this component useful. The markup for the language picker you can find below.

copy 

<!-- Language switcher -->
<div class="languages js-languages [add some helpers]">
	<span class="language-active js-language-active">[active language] <i class="fa fa-caret-down"></i></span>
	<ul class="languages-list js-languages-list">
		<li><a href="#">[alternative language]</a></li>
		<li><a href="#">[alternative language]</a></li>
		<li><a href="#">[alternative language]</a></li>
	</ul>
</div>
Helper Description
languages-light invert the color of the text

Search

For different situations, we've prepared two types of search component. You can use the regular one, in places where you have enough space for it, or the minimal one which needs only 18px width of space. See the code bellow for more information.

copy 

<!-- Regular search -->
<div class="search">
	<form action="#">
		<input type="text" class="search-input form-control" placeholder="search">
		<i class="fa fa-search search-icon"></i>
	</form>
</div>

<!-- Minimal search -->
<div class="search-minimal js-search-minimal">
	<form action="#">
		<div class="search-minimal-input js-search-minimal-input">
			<input type="text">
		</div>
		<i class="fa fa-search search-minimal-icon js-search-minimal-icon"></i>
	</form>
</div>

Icons

VSDocs comes with two amazing icon collections included. There is a huge variety of stroke and filled icons available.

copy 

<!-- Stroke Search Icon -->
<i class="pe-7s-search"></i>

<!-- Filled Search Icon -->
<i class="fa fa-search"></i>

Rotator

If you need more action inside your header, than a text rotator could be the best solution for you.

copy 

<!-- Text rotator -->
<div class="rotator background-5 rotator-dark">
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<div class="rotator-text">
					Some text <span class="js-rotator">animated, words, separated, by, comma</span> the end of the phrase.
				</div>
			</div>
		</div>
	</div>
</div>

Category info

This is a text separator for your categories.

copy 

<!-- Category Info -->
<div class="category-info">
	<h3 class="category-title">[Category title]</h3>
	<h4 class="category-description">[Category description]</h4>
	<p class="category-content">
		[Your content goes here]
	</p>
</div>

Article

The markup of an article is fairly simple. As content of your article you can use any media supported by VSDocs.

copy 

<!-- Article -->
<article class="article">
	<h2 class="article-title">
		[ Article title ]
	</h2>
	<ul class="article-meta">
		<li>
			<span class="article-meta-date article-meta-item"> [ Publish date ] </span>
		</li>
		<li>
			<span class="article-meta-author article-meta-item"><a href="#"> [ Author ] </a></span>
		</li>
		<li>
			<span class="article-meta-category article-meta-item"><a href="#"> [ Category ] </a></span>
		</li>
		<li>
			<span class="article-meta-views article-meta-item"> [ Number of views ] </span>
		</li>
		<li>
			<span class="article-meta-likes article-meta-item"> [ Number of likes ] </span>
		</li>
		<li>
			<span class="article-meta-comments article-meta-item"><a href="#"> [ Number of comments ] </a></span>
		</li>
	</ul>
	<img src="[ path/to/your/featured/image.jpg ]" alt="Featured Image" class="article-featured-image">
	<div class="article-content">
		[ Article content ]

		<div class="article-tags">
			Tags
			<a class="article-tag" href="#"> [ Tag1 ] </a>
			<a class="article-tag" href="#"> [ Tag2 ] </a>
			<a class="article-tag" href="#"> [ Tag3 ] </a>
		</div>
	</div>
	<div class="article-navigation">
		<a href="" class="article-navigation-prev">Older Post</a>
		<a href="" class="article-navigation-next">Newer Post</a>
	</div>
</article>

Social share

Social buttons are initialized automatically, you only have to follow the markup below. More options available on the plugin's documentation page. In order to have your page/article/image shared correctly, please add the Open Graph (see below) filled with the correct information in the head of your HTML page. If you want to test how your Open Graph is rendered, please use the Facebook Open Graph debugger or Twitter Card Validator.

copy 

<!-- Social Share -->
<div class="social-likes social-share">
	<div class="facebook" title="Share link on Facebook">Facebook</div>
	<div class="twitter" title="Share link on Twitter">Twitter</div>
	<div class="plusone" title="Share link on Google+">Google+</div>
	<div class="pinterest" title="Share image on Pinterest" data-media="[path/to/your/featured-image.jpg]">Pinterest</div>
</div>
copy 

<!-- Open Graph -->
<meta property="og:type" content="[Content type - website, article, book, profile, music, video etc.]">
<meta property="og:url" content="[http://domain.com/your/page]">
<meta property="og:title" content="[Page title]">
<meta property="og:description" content="[Page description]">
<meta property="og:image" content="[http://domain.com/path/to/your/featured-image.jpg]">
<meta name="twitter:card" content="[Content type - summary, summary_large_image, photo, gallery, product, app, or player]">
<meta name="twitter:site" content="[@username for the website used in the card footer]">
<meta name="twitter:creator" content="[@username for the content creator / author.]">

Comments

This component supports nesting responsive comments.

copy 

<!-- Comments List -->
<div class="comments">
	<ul class="comment-list">
		<li class="comment-list-item">
			[ Single Comment ]
		</li>
		<li class="comment-list-item">
			[ Single Comment ]
			<div class="comment-reply">
				<ul class="comment-list">
					<li class="comment-list-item">
						[ Single Comment ]
					</li>
					<li class="comment-list-item">
						[ Single Comment ]
					</li>
				</ul>
			</div>
		</li>
		<li class="comment-list-item">
			[ Single Comment ]
		</li>
		<li class="comment-list-item">
			[ Single Comment ]
		</li>
	</ul>
</div>
copy 

<!-- Single Comment -->
<div class="comment-content">
	<div class="comment-user-photo">
		<img src=" [ path/to/users/image.jpg ] " alt="User Image">
	</div>
	<div class="comment-body">
		<div class="comment-header">
			<div class="comment-username">
				<a href="#"> [ Username ] </a>
			</div>
			<ul class="comment-meta">
				<li class="comment-likes"> [ Number of likes ] likes</li>
				<li class="comment-date"> [ Published date] </li>
			</ul>
		</div>
		<p class="comment-message">
			[ Comment Message ]
		</p>
		<ul class="comment-actions">
			<li class="comment-action-item"><a class="comment-action-like [comment-action-liked]" href="#"><i class="fa fa-heart-o"></i></a></li>
			<li class="comment-action-item"><a class="comment-action-reply" href="#"><i class="fa fa-reply"></i></a></li>
		</ul>
	</div>
</div>
copy 

<!-- Comment Form -->
<form action="#" class="comment-form">
	<div class="row">
		<div class="col-md-6">
			<ul class="comment-form-list">
				<li class="comment-form-list-item">
					<input type="text" class="form-control" placeholder="Name">
				</li>
				<li class="comment-form-list-item">
					<input type="text" class="form-control" placeholder="Email">
				</li>
				<li class="comment-form-list-item">
					<input type="text" class="form-control" placeholder="Website">
				</li>
			</ul>
		</div>
		<div class="col-md-6">
			<ul class="comment-form-list">
				<li class="comment-form-list-item">
					<textarea name="" id="" cols="30" rows="10" class="form-control" placeholder="Comment"></textarea>
				</li>
				<li class="comment-form-list-item">
					<button class="">Post Comment</button>
				</li>
			</ul>
		</div>
	</div>
</form>

Fragment identifier

With this new feature, you can share links to specific parts of you documentation page. It was designed to work within the 'Category Info' component, but you can use it anywhere on the page, just make sure its parent has the CSS 'position' set to 'relative'.

copy 

<!-- Category Info -->
<div class="category-info" id="[Category ID]">
	<h3 class="category-title">
		[Category title]
		<!-- Fragment Identifier -->
		<a class="fragment-identifier js-fragment-identifier [see helpers below]" href="#[Category ID]">
			<i class="fa fa-link"></i>
		</a>
	</h3>
	<h4 class="category-description">[Category description]</h4>
</div>
Helper Description
fragment-identifier-scroll smooth scroll to the clicked section

Number

Use this component if you need to show up some statistics, or numeric data in a beautiful way. There is a huge collection of stroke and filled icons available.

copy 

<!-- Number -->
<div class="number-box">
	<div class="number-icon">
		<i class="[Icon class]"></i>
	</div>
	<div class="number-wrapper">
		<span class="number-rotator js-animate-number" data-number="[Your number goes here]">0</span>
		[add units here - it's optional]
	</div>
	<div class="number-description">
		[number's description goes here]
	</div>
</div>

YouTube playlist

The markup for an YouTube Playlist stream is very simple (see below), however there are few things you should know before using it. Firstly you should definitely specify an ID on your <div> as this plugin will only search for the ID you've specified, you can specify any ID you want, just make sure if you have few playlists on the page to specify an unique ID for each one. More options can be found on github, on the same page you'll find the instructions on how to obtain an API key. Please note that the API key is required too.

copy 

<!-- YouTube Playlist -->
<div class="video-advanced js-video-advanced" data-api="[enter your api key]" id="youtube-playlist" data-config='{
	"playlist": "PLgGbWId6zgaWZkPFI4Sc9QXDmmOWa1v5F"
}'></div>
<!-- End of YouTube Playlist -->

Custom Video

Before using this component please make sure you have your video converted to 'mp4', 'ogv' and 'webm' formats, this will assure that your video will play properly on most devices. You also can configure the player according to your needs, to do so please fill the 'data-setup' attribute with needed options. The full list of options is available on Videojs' documentation page. The possibilities are almost limitless.

copy 

<!-- Custom Video -->
<video class="video-js" controls preload="auto" poster="[path/to/your/poster.jpg]" data-setup='[add your custom options]'>
	<source src="path/to/your/video.mp4" type='video/mp4'>
	<source src="path/to/your/video.ogv" type='video/ogv'>
	<source src="path/to/your/video.webm" type='video/webm'>
	<p class="vjs-no-js">
		To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
	</p>
</video>

Custom Video Playlist

This component consists of two main modules, the 'Video' module and the 'Playlist' module, they are both specified in the code below. In order to connect these two modules you should give the 'Video' module an ID and the 'Playlist' module the same ID suffixed with '-vjs-playlist'. For example if your 'Video' module has the ID set to 'my-video', then your 'Playlist' module should have the ID set to 'my-video-vjs-playlist'. Using the same principle, you can have multiple video playlists on the page, by giving them new IDs.

Please make sure you have your videos converted to 'mp4', 'ogv' and 'webm' formats, this will assure that your videos will play properly on most devices. One last thing, when specifying the paths to the videos in the playlist, use only the file name without extension. For example if you have in your 'video' folder 3 files [my_video.mp4, my_video.webm, my_video.ogv], then set the data-source to 'video/my_video'. By the way there are few custom options that you can use by filling the 'data-config' attribute.

copy 

<!-- Custom Video Playlist -->
<!-- Video module -->
<video id="[your-video-id]" data-config='[your custom configuration goes here, example: {"myOption": "value"}]' class="js-video-playlist video-js video-playlist-custom" controls preload="metadata" 
poster="[path/to/your/poster.jpg]" class=" video-js vjs-default-skin">
	<source src="path/to/your/first/video.mp4" type="video/mp4">
	<source src="path/to/your/first/video.webm" type="video/webm">
	<source src="path/to/your/first/video.ogv" type="video/ogv">
</video>
<!-- Playlist module -->
<div id="[your-video-id]-vjs-playlist" class="vjs-playlist">
	<ul>
		<li>
			<a class="vjs-track" href="#episode-0" data-index="0" data-src="[path/to/your/first/video/without/extension]">
				[Title of your first video]
				<span class="video-playlist-item-duration">
					[Duration of your first video]
				</span>
			</a>
		</li>
		<li>
			<a class="vjs-track" href="#episode-1" data-index="1" data-src="[path/to/your/second/video/without/extension]">
				[Title of your second video]
				<span class="video-playlist-item-duration">
					[Duration of your second video]
				</span>
			</a>
		</li>
	</ul>
</div>

Browser support

This component has currently two available variations: regular and compact. If you have enough space for it, we would recommend using the regular version. This includes the full component functionality. If you don't have too much space for it, using the compact version could be a good choice. This will remove the stroke and the extra functionality in order to show it properly in tiny places.

You can also add some labels on the browsers. Add the 'browser-recommended' or 'browser-partial' class on the 'li' if you want to recommend it or worn about a partial support, or you can leave it blank if it shouldn't be labeled. Please note that in compact mode all the labels are hidden.

Regular

copy 

<!-- Browser Support -->
<ul class="browsers">
	<li class="[add some helpers here]">
		<div class="browser-icon">
			[Browser icon]
		</div>
		<h4 class="browser-title">
			[Browser title]
		</h4>
	</li>
</ul>

Compact

copy 

<!-- Browser Support Compact -->
<ul class="browsers browsers-compact">
	<li>
		<div class="browser-icon">
			[Browser icon]
		</div>
		<h4 class="browser-title">
			[Browser title]
		</h4>
	</li>
</ul>

Browser Icons

copy 

<!-- Google Chrome -->
<svg enable-background="new 0 0 515.91 728.5" height="64" id="Layer_2" viewBox="0 0 512.00003 512" width="64" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><defs id="defs7"/><g id="g6625" transform="translate(-141.91412,-143.63566)"><path d="m 397.91414,530.64366 c -26.00001,0 -49.66401,-7.008 -71.00801,-20.992 -21.344,-14 -37.344,-32 -48,-54 L 173.91412,271.63565 c -22,39.344 -32,83.344 -32,128.00001 0,64 20.832,119.84 62.496,167.50401 41.66401,47.664 93.50401,76.16 155.50401,85.504 l 74.25601,-128.49601 c -7.472,2.192 -19.936,6.496 -36.256,6.496 z" id="path5-5" style="fill:#4aae48"/><path d="m 317.41813,296.13165 c 23.648,-18.32 50.496,-24.496 80.49601,-24.496 4,0 220.00001,0 220.00001,0 -22.672,-38.656 -53.504,-71.32801 -92.49601,-94.00001 -39.008,-22.656 -81.504,-34 -127.504,-34 -40.00001,0 -77.34401,8.496 -112.00001,25.504 -34.672,16.992 -66.75201,41.744 -90.25601,73.50401 l 74.25601,124.992 c 7.328,-28.656 23.824,-53.152 47.504,-71.504 z" id="path7-1" style="fill:#ea3939"/><path d="M 634.66615,303.63565 H 485.91414 c 26,26 43.008,59.344 43.008,96.00001 0,27.344 -7.664,52.336 -23.008,75.008 l -104.992,180.99201 c 70,-0.672 129.664,-26 179.00801,-76 49.312,-50.00001 73.984,-110.00001 73.984,-180.00001 0,-32.65601 -5.504,-67.00801 -19.248,-96.00001 z" id="path9-7" style="fill:#fed14b"/><circle cx="16" cy="16" id="circle11" r="6" style="fill:#188fd1" transform="matrix(16.000001,0,0,16.000001,141.91412,143.63564)"/></g></svg>

<!-- Safari -->
<svg enable-background="new 0.907 -0.205 32 32" height="64" viewBox="0.907 -0.205 32 32" width="64" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="M16.907-.205c-8.836 0-16 7.164-16 16s7.164 16 16 16 16-7.164 16-16-7.164-16-16-16zm0 29c-7.18 0-13-5.82-13-13s5.82-13 13-13 13 5.82 13 13-5.82 13-13 13z" fill="#26A6D1" fill-rule="evenodd"/><path clip-rule="evenodd" d="M25.221 7.48l-6.192 10.436-4.242-4.243 10.434-6.193z" fill="#E2574C" fill-rule="evenodd"/><path clip-rule="evenodd" d="M8.594 24.11l10.435-6.193-4.242-4.243-6.193 10.436z" fill="#E4E7E7" fill-rule="evenodd"/></svg>

<!-- Opera -->
<svg enable-background="new 0 0 32 32" height="64" id="Layer_1" viewBox="0 0 32 32" width="64" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><path d="M26.737,4.375c2.842,2.917,4.264,6.75,4.264,11.5c0,4.334-1.422,8.104-4.264,11.312   C23.895,30.396,20.295,32,15.938,32c-4.316,0-7.885-1.604-10.706-4.812C2.41,23.979,1,20.209,1,15.875   c0-4.75,1.39-8.583,4.171-11.5C7.95,1.459,11.54,0,15.938,0C20.295,0,23.895,1.459,26.737,4.375z M21.291,11.062   c-0.124-1.291-0.373-2.552-0.747-3.781c-0.373-1.229-0.944-2.177-1.711-2.844c-0.769-0.666-1.733-1-2.895-1   c-1.162,0-2.116,0.323-2.863,0.969C12.328,5.053,11.778,6,11.426,7.25S10.835,9.75,10.71,11c-0.124,1.25-0.187,2.771-0.187,4.562   c0,1.125,0.021,2.073,0.062,2.844c0.04,0.771,0.113,1.709,0.218,2.812c0.103,1.104,0.27,2.031,0.498,2.781   c0.228,0.75,0.538,1.49,0.934,2.219c0.394,0.729,0.902,1.281,1.524,1.656s1.348,0.562,2.179,0.562c0.829,0,1.565-0.188,2.21-0.562   c0.643-0.375,1.161-0.927,1.556-1.656C20.098,25.49,20.42,24.75,20.669,24s0.436-1.677,0.56-2.781   c0.125-1.104,0.197-2.052,0.219-2.844c0.02-0.791,0.03-1.729,0.03-2.812C21.478,13.854,21.416,12.354,21.291,11.062z" fill="#EA3939"/></g><g/><g/><g/><g/><g/><g/></svg>

<!-- Fire Fox -->
<svg enable-background="new -0.002 -0.501 32 31" height="64" viewBox="-0.002 -0.501 32 31" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M15.998-.501c8.284 0 15 6.715 15 15 0 8.283-6.716 15-15 15s-15-6.717-15-15c0-8.286 6.716-15 15-15z" fill="#2394BC"/><path d="M18.562 30.274c7.614-1.229 13.437-7.814 13.437-15.775l-.146.181c.228-1.513.188-2.861-.125-4.037-.112.871-.234 1.397-.357 1.608-.001-.068-.018-.976-.307-2.243-.137-.924-.338-1.793-.616-2.596.068.368.108.675.128.953-1.162-3.118-4.023-6.957-11.072-6.867 0 0 2.479.262 3.646 2.029 0 0-1.193-.285-2.095.152 1.099.438 2.052.896 2.863 1.374l.07.043c.208.125.385.253.573.38 1.498 1.052 2.888 2.553 2.782 4.489-.323-.51-.753-.844-1.304-1.012.679 2.66.746 4.857.197 6.59-.377-1.154-.724-1.846-1.033-2.09.431 3.566-.15 6.203-1.739 7.922.302-1.049.422-1.908.354-2.586-1.867 2.822-3.991 4.281-6.372 4.371-.941-.008-1.83-.15-2.666-.426-1.228-.415-2.339-1.124-3.328-2.13 1.544.129 2.954-.139 4.195-.772l2.033-1.332-.008-.006c.264-.1.512-.092.754.021.496-.068.67-.334.504-.783-.24-.334-.603-.637-1.069-.904-1.017-.531-2.079-.447-3.187.26-1.055.6-2.07.576-3.058-.062-.647-.447-1.272-1.049-1.876-1.801l-.24-.355c-.113.852.015 1.945.398 3.291l.008.018-.008-.016c-.384-1.346-.511-2.442-.398-3.293v-.008c.029-.744.337-1.154.924-1.246l-.249-.021.251.021c.663.061 1.424.213 2.282.463.144-.828-.045-1.695-.564-2.584v-.016c.806-.752 1.521-1.299 2.132-1.648.271-.145.429-.365.481-.662l.022-.016.008-.008.03-.029c.158-.236.105-.426-.165-.594-.565.031-1.131-.008-1.695-.121l-.008.023c-.233-.068-.527-.275-.889-.625l-.927-.912-.278-.219v.029h-.008l.008-.037-.053-.055.075-.053c.128-.691.339-1.285.64-1.795l.068-.061c.302-.502.881-1.041 1.732-1.617-1.582.197-3.013.91-4.285 2.143-1.055-.387-2.305-.305-3.744.25l-.173.132-.013.007.188-.138.008-.008c-.905-.416-1.515-1.611-1.809-3.564-1.152 1.141-1.71 3.178-1.673 6.119l-.33.499-.085.058-.017.016-.007.007-.016.033c-.175.274-.416.688-.72 1.244-.437.786-.584 1.446-.627 2.021l-.004.007.002.019-.014.151.025-.04c.003.133.006.267.04.387l.934-.768c-.339.859-.564 1.77-.678 2.736l-.027.442-.293-.335c0 3.428 1.088 6.597 2.924 9.201l.055.086.088.105c1.32 1.813 3.006 3.338 4.958 4.464 1.403.831 2.911 1.413 4.519 1.759l.331.074c.333.064.674.112 1.016.155.253.033.506.065.762.087l.34.039.483.003.525.026.418-.021.689-.034c.409-.028.812-.073 1.212-.131l.243-.036zm-9.409-16.75h0zm19.527-2.741l-.007.131.005-.132.002.001z" fill="#EC8840"/></svg>

<!-- Internet Explorer -->
<svg enable-background="new 0.001 -0.001 31.996 29.997" height="64" viewBox="0.001 -0.001 31.996 29.997" width="64" xmlns="http://www.w3.org/2000/svg"><path d="M23.841 17.972h8.032c.074-.576.147-1.162.116-1.758-.321-6.163-4.144-11.568-9.642-13.413l.423.084s10.027-4.359 6.644 5.447l.412.677s3.089-7.542-1.688-8.789c-3.909-1.02-9.686 1.814-9.686 1.814l.213.042c-.359-.025-.721-.042-1.088-.042-7.146 0-13.078 4.845-14.215 11.453.81-.907 3.712-4.255 6.979-6.352 0 0-5.566 4.76-7.177 8.671 0 0-2.064 3.502-2.742 6.122-.41 1.588-1.463 7.283 2.742 7.938 4.376.68 7.829-1.551 7.829-1.551l-.084-.047c1.994 1.018 4.261 1.598 6.667 1.598 6.375 0 11.779-4.26 13.68-9.855h-8.242c-1.123 2.213-3.112 3.449-5.467 3.449-3.123 0-5.413-1.84-6.008-5.488h12.302zm-13.819 9.807s-2.421 1.18-4.463 1.236c-6.243-.057-1.565-8.506-1.565-8.506l-.003-.009c1.107 3.051 3.264 5.619 6.048 7.291l-.017-.012zm7.556-19.226c3.617 0 5.309 2.446 5.718 5.45h-11.697c.635-2.98 2.702-5.45 5.979-5.45z" fill="#26A6D1"/></svg>
Helper Description
{ not specified } no label
browser-recommended adds a recommended label
browser-partial adds a partial support label

Tables

The tables component is an extension of the bootstrap's table component, please visit bootstrap's official documentation page for full feature list.

copy 

<!-- Table -->
<div class="table-responsive">
	<table class="table">
		<caption>[your caption]</caption>
		<thead>
			<tr>
			    <th>[table's head]</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<th>[table's content]</th>
				<td>[table's content]</td>
			</tr>
		</tbody>
	</table>
</div>

Changelog

VSDocs comes with a very powerful changelog component. It has many brand new features that can make your client's experience more pleasant. Just use the markup below and VSDocs will do the rest.

copy 

<!-- Change Log -->
<div class="changelog-wrapper js-changelog">
	<!-- Changelog filters -->
	<div class="changelog-filters">
		<input type="text" class="changelog-input js-changelog-input">
		<input id="changelog-filter-feature" class="js-changelog-checkbox changelog-checkbox" type="checkbox" value="feature"><label class="changelog-checkbox-label" for="changelog-filter-feature">Features</label>
		<input id="changelog-filter-improvement" class="js-changelog-checkbox changelog-checkbox" type="checkbox" value="improvement"><label class="changelog-checkbox-label" for="changelog-filter-improvement">Improvements</label>
		<input id="changelog-filter-bug-fix" class="js-changelog-checkbox changelog-checkbox" type="checkbox" value="bug-fix"><label class="changelog-checkbox-label" for="changelog-filter-bug-fix">Fixes</label>
		<div class="changelog-link"></div>
	</div>

	<!-- Changelog items -->
	<div class="changelog-items">
		<!-- Changelog item -->
		<div class="changelog-item js-changelog-item">
			<!-- Changelog item header -->
			<header class="changelog-header">
				<h3 class="changelog-version">[Software/Application Version]</h3>
				<p class="changelog-date">[Release Date]</p>
				<span class="changelog-switch js-changelog-switch"></span>
			</header>
			<!-- Changelog item description -->
			<div class="changelog-update-descriptions">
				<p class="changelog-update-description [changelog-feature | changelog-improvement | changelog-bug-fix] js-changelog-update-description" data-instafilta-category="[feature | improvement | bug-fix]">
					<span class="changelog-type">[feature | improvement | bug-fix]</span>
					[Update description]
				</p>
			</div>
			<!-- Changelog item files -->
			<div class="changelog-files-changed">
				<div class="changelog-file-changed [changelog-file-new | changelog-file-updated | changelog-file-removed]">
					[File name | path]
				</div>
			</div>
			<div class="changelog-link"></div>
		</div>
	</div>
</div>

Contact form

VSDocs comes with a working contact form with smart data validation. You should configure it first, so please open the 'php/contact.php' file and set the '$myemail' variable to your specific email address where all the messages should be sent. The data will be wrapped by the included email template. Bellow you'll find the form's markup with its default validation attributes. For more information on data validation please visit the plugin's official documentation. The contact form will probably not work on your local server, so you may consider moving your project on your online server when testing it. Also, please make sure your 'php' folder has the 755 permissions set recursively.

copy 

<!-- Contacts -->
<div class="contacts">
	<h3 class="contacts-title">
		Still have questions? Leave us a message.
	</h3>
	<div class="contacts-success js-contacts-success"><i class="pe-7s-check"></i>Your message was sent successfully. <br>Thank you!</div>
	<form action="php/contact.php" id="js-contact-form">
		<ul class="contacts-inputs">
			<li class="contacts-item">
				<label for="full-name" class="contacts-label">Full Name</label>
				<input type="text" name="full-name" id="full-name" class="contacts-input form-control" data-validation="required">
			</li>
			<li class="contacts-item">
				<label for="email" class="contacts-label">Email</label>
				<input type="text" name="email" id="email" class="contacts-input form-control" data-validation="required email">
			</li>
			<li class="contacts-item">
				<label for="company" class="contacts-label">Company</label>
				<input type="text" name="company" id="company" class="contacts-input form-control">
			</li>
			<li class="contacts-item">
				<label for="website" class="contacts-label">Website</label>
				<input type="text" name="website" id="website" class="contacts-input form-control" data-validation="url" data-validation-optional="true">
			</li>
			<li class="contacts-item">
				<label for="country" class="contacts-label">Country</label>
				<input type="text" name="country" id="country" class="contacts-input form-control">
			</li>
			<li class="contacts-item">
				<label for="message" class="contacts-label">Message</label>
				<textarea id="message" name="message" class="contacts-input form-control" data-validation="required"></textarea>
			</li>
		</ul>
		<button class="button green">Send Message</button>
	</form>
</div>

More components

Here's the full list of all components which weren't mentioned before.

Component name
Before and After
Book
Books Grid
Boxes
Browser Support
Buttons
Category List
Code Highlight
Contacts Info
Contacts
Component name
Faq
Gif Player
Info
List View
Login
Register
Menu Vertical
Modals
Article navigation
Note
Component name
Notification
Panels
Skills
Social
Steps Interactive
Steps Slider
Tabs
Tags
Video
Video Advanced

Gulp

VSDocs comes with some basic Gulp configuration that should optimize and simplify your workflow. Please follow these steps in order to take full advantage of Gulp's build system.

  • 1

    Install Node.js.

    Go to nodejs.org and download the pre-built installer for your platform. Once it's downloaded, install it.
  • 2

    Open the Node.js command prompt (terminal) and install Gulp globally.

    Within the terminal please run npm install -g gulp. If you are on a Mac, you may need to run it with administrator permissions, so you'll have to run sudo npm install -g gulp instead.
  • 3

    Within the terminal, navigate to your project directory.

    Run cd path/to/your/project/, or you can open the terminal directly in the project's folder. Please note that you should navigate to the folder where the 'gulpfile.js' and the 'package.json' files are located, not to the 'template' folder.
  • 4

    Install the dependencies.

    Once you navigated to the project directory, run npm install and wait until all the required modules will be installed. Node.js is going to create a folder called 'node_modules' and inside that folder all the modules will be installed. Please check that folder for the following modules: browser-sync, gulp, gulp-concat, gulp-less, gulp-minify-css, gulp-rename, gulp-uglify. If any of these are missing, then you'll have to install the missing ones manually. To do so run npm install [missing module], for example if 'browser-sync' is missing, then you'll have to run npm install browser-sync.
  • 5

    Run Gulp

    In the 'gulpfile.js' there are two Gulp tasks predefined - 'dev' task and 'prod' task. Please run gulp dev if you are in development and gulp prod if you finished the development process and want to move the project on the server. The difference between these two is that when you are in development mode gulp is going to watch files for changes and refresh the browser when needed, but in production mode it will concatenate and minify the JavaScript files. If you ran the gulp dev task, please don't close the terminal once all the sub tasks are finished because gulp is still watching for changes and this keeps the local server up and running. To stop the process in the terminal please press CTRL + C.
  • 6

    Start developing

    Since Gulp is watch for all the changes you are going to make, it will take care of all the manipulations that should be done with those files. That means when you are going to change some HTML code, gulp will detect that and the corresponding task will refresh the page with the updated code. The same behavior has the '.less' files, each time you'll make some changes within any '.less' file, the new code is going to be compiled into 'CSS' and injected in your browser's page. By the way, all the JS code is recommended to be written into the 'js/dev/modules.js' file and if you need any plugins included in your page, just drop them into the 'js/dev/libs/plugins/' folder and they will be immediately concatenated with all the other '.js' files.

Modules.js and its structure

This file is divided into small self invoking modules. You can find below the used pattern.

copy 

// Module name: [module name]
// Dependencies: [JavaScript library/plugin which is required within this module]
// Docs: [path to the documentation of the required library/plugin]
(function(){
	'use strict';

	var vids = $('.js-video-advanced');

	vids.each(function() {
		var vid = $(this);
		var config = {};
		var userConfig = vid.data('config');
		$.extend(true, config, userConfig);
		
		vid.ytv(config);
	});

})();

Development

VSDocs offers three different workflows you can use: development, pre-production and production.

By default all the files are in production mode, that means HTML files include the concatenated and minified versions of the JavaScript and CSS files. If you want to switch to development or pre-production mode you can use the dev-boilerplate.html or preprod-boilerplate.html accordingly. The dev-boilerplate.html includes all the JavaScript libs, plugins and modules separately and unminified and the unminified CSS file. The preprod-boilerplate.html includes a vendor.js file (JavaScript libs and plugins concatenated and minified), modules.js (uniminified) and the unminified CSS file. In conclusion if you won't customize VSDocs and you just want to use it as it is, then ignore this section. If you want just to customize the modules.js file and the CSS files, then use the preprod-boilerplate.html. And finally, if you want a full control over all JavaScript files, including the libs and plugins, then the dev-boilerplate.html is the solution.

See the paths to the unminified files bellow.

Extensions File Path
CSS style.css css/
Less style.less less/
JavaScript Dev modules.js js/dev/
JavaScript Pre-prod modules.js js/preprod/

Less

You can find below the full list of configurable options available currently in less. In order to update this options, open the 'less/global/_config.less' and make the necessary changes.

Helper Default Description
@color_black #333 Black color, used for all main text content on the page.
@color_grey #99a3b1 Grey color used for less important text content on the page.
@color_grey-dark #808488 Darker version of the regular grey.
@color_grey-lighter #F6F7F8 Lighter version of the regular grey.
@color_grey-light #CBD3DD Used usually for backgrounds.
@color_blue #28C Used for some default states.
@color_blue-light #48CACC Used for info elements.
@color_purple #8D3DEB Alternative color.
@color_orange #FF530D Used for warning states.
@color_green #4b5 Used for success states.
@color_red #FF3625 Used for danger states.
@color_yellow #FDC441 Alternative color for warning.
@font_primary 'Roboto', sans-serif Primary font family.
@font_secondary 'Roboto Slab', serif Alternative font family.
@font-size_base 16 Base font used within the .fz() mixin which makes a conversion from px to em.
@font_thin 100 Thin font weight.
@font_light 300 Light font weight.
@font_normal 400 Regular font weight.
@font_medium 500 Medium font weight.
@font_bold 700 Bold font weight.
@font_black 900 Black font weight.

Helpers

There is also a handy package of global helpers available. They should be used only together with the '.helper' class.

Helper Description
center Align to center.
left Align to left.
right Align to right
hide Hide the element
m0 Margin 0
p0 Padding 0
mb10 Margin bottom 10px
mb20 Margin bottom 20px
mb30 Margin bottom 30px
mb40 Margin bottom 40px
mb60 Margin bottom 60px
mr10 Margin right 10px
mr20 Margin right 20px
mr30 Margin right 30px
mr40 Margin right 40px
mr60 Margin right 60px
ml10 Margin left 10px
ml20 Margin left 20px
ml30 Margin left 30px
ml40 Margin left 40px
ml60 Margin left 60px
mt10 Margin top 10px
mt20 Margin top 20px
Helper Description
mt30 Margin top 30px
mt40 Margin top 40px
mt60 Margin top 60px
pt10 Padding top 10px
pt20 Padding top 20px
pt30 Padding top 30px
pt40 Padding top 40px
pt60 Padding top 60px
pb10 Padding bottom 10px
pb20 Padding bottom 20px
pb30 Padding bottom 30px
pb40 Padding bottom 40px
pb60 Padding bottom 60px
pl10 Padding left 10px
pl20 Padding left 20px
pl30 Padding left 30px
pl40 Padding left 40px
pl60 Padding left 60px
pr10 Padding right 10px
pr20 Padding right 20px
pr30 Padding right 30px
pr40 Padding right 40px
pr60 Padding right 60px