Getting Started

Introduction

preview

vDocs - Documentation Template & UI Kit

vDocs is a modern, responsive, cleanand content-focused Documentation Template. This template is suited for APIs, web-apps, Bootstrap templates, WordPress Themes or any other digital products that may require a documentation. vDocs also includes the UI Kit, where most of the Bootstrap's default components has been re-designed. The documentation template includes a Light / Dark Mode and 4 different layouts: navigation on left (default), navigation on right, detached with left-side navigation and detached with right-side navigation.

Main Features
  • Bootstrap 5
  • HTML5 & CSS3
  • SASS files included
  • Fully Responsive
  • Cross-Browser Compatible
  • Valid HTML
  • No jQuery Dependencies
  • Font Awesome 5
  • Bootstrap Icons
  • Google Fonts
  • 100+ UI Components
  • UI Kit included
  • 4 Layouts
  • Light / Dark Mode
  • 24/7 Support

File Structure

*Click on the folders that have chevron icons to open / close them.

assets

  • components - includes the ui-kit's component previews
  • changelog.html
  • content.html
  • credits.html
  • index.html

Starter Template

To get started with just the base files and scripts added, please copy the below code:

<!DOCTYPE html>
<html lang="en">

<head>
    <!-- Meta -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Site Title -->
    <title>Site Title</title>
    <!-- Bootstrap 5 Core CSS -->
    <link href="assets/css/bootstrap.min.css" rel="stylesheet">
    <!-- Theme CSS -->
    <link rel="stylesheet" href="assets/css/style.css">
</head>

<body>
    <!-- The website content starts here -->

    <!-- Core JavaScript -->
    <script src="assets/js/bootstrap.bundle.min.js"></script>
    <script src="assets/js/theme.js"></script>
</body>
</html>

Setup & Customize

Setup Sass

To use SASS you will have to use a SASS Processor application, like Scout App, it is available for Linux 32 / 64bit, Mac and Windows, it requires project setup in order to process the SASS files from a set folder or you can also use Prepros, it is also available for Linux, Mac and Windows and it is a bit easier to setup this application.

To edit any theme file you will need a Text or Code Editor, we recommend using Sublime Text, as it is the Text Editor of our choice to write code, but every Text or Code Editor will work fine to edit any theme files.

To change the theme's fonts, colors and other variables, please open the _variables.scss file from assets / scss folder and modify the font-family to your preferred font, font-weights, the letter-spacing values, change color codes and you can also add custom variables of any type if needed.

Change the Layout

To permanently change the layout of your template, please add the layout's css class to the <body> tag, for the default layout ( naivation on the left ) no body class is needed, for the layout with right-side navigation use right-nav, for the detached left-side-nav use detached-nav-left and for the detached right-side-nav use detached-nav-right, the body tag should look like this ( example ) after adding the layout's class:
<body class="right-nav">.

Light / Dark Mode

To permanently change the mode from light to dark you can add dark-mode class to the <body> tag, like this: <body class="dark-mode">. To permanently disable the ability of visitors to switch modes, you can remove the mode switcher button from the navbar and also remove modeSwitcher code from assets / js / theme.js.

Setup 1

Setup Sass

To use SASS you will have to use a SASS Processor application, like Scout App, it is available for Linux 32 / 64bit, Mac and Windows, it requires project setup in order to process the SASS files from a set folder or you can also use Prepros, it is also available for Linux, Mac and Windows and it is a bit easier to setup this application.

To edit any theme file you will need a Text or Code Editor, we recommend using Sublime Text, as it is the Text Editor of our choice to write code, but every Text or Code Editor will work fine to edit any theme files.

To change the theme's fonts, colors and other variables, please open the _variables.scss file from assets / scss folder and modify the font-family to your preferred font, font-weights, the letter-spacing values, change color codes and you can also add custom variables of any type if needed.

Change the Layout

To permanently change the layout of your template, please add the layout's css class to the <body> tag, for the default layout ( naivation on the left ) no body class is needed, for the layout with right-side navigation use right-nav, for the detached left-side-nav use detached-nav-left and for the detached right-side-nav use detached-nav-right, the body tag should look like this ( example ) after adding the layout's class:
<body class="right-nav">.

Light / Dark Mode

To permanently change the mode from light to dark you can add dark-mode class to the <body> tag, like this: <body class="dark-mode">. To permanently disable the ability of visitors to switch modes, you can remove the mode switcher button from the navbar and also remove modeSwitcher code from assets / js / theme.js.