48c839d927
This is the snapshot the production landing site (nibiru-framework.com) is deployed from. Brings together the recent splash + docs migration to the v4 "Cosmos" design system, the new in-framework AI module, and the framework groundwork that backs the framework-reference extraction. What lands: - docs/: Astro + Starlight site with the v4 dark cosmic palette, GalaxyHero canvas constellation, Mission Control chat (wired to /api/oracle → api.neuronetz.ai via providers.mjs Ollama), 5-panel MMVC stage (Model · AI · Module · Controller · View), translated EN/DE/JA/ES/FR content, PWA + sitemap + llms.txt + Umami analytics. - docs/design-system/: canonical mockup bundle (source/index-v2.html for splash, source/docs-system.html + preview/ for docs, SPEC.md, tokens). - docs/scripts/extraction/framework-reference-v2.md: deep framework reference (~1.6k lines, file:line citations, every public factory and idiom — basis for the LoRA training corpus. - application/module/ai/: AI module with chat / embed / RAG / agent plugins, plus pdoQuery / httpGet / fileRead tools and Modelfile + smoke-test in training/. - application/module/users/: user / ACL / form-factory traits used as the reference plugin pattern for the framework docs. - application/settings/config/database/: schema + seed migrations including the AI module tables (200–203). - Form factory + autogenerator changes the framework-reference-v2 covers. Production secrets stay out: docs/.env, settings.production.ini and ai.production.ini are all gitignored (.example files are in tree). Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2440 lines
110 KiB
HTML
2440 lines
110 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<!-- Page title -->
|
|
<title>VSDocs - most advanced documentation template on ThemeForest</title>
|
|
<!-- Page description -->
|
|
<meta name="description" content="">
|
|
<!-- Meta -->
|
|
<meta charset="UTF-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<!-- Favicon -->
|
|
<link rel="icon" type="image/png" href="img/favicons/favicon-16x16.png" sizes="16x16">
|
|
<link rel="icon" type="image/png" href="img/favicons/favicon-32x32.png" sizes="32x32">
|
|
<link rel="icon" type="image/png" href="img/favicons/favicon-96x96.png" sizes="96x96">
|
|
<link rel="apple-touch-icon" sizes="57x57" href="img/favicons/apple-touch-icon-57x57.png">
|
|
<link rel="apple-touch-icon" sizes="60x60" href="img/favicons/apple-touch-icon-60x60.png">
|
|
<link rel="apple-touch-icon" sizes="72x72" href="img/favicons/apple-touch-icon-72x72.png">
|
|
<link rel="apple-touch-icon" sizes="76x76" href="img/favicons/apple-touch-icon-76x76.png">
|
|
<link rel="apple-touch-icon" sizes="114x114" href="img/favicons/apple-touch-icon-114x114.png">
|
|
<link rel="apple-touch-icon" sizes="120x120" href="img/favicons/apple-touch-icon-120x120.png">
|
|
<link rel="apple-touch-icon" sizes="144x144" href="img/favicons/apple-touch-icon-144x144.png">
|
|
<link rel="apple-touch-icon" sizes="152x152" href="img/favicons/apple-touch-icon-152x152.png">
|
|
<link rel="apple-touch-icon" sizes="180x180" href="img/favicons/apple-touch-icon-180x180.png">
|
|
<!-- Include StyleSheets -->
|
|
<link rel="stylesheet" href="css/style.min.css">
|
|
<!-- <link rel="stylesheet" href="css/custom.css"> -->
|
|
<script src="js/modernizr.js"></script>
|
|
</head>
|
|
|
|
<body class="">
|
|
<!--[if lt IE 8]>
|
|
<p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
|
|
<![endif]-->
|
|
<!-- Preloader: uncomment this if you want to show a smooth preloader while the page is loading. Don't forget to add the 'js-preload-me' class on the <body> tag. -->
|
|
<!-- <div class="preloader js-preloader"><div class="preloader-animation"></div></div>
|
|
-->
|
|
<!-- End of Preloader -->
|
|
<div class="page js-page ">
|
|
<!-- Header -->
|
|
<div class="header header-over large">
|
|
<div class="container-fluid">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="helper center">
|
|
<!-- Logo Image -->
|
|
<a href="index.html" class="logo-image logo-animated">
|
|
<img src="img/logos/logo-light.png" alt="logo">
|
|
</a>
|
|
<!-- End of Logo Image -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End of Header -->
|
|
<!-- Header Back -->
|
|
<div class="header-back header-back-bg-2 header-back-light header-back-full-page js-full-page">
|
|
<div class="header-back-container">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<!-- Page Info -->
|
|
<div class="page-info helper center">
|
|
<h1 class="page-title">Let's make it simple.</h1>
|
|
<h2 class="page-description">A complet guide on how to use VSDocs.</h2>
|
|
</div>
|
|
<!-- End Page Info -->
|
|
<div class="header-back-buttons helper center">
|
|
<span class="button stroke rounded large white js-scroll-to" data-target="#content">Get started</span>
|
|
<a href="http://support.vsart.me" class="button stroke rounded large white">Ask a question</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Next Section Button -->
|
|
<span class="next-section js-scroll-to " data-target="#content">
|
|
<i class="fa-angle-down fa"></i>
|
|
</span>
|
|
<!-- End of Next Section Button -->
|
|
</div>
|
|
</div>
|
|
<!-- End of Header Back -->
|
|
<div id="content">
|
|
<div class="container">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<!-- Category Info -->
|
|
<div class="category-info " id="file-structure">
|
|
<h3 class="category-title"> Flie structure
|
|
<!-- Fragment Identifier -->
|
|
<a class="fragment-identifier js-fragment-identifier fragment-identifier-scroll" href="#file-structure">
|
|
<i class="fa fa-link"></i>
|
|
</a>
|
|
<!-- End of Fragment Identifier -->
|
|
</h3>
|
|
<h4 class="category-description">We've prepared a very intuitive file structure. Please click on the folders below to see what's inside.</h4>
|
|
</div>
|
|
<!-- End of Caregory Info -->
|
|
<!-- File Tree -->
|
|
<div class="file-tree">
|
|
<div class="file-tree-title"> Docs file hierarchy
|
|
<ul class="file-tree-buttons">
|
|
<li class="js-expand">
|
|
<i class="fa fa-plus"></i> Expand all</li>
|
|
<li class="js-collapse">
|
|
<i class="fa fa-minus"></i> Collapse all</li>
|
|
</ul>
|
|
</div>
|
|
<ul class="file-tree-list js-file-tree" data-expanded="">
|
|
<li class="is-folder">css -
|
|
<span class="file-tree-description">acompiled css files</span>
|
|
<ul>
|
|
<li class="is-file">custom.css -
|
|
<span class="file-tree-description">An empty css file where you can write your custom css code.</span>
|
|
</li>
|
|
<li class="is-file">style.css -
|
|
<span class="file-tree-description">Compiled css (unminified).</span>
|
|
</li>
|
|
<li class="is-file">style.min.css -
|
|
<span class="file-tree-description">Compiled css (minified).</span>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="is-folder">fonts -
|
|
<span class="file-tree-description">fonts used inside the template</span>
|
|
<ul>
|
|
<li class="is-file">fontawesome.otf -
|
|
<span class="file-tree-description">Font Awesome in otf format.</span>
|
|
</li>
|
|
<li class="is-file">fontawesome-webfont.eot -
|
|
<span class="file-tree-description">Font Awesome in eot format.</span>
|
|
</li>
|
|
<li class="is-file">fontawesome-webfont.svg -
|
|
<span class="file-tree-description">Font Awesome in svg format.</span>
|
|
</li>
|
|
<li class="is-file">fontawesome-webfont.ttf -
|
|
<span class="file-tree-description">Font Awesome in ttf format.</span>
|
|
</li>
|
|
<li class="is-file">fontawesome-webfont.woff -
|
|
<span class="file-tree-description">Font Awesome in woff format.</span>
|
|
</li>
|
|
<li class="is-file">fontawesome-webfont.woff2 -
|
|
<span class="file-tree-description">Font Awesome in woff2 format.</span>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="is-folder">img -
|
|
<span class="file-tree-description">images used inside this template</span>
|
|
<ul>
|
|
<li class="is-file">img1.jpg</li>
|
|
<li class="is-file">img2.png</li>
|
|
<li class="is-file">img3.gif</li>
|
|
<li class="is-file">...</li>
|
|
</ul>
|
|
</li>
|
|
<li class="is-folder">js -
|
|
<span class="file-tree-description">javascript files</span>
|
|
<ul>
|
|
<li class="is-folder">dev -
|
|
<span class="file-tree-description">unminified version of the scripts</span>
|
|
<ul>
|
|
<li class="is-folder">libs -
|
|
<span class="file-tree-description">JavaScript libraries</span>
|
|
<ul>
|
|
<li class="is-folder">plugins -
|
|
<span class="file-tree-description">List of jQuery and non-jQuery plugins.</span>
|
|
</li>
|
|
<li class="is-file">jquery.min.js -
|
|
<span class="file-tree-description">jQuery library.</span>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="is-file">custom.js -
|
|
<span class="file-tree-description">An empty JavaScript file where you can write your custom JavaScript code.</span>
|
|
</li>
|
|
<li class="is-file">modernizr.js -
|
|
<span class="file-tree-description">Feature detection library for HTML5 and CSS3.</span>
|
|
</li>
|
|
<li class="is-file">modules.js -
|
|
<span class="file-tree-description">General function, bindings and plug-ins initializations.</span>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="is-file">all.js -
|
|
<span class="file-tree-description">All the JavaScript files concatenated and minified.</span>
|
|
</li>
|
|
<li class="is-file">custom.js -
|
|
<span class="file-tree-description">An empty JavaScript file where you can write your custom JavaScript code.</span>
|
|
</li>
|
|
<li class="is-file">modernizr.js -
|
|
<span class="file-tree-description">Feature detection library for HTML5 and CSS3.</span>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="is-folder">less -
|
|
<span class="file-tree-description">less files</span>
|
|
<ul>
|
|
<li class="is-folder">global -
|
|
<span class="file-tree-description">Global less files which define some general behavior.</span>
|
|
</li>
|
|
<li class="is-folder">libs -
|
|
<span class="file-tree-description">Css and less files required by some JavaScript plugins.</span>
|
|
</li>
|
|
<li class="is-folder">modules -
|
|
<span class="file-tree-description">List of less modules.</span>
|
|
</li>
|
|
<li class="is-file">custom.less -
|
|
<span class="file-tree-description">An empty less file where you can write your custom less code.</span>
|
|
</li>
|
|
<li class="is-file">style.less -
|
|
<span class="file-tree-description">A global less file where all other less files are imported.</span>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="is-folder">swf -
|
|
<span class="file-tree-description">flash files</span>
|
|
<ul>
|
|
<li class="is-file">zeroclipboard.swf -
|
|
<span class="file-tree-description">File used by a copy-to-clipboard plugin.</span>
|
|
</li>
|
|
</ul>
|
|
</li>
|
|
<li class="is-file">dev-boilerplate.html -
|
|
<span class="file-tree-description">Development version of the layout where are included all the unminified version of the files.</span>
|
|
</li>
|
|
<li class="is-file">prod-boilerplate.html -
|
|
<span class="file-tree-description">Pre-production version of the layout where are included the vendor scripts and the modules.js file.</span>
|
|
</li>
|
|
<li class="is-file">index.html -
|
|
<span class="file-tree-description">First header version.</span>
|
|
</li>
|
|
<li class="is-file">index-2.html -
|
|
<span class="file-tree-description">Second header version.</span>
|
|
</li>
|
|
<li class="is-file">index-3.html -
|
|
<span class="file-tree-description">Third header version.</span>
|
|
</li>
|
|
<li class="is-file">... - etc.</li>
|
|
</ul>
|
|
</div>
|
|
<!-- End of FIle Tree -->
|
|
<!-- Category Info -->
|
|
<div class="category-info " id="grid-docs">
|
|
<h3 class="category-title"> Grid
|
|
<!-- Fragment Identifier -->
|
|
<a class="fragment-identifier js-fragment-identifier fragment-identifier-scroll" href="#grid-docs">
|
|
<i class="fa fa-link"></i>
|
|
</a>
|
|
<!-- End of Fragment Identifier -->
|
|
</h3>
|
|
<h4 class="category-description">VSDocs uses Bootstrap's grid system, you can see its structure below. For more information please visit
|
|
<a href='http://getbootstrap.com/css/#grid-example-basic'>the official bootstrap documentation</a> page.</h4>
|
|
</div>
|
|
<!-- End of Caregory Info -->
|
|
<div class="code-highlight">
|
|
<span class="js-copy-to-clipboard copy-code">copy</span> <pre><code class="language-markup js-code"><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>
|
|
</code></pre> </div>
|
|
<!-- Category Info -->
|
|
<div class="category-info " id="typography">
|
|
<h3 class="category-title"> Typography
|
|
<!-- Fragment Identifier -->
|
|
<a class="fragment-identifier js-fragment-identifier fragment-identifier-scroll" href="#typography">
|
|
<i class="fa fa-link"></i>
|
|
</a>
|
|
<!-- End of Fragment Identifier -->
|
|
</h3>
|
|
<h4 class="category-description">All you need for writing and presenting your ideas into a user friendly way.</h4>
|
|
</div>
|
|
<!-- End of Caregory Info -->
|
|
<div class="code-highlight">
|
|
<span class="js-copy-to-clipboard copy-code">copy</span> <pre><code class="language-markup js-code"><!-- 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>
|
|
</code></pre> </div>
|
|
<!-- Category Info -->
|
|
<div class="category-info " id="layouts-docs">
|
|
<h3 class="category-title"> Layouts
|
|
<!-- Fragment Identifier -->
|
|
<a class="fragment-identifier js-fragment-identifier fragment-identifier-scroll" href="#layouts-docs">
|
|
<i class="fa fa-link"></i>
|
|
</a>
|
|
<!-- End of Fragment Identifier -->
|
|
</h3>
|
|
<h4 class="category-description">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.</h4>
|
|
</div>
|
|
<!-- End of Caregory Info -->
|
|
<div class="tabs js-tabs">
|
|
<h4 class="tab-title"> Boxed </h4>
|
|
<div class="tab-content">
|
|
<div class="code-highlight helper m0">
|
|
<span class="js-copy-to-clipboard copy-code">copy</span> <pre><code class="language-markup js-code">
|
|
<!-- 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>
|
|
</code></pre></div>
|
|
</div>
|
|
<h4 class="tab-title"> Boxed left </h4>
|
|
<div class="tab-content">
|
|
<div class="code-highlight helper m0">
|
|
<span class="js-copy-to-clipboard copy-code">copy</span> <pre><code class="language-markup js-code">
|
|
<!-- 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>
|
|
</code></pre></div>
|
|
</div>
|
|
<h4 class="tab-title"> Boxed right </h4>
|
|
<div class="tab-content">
|
|
<div class="code-highlight helper m0">
|
|
<span class="js-copy-to-clipboard copy-code">copy</span> <pre><code class="language-markup js-code">
|
|
<!-- 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>
|
|
</code></pre></div>
|
|
</div>
|
|
<h4 class="tab-title"> Full left </h4>
|
|
<div class="tab-content">
|
|
<div class="code-highlight helper m0">
|
|
<span class="js-copy-to-clipboard copy-code">copy</span> <pre><code class="language-markup js-code">
|
|
<!-- 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>
|
|
</code></pre></div>
|
|
</div>
|
|
<h4 class="tab-title"> Full right </h4>
|
|
<div class="tab-content">
|
|
<div class="code-highlight helper m0">
|
|
<span class="js-copy-to-clipboard copy-code">copy</span> <pre><code class="language-markup js-code">
|
|
<!-- 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>
|
|
</code></pre></div>
|
|
</div>
|
|
</div>
|
|
<!-- Category Info -->
|
|
<div class="category-info " id="preloader">
|
|
<h3 class="category-title"> Preloader
|
|
<!-- Fragment Identifier -->
|
|
<a class="fragment-identifier js-fragment-identifier fragment-identifier-scroll" href="#preloader">
|
|
<i class="fa fa-link"></i>
|
|
</a>
|
|
<!-- End of Fragment Identifier -->
|
|
</h3>
|
|
<h4 class="category-description">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.</h4>
|
|
</div>
|
|
<!-- End of Caregory Info -->
|
|
<div class="code-highlight">
|
|
<span class="js-copy-to-clipboard copy-code">copy</span> <pre><code class="language-markup js-code">
|
|
<!-- 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>
|
|
|
|
</code></pre></div>
|
|
<!-- Category Info -->
|
|
<div class="category-info " id="headers-page-info">
|
|
<h3 class="category-title"> Header & Header Back
|
|
<!-- Fragment Identifier -->
|
|
<a class="fragment-identifier js-fragment-identifier fragment-identifier-scroll" href="#headers-page-info">
|
|
<i class="fa fa-link"></i>
|
|
</a>
|
|
<!-- End of Fragment Identifier -->
|
|
</h3>
|
|
<h4 class="category-description">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.</h4>
|
|
</div>
|
|
<!-- End of Caregory Info -->
|
|
<div class="code-highlight">
|
|
<span class="js-copy-to-clipboard copy-code">copy</span> <pre><code class="language-markup js-code">
|
|
<!-- Header markup -->
|
|
<div class="header [add some helpers here]"></div>
|
|
</code></pre></div>
|
|
<!-- Table -->
|
|
<div class="table-responsive">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Helper</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="">
|
|
<th scope="row">small</th>
|
|
<td>makes header smaller in height</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">large</th>
|
|
<td>makes header bigger in height</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">header-over</th>
|
|
<td>changes the header's position to absolute, so it comes over the elements</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">js-header-fixed</th>
|
|
<td>makes the header sticky and the sticky sidebar from the same page will be transformed into a static one</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">header-fixed-light</th>
|
|
<td>use this class together with the '.js-header-fixed' class for the light versions of the header</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- End of Table -->
|
|
<div class="code-highlight">
|
|
<span class="js-copy-to-clipboard copy-code">copy</span> <pre><code class="language-markup js-code">
|
|
<!-- 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>
|
|
</code></pre></div>
|
|
<!-- Table -->
|
|
<div class="table-responsive">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Helper</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="">
|
|
<th scope="row">header-back-large</th>
|
|
<td>makes the block larger</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">header-back-small</th>
|
|
<td>makes the block smaller</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">header-back-light</th>
|
|
<td>invert the text color, for cases when the background image is dark</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">pheader-back-full-page</th>
|
|
<td>usually used with the JavaScript class 'js-full-page', switches to display table and aligns vertically the content to the middle.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- End of Table -->
|
|
<!-- Category Info -->
|
|
<div class="category-info " id="footer-docs">
|
|
<h3 class="category-title"> Footer
|
|
<!-- Fragment Identifier -->
|
|
<a class="fragment-identifier js-fragment-identifier fragment-identifier-scroll" href="#footer-docs">
|
|
<i class="fa fa-link"></i>
|
|
</a>
|
|
<!-- End of Fragment Identifier -->
|
|
</h3>
|
|
<h4 class="category-description">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.
|
|
<br>
|
|
<br>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.</h4>
|
|
</div>
|
|
<!-- End of Caregory Info -->
|
|
<div class="code-highlight">
|
|
<span class="js-copy-to-clipboard copy-code">copy</span> <pre><code class="language-markup js-code">
|
|
<!-- 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>
|
|
</code></pre></div>
|
|
<div class="code-highlight">
|
|
<span class="js-copy-to-clipboard copy-code">copy</span> <pre><code class="language-markup js-code">
|
|
<!-- 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>
|
|
</code></pre></div>
|
|
<!-- Category Info -->
|
|
<div class="category-info " id="logo-docs">
|
|
<h3 class="category-title"> Logo
|
|
<!-- Fragment Identifier -->
|
|
<a class="fragment-identifier js-fragment-identifier fragment-identifier-scroll" href="#logo-docs">
|
|
<i class="fa fa-link"></i>
|
|
</a>
|
|
<!-- End of Fragment Identifier -->
|
|
</h3>
|
|
<h4 class="category-description">As usual, we have two types of logos: text and image. See below the markup for both of them.</h4>
|
|
</div>
|
|
<!-- End of Caregory Info -->
|
|
<div class="code-highlight">
|
|
<span class="js-copy-to-clipboard copy-code">copy</span> <pre><code class="language-markup js-code">
|
|
<!-- 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>
|
|
</code></pre></div>
|
|
<!-- Category Info -->
|
|
<div class="category-info " id="menus-docs">
|
|
<h3 class="category-title"> Menus
|
|
<!-- Fragment Identifier -->
|
|
<a class="fragment-identifier js-fragment-identifier fragment-identifier-scroll" href="#menus-docs">
|
|
<i class="fa fa-link"></i>
|
|
</a>
|
|
<!-- End of Fragment Identifier -->
|
|
</h3>
|
|
<h4 class="category-description">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.</h4>
|
|
</div>
|
|
<!-- End of Caregory Info -->
|
|
<div class="code-highlight">
|
|
<span class="js-copy-to-clipboard copy-code">copy</span> <pre><code class="language-markup js-code">
|
|
<!-- 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>
|
|
</code></pre></div>
|
|
<!-- Table -->
|
|
<div class="table-responsive">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Helper</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="">
|
|
<th scope="row">upper</th>
|
|
<td>all the letters from the menu become uppercase</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">menu-light</th>
|
|
<td>invert the text color of the menu</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- End of Table -->
|
|
<div class="code-highlight">
|
|
<span class="js-copy-to-clipboard copy-code">copy</span> <pre><code class="language-markup js-code">
|
|
<!-- 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>
|
|
</code></pre></div>
|
|
<!-- Table -->
|
|
<div class="table-responsive">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Helper</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="">
|
|
<th scope="row">menu-side-trigger-right</th>
|
|
<td>moves the trigger to the right</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">menu-side-trigger-light</th>
|
|
<td>invert the color of the trigger</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- End of Table -->
|
|
<div class="code-highlight">
|
|
<span class="js-copy-to-clipboard copy-code">copy</span> <pre><code class="language-markup js-code">
|
|
<!-- 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>
|
|
</code></pre></div>
|
|
<!-- Table -->
|
|
<div class="table-responsive">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Attribute</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="">
|
|
<th scope="row">data-prepend-to</th>
|
|
<td>a selector of the element where the mobile dropdown menu should be prepended</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">data-select</th>
|
|
<td>the header of the mobile dropdown menu</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- End of Table -->
|
|
<!-- Category Info -->
|
|
<div class="category-info " id="languages-docs">
|
|
<h3 class="category-title"> Languages
|
|
<!-- Fragment Identifier -->
|
|
<a class="fragment-identifier js-fragment-identifier fragment-identifier-scroll" href="#languages-docs">
|
|
<i class="fa fa-link"></i>
|
|
</a>
|
|
<!-- End of Fragment Identifier -->
|
|
</h3>
|
|
<h4 class="category-description">If your documentation is multilingual, than you may find this component useful. The markup for the language picker you can find below.</h4>
|
|
</div>
|
|
<!-- End of Caregory Info -->
|
|
<div class="code-highlight">
|
|
<span class="js-copy-to-clipboard copy-code">copy</span> <pre><code class="language-markup js-code">
|
|
<!-- 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>
|
|
</code></pre></div>
|
|
<!-- Table -->
|
|
<div class="table-responsive">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Helper</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="">
|
|
<th scope="row">languages-light</th>
|
|
<td>invert the color of the text</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- End of Table -->
|
|
<!-- Category Info -->
|
|
<div class="category-info " id="search-docs">
|
|
<h3 class="category-title"> Search
|
|
<!-- Fragment Identifier -->
|
|
<a class="fragment-identifier js-fragment-identifier fragment-identifier-scroll" href="#search-docs">
|
|
<i class="fa fa-link"></i>
|
|
</a>
|
|
<!-- End of Fragment Identifier -->
|
|
</h3>
|
|
<h4 class="category-description">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.</h4>
|
|
</div>
|
|
<!-- End of Caregory Info -->
|
|
<div class="code-highlight">
|
|
<span class="js-copy-to-clipboard copy-code">copy</span> <pre><code class="language-markup js-code">
|
|
<!-- 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>
|
|
</code></pre></div>
|
|
<!-- Category Info -->
|
|
<div class="category-info " id="icons-docs">
|
|
<h3 class="category-title"> Icons
|
|
<!-- Fragment Identifier -->
|
|
<a class="fragment-identifier js-fragment-identifier fragment-identifier-scroll" href="#icons-docs">
|
|
<i class="fa fa-link"></i>
|
|
</a>
|
|
<!-- End of Fragment Identifier -->
|
|
</h3>
|
|
<h4 class="category-description">VSDocs comes with two amazing icon collections included. There is a huge variety of
|
|
<a href='http://themes-pixeden.com/font-demos/7-stroke/'>stroke</a> and
|
|
<a href='http://fontawesome.io/icons/'>filled</a> icons available.</h4>
|
|
</div>
|
|
<!-- End of Caregory Info -->
|
|
<div class="code-highlight">
|
|
<span class="js-copy-to-clipboard copy-code">copy</span> <pre><code class="language-markup js-code">
|
|
<!-- Stroke Search Icon -->
|
|
<i class="pe-7s-search"></i>
|
|
|
|
<!-- Filled Search Icon -->
|
|
<i class="fa fa-search"></i>
|
|
</code></pre></div>
|
|
<!-- Category Info -->
|
|
<div class="category-info " id="rotator-docs">
|
|
<h3 class="category-title"> Rotator
|
|
<!-- Fragment Identifier -->
|
|
<a class="fragment-identifier js-fragment-identifier fragment-identifier-scroll" href="#rotator-docs">
|
|
<i class="fa fa-link"></i>
|
|
</a>
|
|
<!-- End of Fragment Identifier -->
|
|
</h3>
|
|
<h4 class="category-description">If you need more action inside your header, than a text rotator could be the best solution for you.</h4>
|
|
</div>
|
|
<!-- End of Caregory Info -->
|
|
<div class="code-highlight">
|
|
<span class="js-copy-to-clipboard copy-code">copy</span> <pre><code class="language-markup js-code">
|
|
<!-- 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>
|
|
</code></pre></div>
|
|
<!-- Category Info -->
|
|
<div class="category-info " id="category-info-docs">
|
|
<h3 class="category-title"> Category info
|
|
<!-- Fragment Identifier -->
|
|
<a class="fragment-identifier js-fragment-identifier fragment-identifier-scroll" href="#category-info-docs">
|
|
<i class="fa fa-link"></i>
|
|
</a>
|
|
<!-- End of Fragment Identifier -->
|
|
</h3>
|
|
<h4 class="category-description">This is a text separator for your categories.</h4>
|
|
</div>
|
|
<!-- End of Caregory Info -->
|
|
<div class="code-highlight">
|
|
<span class="js-copy-to-clipboard copy-code">copy</span> <pre><code class="language-markup js-code">
|
|
<!-- 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>
|
|
</code></pre></div>
|
|
<!-- Category Info -->
|
|
<div class="category-info " id="article-docs">
|
|
<h3 class="category-title"> Article
|
|
<!-- Fragment Identifier -->
|
|
<a class="fragment-identifier js-fragment-identifier fragment-identifier-scroll" href="#article-docs">
|
|
<i class="fa fa-link"></i>
|
|
</a>
|
|
<!-- End of Fragment Identifier -->
|
|
</h3>
|
|
<h4 class="category-description">The markup of an article is fairly simple. As content of your article you can use any media supported by VSDocs.</h4>
|
|
</div>
|
|
<!-- End of Caregory Info -->
|
|
<div class="code-highlight">
|
|
<span class="js-copy-to-clipboard copy-code">copy</span> <pre><code class="language-markup js-code">
|
|
<!-- 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>
|
|
</code></pre></div>
|
|
<!-- Category Info -->
|
|
<div class="category-info " id="social-share-docs">
|
|
<h3 class="category-title"> Social share
|
|
<!-- Fragment Identifier -->
|
|
<a class="fragment-identifier js-fragment-identifier fragment-identifier-scroll" href="#social-share-docs">
|
|
<i class="fa fa-link"></i>
|
|
</a>
|
|
<!-- End of Fragment Identifier -->
|
|
</h3>
|
|
<h4 class="category-description">Social buttons are initialized automatically, you only have to follow the markup below. More options available on the plugin's
|
|
<a href='https://github.com/sapegin/social-likes'>documentation page</a>. In order to have your page/article/image shared correctly, please add the
|
|
<a href='http://ogp.me/'>Open Graph</a> (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
|
|
<a href='https://developers.facebook.com/tools/debug/'>Facebook Open Graph debugger</a> or
|
|
<a href='https://cards-dev.twitter.com/validator'>Twitter Card Validator</a>.</h4>
|
|
</div>
|
|
<!-- End of Caregory Info -->
|
|
<div class="code-highlight">
|
|
<span class="js-copy-to-clipboard copy-code">copy</span> <pre><code class="language-markup js-code">
|
|
<!-- 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>
|
|
</code></pre></div>
|
|
<div class="code-highlight">
|
|
<span class="js-copy-to-clipboard copy-code">copy</span> <pre><code class="language-markup js-code">
|
|
<!-- 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.]">
|
|
</code></pre></div>
|
|
<!-- Category Info -->
|
|
<div class="category-info " id="comments-docs">
|
|
<h3 class="category-title"> Comments
|
|
<!-- Fragment Identifier -->
|
|
<a class="fragment-identifier js-fragment-identifier fragment-identifier-scroll" href="#comments-docs">
|
|
<i class="fa fa-link"></i>
|
|
</a>
|
|
<!-- End of Fragment Identifier -->
|
|
</h3>
|
|
<h4 class="category-description">This component supports nesting responsive comments.</h4>
|
|
</div>
|
|
<!-- End of Caregory Info -->
|
|
<div class="code-highlight">
|
|
<span class="js-copy-to-clipboard copy-code">copy</span> <pre><code class="language-markup js-code">
|
|
<!-- 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>
|
|
</code></pre></div>
|
|
<div class="code-highlight">
|
|
<span class="js-copy-to-clipboard copy-code">copy</span> <pre><code class="language-markup js-code">
|
|
<!-- 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>
|
|
</code></pre></div>
|
|
<div class="code-highlight">
|
|
<span class="js-copy-to-clipboard copy-code">copy</span> <pre><code class="language-markup js-code">
|
|
<!-- 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>
|
|
</code></pre></div>
|
|
<!-- Category Info -->
|
|
<div class="category-info " id="fragment-identifier-docs">
|
|
<h3 class="category-title"> Fragment identifier
|
|
<!-- Fragment Identifier -->
|
|
<a class="fragment-identifier js-fragment-identifier fragment-identifier-scroll" href="#fragment-identifier-docs">
|
|
<i class="fa fa-link"></i>
|
|
</a>
|
|
<!-- End of Fragment Identifier -->
|
|
</h3>
|
|
<h4 class="category-description">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'.</h4>
|
|
</div>
|
|
<!-- End of Caregory Info -->
|
|
<div class="code-highlight">
|
|
<span class="js-copy-to-clipboard copy-code">copy</span> <pre><code class="language-markup js-code">
|
|
<!-- 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>
|
|
</code></pre></div>
|
|
<!-- Table -->
|
|
<div class="table-responsive">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Helper</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="">
|
|
<th scope="row">fragment-identifier-scroll</th>
|
|
<td>smooth scroll to the clicked section</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- End of Table -->
|
|
<!-- Category Info -->
|
|
<div class="category-info " id="number-docs">
|
|
<h3 class="category-title"> Number
|
|
<!-- Fragment Identifier -->
|
|
<a class="fragment-identifier js-fragment-identifier fragment-identifier-scroll" href="#number-docs">
|
|
<i class="fa fa-link"></i>
|
|
</a>
|
|
<!-- End of Fragment Identifier -->
|
|
</h3>
|
|
<h4 class="category-description">Use this component if you need to show up some statistics, or numeric data in a beautiful way. There is a huge collection of
|
|
<a href='http://themes-pixeden.com/font-demos/7-stroke/'>stroke</a> and
|
|
<a href='http://fontawesome.io/icons/'>filled</a> icons available.</h4>
|
|
</div>
|
|
<!-- End of Caregory Info -->
|
|
<div class="code-highlight">
|
|
<span class="js-copy-to-clipboard copy-code">copy</span> <pre><code class="language-markup js-code">
|
|
<!-- 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>
|
|
</code></pre></div>
|
|
<!-- Category Info -->
|
|
<div class="category-info " id="youtube-playlist-docs">
|
|
<h3 class="category-title"> YouTube playlist
|
|
<!-- Fragment Identifier -->
|
|
<a class="fragment-identifier js-fragment-identifier fragment-identifier-scroll" href="#youtube-playlist-docs">
|
|
<i class="fa fa-link"></i>
|
|
</a>
|
|
<!-- End of Fragment Identifier -->
|
|
</h3>
|
|
<h4 class="category-description">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
|
|
<a href='https://github.com/Giorgio003/Youtube-TV'>github</a>, 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.</h4>
|
|
</div>
|
|
<!-- End of Caregory Info -->
|
|
<div class="code-highlight">
|
|
<span class="js-copy-to-clipboard copy-code">copy</span> <pre><code class="language-markup js-code">
|
|
<!-- 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 -->
|
|
</code></pre></div>
|
|
<!-- Category Info -->
|
|
<div class="category-info " id="custom-video-docs">
|
|
<h3 class="category-title"> Custom Video
|
|
<!-- Fragment Identifier -->
|
|
<a class="fragment-identifier js-fragment-identifier fragment-identifier-scroll" href="#custom-video-docs">
|
|
<i class="fa fa-link"></i>
|
|
</a>
|
|
<!-- End of Fragment Identifier -->
|
|
</h3>
|
|
<h4 class="category-description">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
|
|
<a href='http://docs.videojs.com/docs/guides/options.html'>Videojs' documentation</a> page. The possibilities are almost limitless.</h4>
|
|
</div>
|
|
<!-- End of Caregory Info -->
|
|
<div class="code-highlight">
|
|
<span class="js-copy-to-clipboard copy-code">copy</span> <pre><code class="language-markup js-code">
|
|
<!-- 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>
|
|
</code></pre></div>
|
|
<!-- Category Info -->
|
|
<div class="category-info " id="custom-video-playlist-docs">
|
|
<h3 class="category-title"> Custom Video Playlist
|
|
<!-- Fragment Identifier -->
|
|
<a class="fragment-identifier js-fragment-identifier fragment-identifier-scroll" href="#custom-video-playlist-docs">
|
|
<i class="fa fa-link"></i>
|
|
</a>
|
|
<!-- End of Fragment Identifier -->
|
|
</h3>
|
|
<h4 class="category-description">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.
|
|
<br>
|
|
<br>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
|
|
<a href='https://github.com/tim-peterson/videojs-playlist'>custom options</a> that you can use by filling the 'data-config' attribute.</h4>
|
|
</div>
|
|
<!-- End of Caregory Info -->
|
|
<div class="code-highlight">
|
|
<span class="js-copy-to-clipboard copy-code">copy</span> <pre><code class="language-markup js-code">
|
|
<!-- 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>
|
|
</code></pre></div>
|
|
<!-- Category Info -->
|
|
<div class="category-info " id="browser-support-docs">
|
|
<h3 class="category-title"> Browser support
|
|
<!-- Fragment Identifier -->
|
|
<a class="fragment-identifier js-fragment-identifier fragment-identifier-scroll" href="#browser-support-docs">
|
|
<i class="fa fa-link"></i>
|
|
</a>
|
|
<!-- End of Fragment Identifier -->
|
|
</h3>
|
|
<h4 class="category-description">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.
|
|
<br>
|
|
<br>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.</h4>
|
|
</div>
|
|
<!-- End of Caregory Info -->
|
|
<div class="tabs js-tabs">
|
|
<h4 class="tab-title">Regular</h4>
|
|
<div class="tab-content">
|
|
<div class="code-highlight helper m0">
|
|
<span class="js-copy-to-clipboard copy-code">copy</span> <pre><code class="language-markup js-code">
|
|
<!-- 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>
|
|
</code></pre></div>
|
|
</div>
|
|
<h4 class="tab-title"> Compact </h4>
|
|
<div class="tab-content">
|
|
<div class="code-highlight helper m0">
|
|
<span class="js-copy-to-clipboard copy-code">copy</span> <pre><code class="language-markup js-code">
|
|
<!-- 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>
|
|
</code></pre></div>
|
|
</div>
|
|
<h4 class="tab-title"> Browser Icons </h4>
|
|
<div class="tab-content">
|
|
<div class="code-highlight helper m0">
|
|
<span class="js-copy-to-clipboard copy-code">copy</span> <pre><code class="language-markup js-code">
|
|
<!-- 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>
|
|
</code></pre></div>
|
|
</div>
|
|
</div>
|
|
<!-- Table -->
|
|
<div class="table-responsive">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Helper</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="">
|
|
<th scope="row">{ not specified }</th>
|
|
<td>no label</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">browser-recommended</th>
|
|
<td>adds a recommended label</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">browser-partial</th>
|
|
<td>adds a partial support label</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- End of Table -->
|
|
<!-- Category Info -->
|
|
<div class="category-info " id="tables-docs">
|
|
<h3 class="category-title"> Tables
|
|
<!-- Fragment Identifier -->
|
|
<a class="fragment-identifier js-fragment-identifier fragment-identifier-scroll" href="#tables-docs">
|
|
<i class="fa fa-link"></i>
|
|
</a>
|
|
<!-- End of Fragment Identifier -->
|
|
</h3>
|
|
<h4 class="category-description">The tables component is an extension of the bootstrap's table component, please visit
|
|
<a href='http://getbootstrap.com/css/#tables'>bootstrap's official documentation</a> page for full feature list.</h4>
|
|
</div>
|
|
<!-- End of Caregory Info -->
|
|
<div class="code-highlight">
|
|
<span class="js-copy-to-clipboard copy-code">copy</span> <pre><code class="language-markup js-code">
|
|
<!-- 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>
|
|
</code></pre></div>
|
|
<!-- Category Info -->
|
|
<div class="category-info " id="changelog-docs">
|
|
<h3 class="category-title"> Changelog
|
|
<!-- Fragment Identifier -->
|
|
<a class="fragment-identifier js-fragment-identifier fragment-identifier-scroll" href="#changelog-docs">
|
|
<i class="fa fa-link"></i>
|
|
</a>
|
|
<!-- End of Fragment Identifier -->
|
|
</h3>
|
|
<h4 class="category-description">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.</h4>
|
|
</div>
|
|
<!-- End of Caregory Info -->
|
|
<div class="code-highlight">
|
|
<span class="js-copy-to-clipboard copy-code">copy</span> <pre><code class="language-markup js-code">
|
|
<!-- 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>
|
|
</code></pre></div>
|
|
<!-- Category Info -->
|
|
<div class="category-info " id="contact-form-docs">
|
|
<h3 class="category-title"> Contact form
|
|
<!-- Fragment Identifier -->
|
|
<a class="fragment-identifier js-fragment-identifier fragment-identifier-scroll" href="#contact-form-docs">
|
|
<i class="fa fa-link"></i>
|
|
</a>
|
|
<!-- End of Fragment Identifier -->
|
|
</h3>
|
|
<h4 class="category-description">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
|
|
<a href='mail-template-contacts.html'>email template</a>. Bellow you'll find the form's markup with its default validation attributes. For more information on data validation please visit the
|
|
<a href='https://github.com/victorjonsson/jQuery-Form-Validator'>plugin's official documentation</a>. 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.</h4>
|
|
</div>
|
|
<!-- End of Caregory Info -->
|
|
<div class="code-highlight">
|
|
<span class="js-copy-to-clipboard copy-code">copy</span> <pre><code class="language-markup js-code">
|
|
<!-- 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>
|
|
</code></pre></div>
|
|
<!-- Category Info -->
|
|
<div class="category-info " id="more-components">
|
|
<h3 class="category-title"> More components
|
|
<!-- Fragment Identifier -->
|
|
<a class="fragment-identifier js-fragment-identifier fragment-identifier-scroll" href="#more-components">
|
|
<i class="fa fa-link"></i>
|
|
</a>
|
|
<!-- End of Fragment Identifier -->
|
|
</h3>
|
|
<h4 class="category-description">Here's the full list of all components which weren't mentioned before.</h4>
|
|
</div>
|
|
<!-- End of Caregory Info -->
|
|
<div class="row">
|
|
<div class="col-md-4">
|
|
<!-- Table -->
|
|
<div class="table-responsive">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Component name</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="">
|
|
<th scope="row">
|
|
<a href='tutorial.html'>Before and After</a>
|
|
</th>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">
|
|
<a href='book.html'>Book</a>
|
|
</th>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">
|
|
<a href='book.html'>Books Grid</a>
|
|
</th>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">
|
|
<a href='boxes.html'>Boxes</a>
|
|
</th>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">
|
|
<a href='panels.html'>Browser Support</a>
|
|
</th>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">
|
|
<a href='buttons.html'>Buttons</a>
|
|
</th>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">
|
|
<a href='views.html'>Category List</a>
|
|
</th>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">
|
|
<a href='code.html'>Code Highlight</a>
|
|
</th>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">
|
|
<a href='contacts.html'>Contacts Info</a>
|
|
</th>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">
|
|
<a href='contacts.html'>Contacts</a>
|
|
</th>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- End of Table -->
|
|
</div>
|
|
<div class="col-md-4">
|
|
<!-- Table -->
|
|
<div class="table-responsive">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Component name</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="">
|
|
<th scope="row">
|
|
<a href='faq.html'>Faq</a>
|
|
</th>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">
|
|
<a href='media.html'>Gif Player</a>
|
|
</th>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">
|
|
<a href='misc.html'>Info</a>
|
|
</th>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">
|
|
<a href='views.html'>List View</a>
|
|
</th>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">
|
|
<a href='login.html'>Login</a>
|
|
</th>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">
|
|
<a href='register.html'>Register</a>
|
|
</th>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">
|
|
<a href='views-left.html'>Menu Vertical</a>
|
|
</th>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">
|
|
<a href='misc.html'>Modals</a>
|
|
</th>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">
|
|
<a href='tutorial.html'>Article navigation</a>
|
|
</th>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">
|
|
<a href='notes.html'>Note</a>
|
|
</th>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- End of Table -->
|
|
</div>
|
|
<div class="col-md-4">
|
|
<!-- Table -->
|
|
<div class="table-responsive">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Component name</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="">
|
|
<th scope="row">
|
|
<a href='notification.html'>Notification</a>
|
|
</th>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">
|
|
<a href='panels.html'>Panels</a>
|
|
</th>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">
|
|
<a href='misc.html'>Skills</a>
|
|
</th>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">
|
|
<a href='buttons.html'>Social</a>
|
|
</th>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">
|
|
<a href='steps.html'>Steps Interactive</a>
|
|
</th>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">
|
|
<a href='steps.html'>Steps Slider</a>
|
|
</th>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">
|
|
<a href='steps.html'>Tabs</a>
|
|
</th>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">
|
|
<a href='views-left.html'>Tags</a>
|
|
</th>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">
|
|
<a href='Media.html'>Video</a>
|
|
</th>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">
|
|
<a href='Media.html'>Video Advanced</a>
|
|
</th>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- End of Table -->
|
|
</div>
|
|
</div>
|
|
<!-- Category Info -->
|
|
<div class="category-info " id="gulp">
|
|
<h3 class="category-title"> Gulp
|
|
<!-- Fragment Identifier -->
|
|
<a class="fragment-identifier js-fragment-identifier fragment-identifier-scroll" href="#gulp">
|
|
<i class="fa fa-link"></i>
|
|
</a>
|
|
<!-- End of Fragment Identifier -->
|
|
</h3>
|
|
<h4 class="category-description">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.</h4>
|
|
</div>
|
|
<!-- End of Caregory Info -->
|
|
<!-- Steps -->
|
|
<ul class="steps">
|
|
<li class="step">
|
|
<span class="step-number">1</span>
|
|
<h4 class="step-title">Install Node.js.</h4>
|
|
<div class="step-content">Go to
|
|
<a href='https://nodejs.org/en/download/'>nodejs.org</a> and download the pre-built installer for your platform. Once it's downloaded, install it.</div>
|
|
</li>
|
|
<li class="step">
|
|
<span class="step-number">2</span>
|
|
<h4 class="step-title">Open the Node.js command prompt (terminal) and install Gulp globally.</h4>
|
|
<div class="step-content">Within the terminal please run
|
|
<span class='mark fill grey'>npm install -g gulp</span>. If you are on a Mac, you may need to run it with administrator permissions, so you'll have to run
|
|
<span class='mark fill grey'>sudo npm install -g gulp</span> instead.</div>
|
|
</li>
|
|
<li class="step">
|
|
<span class="step-number">3</span>
|
|
<h4 class="step-title">Within the terminal, navigate to your project directory.</h4>
|
|
<div class="step-content">Run
|
|
<span class='mark fill grey'>cd path/to/your/project/</span>, 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.</div>
|
|
</li>
|
|
<li class="step">
|
|
<span class="step-number">4</span>
|
|
<h4 class="step-title">Install the dependencies.</h4>
|
|
<div class="step-content">Once you navigated to the project directory, run
|
|
<span class='mark fill grey'>npm install</span> 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
|
|
<span class='mark fill grey'>npm install [missing module]</span>, for example if 'browser-sync' is missing, then you'll have to run
|
|
<span class='mark fill grey'>npm install browser-sync</span>.</div>
|
|
</li>
|
|
<li class="step">
|
|
<span class="step-number">5</span>
|
|
<h4 class="step-title">Run Gulp</h4>
|
|
<div class="step-content">In the 'gulpfile.js' there are two Gulp tasks predefined - 'dev' task and 'prod' task. Please run
|
|
<span class='mark fill grey'>gulp dev</span> if you are in development and
|
|
<span class='mark fill grey'>gulp prod</span> 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
|
|
<span class='mark fill grey'>gulp dev</span> 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
|
|
<span class='mark fill grey'>CTRL + C</span>.</div>
|
|
</li>
|
|
<li class="step">
|
|
<span class="step-number">6</span>
|
|
<h4 class="step-title">Start developing</h4>
|
|
<div class="step-content">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.</div>
|
|
</li>
|
|
</ul>
|
|
<!-- End of Steps -->
|
|
<!-- Category Info -->
|
|
<div class="category-info " id="modules-docs">
|
|
<h3 class="category-title"> Modules.js and its structure
|
|
<!-- Fragment Identifier -->
|
|
<a class="fragment-identifier js-fragment-identifier fragment-identifier-scroll" href="#modules-docs">
|
|
<i class="fa fa-link"></i>
|
|
</a>
|
|
<!-- End of Fragment Identifier -->
|
|
</h3>
|
|
<h4 class="category-description">This file is divided into small self invoking modules. You can find below the used pattern.</h4>
|
|
</div>
|
|
<!-- End of Caregory Info -->
|
|
<div class="code-highlight">
|
|
<span class="js-copy-to-clipboard copy-code">copy</span> <pre><code class="language-javascript js-code">
|
|
// 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);
|
|
});
|
|
|
|
})();
|
|
</code></pre></div>
|
|
<!-- Category Info -->
|
|
<div class="category-info " id="unminified-docs">
|
|
<h3 class="category-title"> Development
|
|
<!-- Fragment Identifier -->
|
|
<a class="fragment-identifier js-fragment-identifier fragment-identifier-scroll" href="#unminified-docs">
|
|
<i class="fa fa-link"></i>
|
|
</a>
|
|
<!-- End of Fragment Identifier -->
|
|
</h3>
|
|
<h4 class="category-description">VSDocs offers three different workflows you can use: development, pre-production and production.</h4>
|
|
<p class="category-content"> 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
|
|
<span class='mark fill grey'>dev-boilerplate.html</span> or
|
|
<span class='mark fill grey'>preprod-boilerplate.html</span> accordingly. The
|
|
<span class='mark fill grey'>dev-boilerplate.html</span> includes all the JavaScript libs, plugins and modules separately and unminified and the unminified CSS file. The
|
|
<span class='mark fill grey'>preprod-boilerplate.html</span> 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
|
|
<span class='mark fill grey'>preprod-boilerplate.html</span>. And finally, if you want a full control over all JavaScript files, including the libs and plugins, then the
|
|
<span class='mark fill grey'>dev-boilerplate.html</span> is the solution.
|
|
<br>
|
|
<br>See the paths to the unminified files bellow. </p>
|
|
</div>
|
|
<!-- End of Caregory Info -->
|
|
<!-- Table -->
|
|
<div class="table-responsive">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Extensions</th>
|
|
<th>File</th>
|
|
<th>Path</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="">
|
|
<th scope="row">CSS</th>
|
|
<td>style.css</td>
|
|
<td>css/</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">Less</th>
|
|
<td>style.less</td>
|
|
<td>less/</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">JavaScript Dev</th>
|
|
<td>modules.js</td>
|
|
<td>js/dev/</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">JavaScript Pre-prod</th>
|
|
<td>modules.js</td>
|
|
<td>js/preprod/</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- End of Table -->
|
|
<!-- Category Info -->
|
|
<div class="category-info " id="less-docs">
|
|
<h3 class="category-title"> Less
|
|
<!-- Fragment Identifier -->
|
|
<a class="fragment-identifier js-fragment-identifier fragment-identifier-scroll" href="#less-docs">
|
|
<i class="fa fa-link"></i>
|
|
</a>
|
|
<!-- End of Fragment Identifier -->
|
|
</h3>
|
|
<h4 class="category-description">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.</h4>
|
|
</div>
|
|
<!-- End of Caregory Info -->
|
|
<!-- Table -->
|
|
<div class="table-responsive">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Helper</th>
|
|
<th>Default</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="">
|
|
<th scope="row">@color_black</th>
|
|
<td>#333</td>
|
|
<td>Black color, used for all main text content on the page.</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">@color_grey</th>
|
|
<td>#99a3b1</td>
|
|
<td>Grey color used for less important text content on the page.</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">@color_grey-dark</th>
|
|
<td>#808488</td>
|
|
<td>Darker version of the regular grey.</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">@color_grey-lighter</th>
|
|
<td>#F6F7F8</td>
|
|
<td>Lighter version of the regular grey.</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">@color_grey-light</th>
|
|
<td>#CBD3DD</td>
|
|
<td>Used usually for backgrounds.</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">@color_blue</th>
|
|
<td>#28C</td>
|
|
<td>Used for some default states.</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">@color_blue-light</th>
|
|
<td>#48CACC</td>
|
|
<td>Used for info elements.</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">@color_purple</th>
|
|
<td>#8D3DEB</td>
|
|
<td>Alternative color.</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">@color_orange</th>
|
|
<td>#FF530D</td>
|
|
<td>Used for warning states.</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">@color_green</th>
|
|
<td>#4b5</td>
|
|
<td>Used for success states.</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">@color_red</th>
|
|
<td>#FF3625</td>
|
|
<td>Used for danger states.</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">@color_yellow</th>
|
|
<td>#FDC441</td>
|
|
<td>Alternative color for warning.</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">@font_primary</th>
|
|
<td>'Roboto', sans-serif</td>
|
|
<td>Primary font family.</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">@font_secondary</th>
|
|
<td>'Roboto Slab', serif</td>
|
|
<td>Alternative font family.</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">@font-size_base</th>
|
|
<td>16</td>
|
|
<td>Base font used within the .fz() mixin which makes a conversion from px to em.</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">@font_thin</th>
|
|
<td>100</td>
|
|
<td>Thin font weight.</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">@font_light</th>
|
|
<td>300</td>
|
|
<td>Light font weight.</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">@font_normal</th>
|
|
<td>400</td>
|
|
<td>Regular font weight.</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">@font_medium</th>
|
|
<td>500</td>
|
|
<td>Medium font weight.</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">@font_bold</th>
|
|
<td>700</td>
|
|
<td>Bold font weight.</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">@font_black</th>
|
|
<td>900</td>
|
|
<td>Black font weight.</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- End of Table -->
|
|
<!-- Category Info -->
|
|
<div class="category-info " id="helpers-docs">
|
|
<h3 class="category-title"> Helpers
|
|
<!-- Fragment Identifier -->
|
|
<a class="fragment-identifier js-fragment-identifier fragment-identifier-scroll" href="#helpers-docs">
|
|
<i class="fa fa-link"></i>
|
|
</a>
|
|
<!-- End of Fragment Identifier -->
|
|
</h3>
|
|
<h4 class="category-description">There is also a handy package of global helpers available. They should be used only together with the '.helper' class.</h4>
|
|
</div>
|
|
<!-- End of Caregory Info -->
|
|
<div class="row">
|
|
<div class="col-md-6">
|
|
<!-- Table -->
|
|
<div class="table-responsive">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Helper</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="">
|
|
<th scope="row">center</th>
|
|
<td>Align to center.</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">left</th>
|
|
<td>Align to left.</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">right</th>
|
|
<td>Align to right</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">hide</th>
|
|
<td>Hide the element</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">m0</th>
|
|
<td>Margin 0</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">p0</th>
|
|
<td>Padding 0</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">mb10</th>
|
|
<td>Margin bottom 10px</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">mb20</th>
|
|
<td>Margin bottom 20px</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">mb30</th>
|
|
<td>Margin bottom 30px</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">mb40</th>
|
|
<td>Margin bottom 40px</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">mb60</th>
|
|
<td>Margin bottom 60px</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">mr10</th>
|
|
<td>Margin right 10px</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">mr20</th>
|
|
<td>Margin right 20px</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">mr30</th>
|
|
<td>Margin right 30px</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">mr40</th>
|
|
<td>Margin right 40px</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">mr60</th>
|
|
<td>Margin right 60px</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">ml10</th>
|
|
<td>Margin left 10px</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">ml20</th>
|
|
<td>Margin left 20px</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">ml30</th>
|
|
<td>Margin left 30px</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">ml40</th>
|
|
<td>Margin left 40px</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">ml60</th>
|
|
<td>Margin left 60px</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">mt10</th>
|
|
<td>Margin top 10px</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">mt20</th>
|
|
<td>Margin top 20px</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- End of Table -->
|
|
</div>
|
|
<div class="col-md-6">
|
|
<!-- Table -->
|
|
<div class="table-responsive">
|
|
<table class="table table-striped">
|
|
<thead>
|
|
<tr>
|
|
<th>Helper</th>
|
|
<th>Description</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr class="">
|
|
<th scope="row">mt30</th>
|
|
<td>Margin top 30px</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">mt40</th>
|
|
<td>Margin top 40px</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">mt60</th>
|
|
<td>Margin top 60px</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">pt10</th>
|
|
<td>Padding top 10px</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">pt20</th>
|
|
<td>Padding top 20px</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">pt30</th>
|
|
<td>Padding top 30px</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">pt40</th>
|
|
<td>Padding top 40px</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">pt60</th>
|
|
<td>Padding top 60px</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">pb10</th>
|
|
<td>Padding bottom 10px</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">pb20</th>
|
|
<td>Padding bottom 20px</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">pb30</th>
|
|
<td>Padding bottom 30px</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">pb40</th>
|
|
<td>Padding bottom 40px</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">pb60</th>
|
|
<td>Padding bottom 60px</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">pl10</th>
|
|
<td>Padding left 10px</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">pl20</th>
|
|
<td>Padding left 20px</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">pl30</th>
|
|
<td>Padding left 30px</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">pl40</th>
|
|
<td>Padding left 40px</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">pl60</th>
|
|
<td>Padding left 60px</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">pr10</th>
|
|
<td>Padding right 10px</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">pr20</th>
|
|
<td>Padding right 20px</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">pr30</th>
|
|
<td>Padding right 30px</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">pr40</th>
|
|
<td>Padding right 40px</td>
|
|
</tr>
|
|
<tr class="">
|
|
<th scope="row">pr60</th>
|
|
<td>Padding right 60px</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- End of Table -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Footer -->
|
|
<footer class="js-footer-is-fixed">
|
|
<!-- Footer Default -->
|
|
<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">
|
|
<!-- Logo Image -->
|
|
<a href="index.html" class="logo-image ">
|
|
<img src="img/logos/logo.png" alt="logo">
|
|
</a>
|
|
<!-- End of Logo Image -->
|
|
<!-- Slogan -->
|
|
<p class="slogan"> Learn.
|
|
<br>Create.
|
|
<br>Impress. </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="#"> About us </a>
|
|
</li>
|
|
<li>
|
|
<a href="#"> Privacy Policy </a>
|
|
</li>
|
|
<li>
|
|
<a href="#"> Terms & Condotions </a>
|
|
</li>
|
|
<li>
|
|
<a href="#"> My account </a>
|
|
</li>
|
|
<li>
|
|
<a href="#"> Support service </a>
|
|
</li>
|
|
</ul>
|
|
<!-- End of Footer Menu -->
|
|
<!-- Copyright -->
|
|
<p class="copyright helper right">
|
|
<a href="http://vsart.me">VSArt</a>, all rights reserved. 2016 © </p>
|
|
<!-- End of Copyright -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- End of Footer Default -->
|
|
</footer>
|
|
<!-- End of Footer -->
|
|
</div>
|
|
<script src="js/all.js"></script>
|
|
<script src="js/custom.js"></script>
|
|
<!-- Google Analytics: change UA-XXXXX-X to be your site's ID. -->
|
|
<!--
|
|
<script>
|
|
(function(b,o,i,l,e,r){b.GoogleAnalyticsObject=l;b[l]||(b[l]=
|
|
function(){(b[l].q=b[l].q||[]).push(arguments)});b[l].l=+new Date;
|
|
e=o.createElement(i);r=o.getElementsByTagName(i)[0];
|
|
e.src='//www.google-analytics.com/analytics.js';
|
|
r.parentNode.insertBefore(e,r)}(window,document,'script','ga'));
|
|
ga('create','UA-XXXXX-X','auto');ga('send','pageview');
|
|
</script>
|
|
-->
|
|
</body>
|
|
|
|
</html> |