Flie structure
We've prepared a very intuitive file structure. Please click on the folders below to see what's inside.
Docs file hierarchy
- 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.
- libs - JavaScript libraries
- 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.
- dev - unminified version of the scripts
- 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>
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. |
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>
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>
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>
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>
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.]">
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>
| 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 |
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.