TheGuide, Online Documentation

An online documentation template which can help you rapidly develop your next software's documentation It has a lot of useful components to reduce the burden of writing a documentation for your next product.




Learn More

It's amazing

Key features

TheGuide offeres a wide range of amazing features to help you develop better documentation

HTML5 & CSS3

Quisque dignissim, nibh sed ultrices gravida, libero massa maximus velit, a viverra urna.


Clean Design

Quisque dignissim, nibh sed ultrices gravida, libero massa maximus velit, a viverra urna.


Developer-friendly codes

Quisque dignissim, nibh sed ultrices gravida, libero massa maximus velit, a viverra urna.

features
Responsive design

Quisque dignissim, nibh sed ultrices gravida, libero massa maximus velit, a viverra urna.


Well Documented

Quisque dignissim, nibh sed ultrices gravida, libero massa maximus velit, a viverra urna.


Made with love

Quisque dignissim, nibh sed ultrices gravida, libero massa maximus velit, a viverra urna.


0+

Satisfied users

0+

Hours of coding

0+

Stars

0+

Line of code
Syntax Highlighter

Code window

Demonstrate your code for users in an eye catching way

You have plenty of different ways to show your code inside the page such as code window, code snippet, code splitted, simple code view, etc. Play with this functional code window and check the other code tabs.


Code window

Brilliant code view

This code window is amazing! You almost can put any HTML code inside it to show an example, or add any number of code tabs to top of this window in a very easy way.

Code
Check our code viewers

You have a plenty of options to demonstrate your code and result in your documentation. You can pick the one that fits better in your context.

Continue reading...
Content
Check our content viewers

Views are another way to display several related information together. Mostly you can use them to list the articles which is available in your documentation.

Continue reading... 

<h3>Brilliant code view</h3>
<p>This code window is amazing! You almost can put <strong>any HTML code</strong> inside it to show an example, or add any number of code tabs to top of this window in a very easy way.</p>

<hr>

<div class="row">
  <div class="col-md-6 list-view-item">
    <span>Code</span>
    <h5>Check our code viewers</h5>
    <p>You have a plenty of options to demonstrate your code and result in your documentation. You can pick the one that fits better in your context.</p>
    <a class="read-more" href="components.html#sec-code">Continue reading...</a>
  </div>

  <div class="col-md-6 list-view-item">
    <span>Content</span>
    <h5>Check our content viewers</h5>
    <p>Views are another way to display several related information together. Mostly you can use them to list the articles which is available in your documentation.</p>
    <a class="read-more" href="components.html#sec-content">Continue reading...</a>
  </div>
</div>


/*
== General
*/

.code-preview .btn {
  margin-bottom: 6px;
  margin-right: 2px;
}

/*
== Background images
*/
.bg-img-banner1 {
  background-image: url(../img/banner1.jpg);
}

.bg-img-banner2 {
  background-image: url(../img/banner2.jpg);
}

.bg-img-banner3 {
  background-image: url(../img/banner3.jpg);
}



// Back to top
$('#scroll-up').on( 'click', function() {
  $('html, body').animate({scrollTop : 0}, 900);
  return false;
});

//
// Offcanvas
//
$('[data-toggle="offcanvas"]').on('click', function (e) {

  e.preventDefault();

  $('body').toggleClass('offcanvas-show');
  
  if ($('body').hasClass('offcanvas-show')) {
    $('html').css('overflow', 'hidden');
  }
  else {
    $('html').css('overflow', 'visible');
  }
  
});

Like our design?



Purchase now