Getting started, Beginning

An introduction to TheGuide, unbox it, meet starter page, quickly start developing your documentation, and more.



What's this

Introduction

Read this section to know about TheGuide and its features

TheGuide is a html online documentation template which can help you rapidly develop your next software's documentation. It can be used for documenting API, frameworks, plugins, templates, etc. It's based on Bootstrap and contains a lot of components to easily make your interactive documentation. TheGuide comes with a simple design and puts its focus on readability and functionality. It has a lot of useful components to reduce the burden of writing a documentation for your next product. With the help of TheGuide just focus on the quality of writing; don't worry about the quality of design and ease of writing. We guarantee them! This template has everything that you need to develop your next documentation.

Features

Check out some of features that we have in this template. To know more about features of TheGuide, continue reading our documentation and check our available components.


  • Responsive

    Your documentation works on any device: desktop, tablet or mobile.

  • Customizable

    You can easily read, edit, and write your own code, or change everything.

  • UI Elements

    There is a bunch of useful and necessary elements for writing documentation.

  • Clean code

    You can find our code well organized, commented and readable.

  • Documented

    As you can see in this online documentation, we provided a comprehensive documentation.

  • Free updates

    When you purchase this template, you'll freely receive future updates.

Unboxing

What's included

Checkout the files that you'll see upon downloading

Once you download the template, you can see a folder with several files and sub folders. You can read description of some important files in continue.

  • assets
    • css
      • app.min.cssMinified version of all required CSS files
      • custom.cssWrite your custom styles in this file
    • fonts
    • imgHere is a place to put your media files like logo, images, videos, etc.
    • js
      • app.min.jsMinified version of all required Javascript files
      • custom.jsWrite your custom scripts in this file
    • vendors
  • starter.html
Better understanding

Starter template

You need somewhere to start. Starter template is what you need

You have a starter.html page to get start with. You can read the code inside this file to become familiar with code and learn how can make your desire changes. It's so easy. You can see HTML structure of this file as follow.


<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Some meta tags -->

    <title>TheGuide - Starter page</title>

    <!-- Styles -->
    <link href="assets/css/app.min.css" rel="stylesheet">
    <link href="assets/css/custom.css" rel="stylesheet">

    <!-- Fonts and Favicon -->
  </head>

  <body>

    <!-- Navigation -->
    <nav class="page-navigation full-topbar">
      ...
    </nav>
    <!-- END Navigation -->


    <!-- Site header -->
    <header class="site-header">

      <!-- Logo & Navigation -->
      <nav class="site-navigation">
        ...
      </nav>
      <!-- END Logo & Navigation -->

      <!-- Header image -->
      <div class="header-image">
        ...
      </div>
      <!-- END Header image -->

    </header>
    <!-- END Site header -->


    <!-- Main container -->
    <main>

      <!-- Section - Sample -->
      <section id="sec-sample">
        ...
      </section>
      <!-- END Section - Sample -->

    </main>
    <!-- END Main container -->


    <!-- Site footer -->
    <footer class="site-footer">
      ...
    </footer>
    <!-- END Site footer -->


    <!-- Scripts -->
    <script src="assets/js/app.min.js"></script>
    <script src="assets/js/custom.js"></script>

  </body>
</html>
Get hands dirty

Quick start

Now it's time to start editing some lines of code

Start your documentation template by editing the starter page. It won't take more than 10 minutes to start. Read the step-by-step guide.

  • Prepare your directory

    Start your documentation project by making a copy of start-kit folder to your desired directory. This folder contains essential files to develop your documentation based on TheGuide.

  • Design your header

    The header of the page is inside <header> tag. Customize it by editing logo and navigation links. If you need, you can include a banner as well.

  • Design your footer

    The footer of the page is inside <footer> tag. Customize it by editing copyright text, navigation links, and social media links.

  • Start writing

    Make a copy of your starter page and start writing your documentation with the help of our wonderful documentation.