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.


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.

Close Bitnami banner
Bitnami