- Item Name : Guidex - Online Documentation Template.
- Item Version : 3.1.0
- Author : ashishmaraviya
- Copyright : 2024
- Sales : 7000 +
Welcome to the documentation for the Guidex template! This page will guide you on how to use and customize the template to suit your needs.
Guidex - Online Documentation Template.
An online documentation HTML template is a pre-designed structure and layout that helps developers and creators present their template, projects, or products in an organized and user-friendly manner on the web. It serves as a guide or reference for users, providing comprehensive information about the template's features, installation process, usage instructions, and other essential details.
The primary purpose of an online documentation HTML template is to facilitate effective communication between the developers and end-users by offering a clear and easy-to-navigate interface for accessing relevant information. Below is a brief description of the key components typically found in an online documentation HTML template:
An effective online documentation HTML template provides clear and concise information, encourages user engagement, and enhances the overall user experience. It simplifies the process of creating comprehensive documentation and helps developers deliver a valuable product to their users.
- assets
- img
- favicon
- favicon.ico
- favicon.png
- features
- 1.png
- 2.png
- 3.png
- 4.png
- logo
- logo.png
- sidebar
- 1.jpg
- 2.jpg
- 3.jpg
- 4.jpg
- tools
- bg-0.png
- bg-1.png
- bg-2.png
- bg-3.png
- bg-4.png
- favicon
- scss
- base
- _typography.scss
- components
- _breadcrumb.scss
- _common.scss
- _sidebar.scss
- _tools-sidebar.scss
- layouts
- _cards.scss
- utilities
- _mixins.scss
- _variables.scss
- dark.scss
- style.scss
- base
- img
- index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="guide, doc, documentation, api doc, catalog,
code documentation, doc, docs, documentation, documentation template,
documentation tool, getting started, guide, help">
<meta name="description" content="Guidex - Online Documentation HTML Template.">
<meta name="author" content="ashishmaraviya">
<title>Guidex - Online Documentation HTML Template.<title>
<!-- App favicon -->
<link rel="shortcut icon" href="assets/img/favicon/favicon.ico">
<!-- Icon CSS -->
<link href="assets/css/vendor/materialdesignicons.min.css" rel="stylesheet">
<link href="assets/css/vendor/remixicon.css" rel="stylesheet">
<!-- Vendor -->
<link href="assets/css/vendor/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/vendor/prism.css" rel="stylesheet">
<!-- Main CSS -->
<link id="mainCss" href="assets/css/style.css" rel="stylesheet">
</head>
<body>
<main class="wrapper sb-default">
<!-- Your content goes here -->
</main>
<!-- Vendor Custom -->
<script src="assets/js/vendor/jquery-3.6.4.min.js"></script>
<script src="assets/js/vendor/bootstrap.bundle.min.js"></script>
<script src="assets/js/vendor/prism.js"></script><!-- Main Custom -->
<script src="assets/js/main.js"></script>
</body>
</html>
- Navigation Bar: The template usually includes a navigation bar at the right sidebar, allowing users to jump to different sections of the documentation quickly. This helps users find specific information without scrolling through the entire page.
- Introduction: This section provides an overview of the template or project, explaining its purpose, key features, and the problems it aims to solve. It helps users understand the context of the documentation and what they can expect from the template.
- Installation: The installation section guides users through the process of setting up the template or integrating it into their projects. It may include code snippets, terminal commands, or step-by-step instructions for various platforms.
- Usage: In this section, users learn how to use the template effectively. It typically includes code examples, explanations of important functions, and demonstrations of how to achieve specific tasks.
- Components: For template libraries or frameworks, this section outlines the various components and modules available and describes their functionalities. It helps users understand the building blocks of the template.
- License: This section specifies the template's licensing terms and conditions. It ensures users are aware of how they can use, modify the template legally. and not for distribute or resale.
- Additional Resources: Some templates include a section for additional resources, such as links to tutorials, community forums, or support channels. It encourages users to explore more about the template and engage with the community.
- Styling and Responsiveness: The template often incorporates CSS styles to ensure the documentation is visually appealing and easy to read. It may also use responsive design to adapt to different screen sizes and devices.
Template use font families "Poppins" & "Nunito". Go to SCSS folder > base > _typography.scss
/*=== Typography ===*/
/*-- Poppins font --*/
@font-face {
font-family: "Poppins, sans-serif";
src: url("../fonts/poppins/Poppins-Thin.ttf") format("truetype");
font-weight: 100;
font-style: normal;
}
@font-face {
font-family: "Poppins, sans-serif";
src: url("../fonts/poppins/Poppins-ExtraLight.ttf") format("truetype");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: "Poppins, sans-serif";
src: url("./../fonts/poppins/Poppins-Light.ttf");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: "Poppins, sans-serif";
src: url("../fonts/poppins/Poppins-Regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: "Poppins, sans-serif";
src: url("./../fonts/poppins/Poppins-Medium.ttf") format("truetype");
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: "Poppins, sans-serif";
src: url("../fonts/poppins/Poppins-SemiBold.ttf") format("truetype");
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: "Poppins, sans-serif";
src: url("../fonts/poppins/Poppins-Bold.ttf") format("truetype");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: "Poppins, sans-serif";
src: url("../fonts/poppins/Poppins-ExtraBold.ttf") format("truetype");
font-weight: 800;
font-style: normal;
}
@font-face {
font-family: "Poppins, sans-serif";
src: url("../fonts/poppins/Poppins-Black.ttf") format("truetype");
font-weight: 900;
font-style: normal;
}
/*-- Nunito font --*/
@font-face {
font-family: 'Nunito', sans-serif;
src: url("../fonts/nunito/Nunito-ExtraLight.ttf") format("truetype");
font-weight: 200;
font-style: normal;
}
@font-face {
font-family: 'Nunito', sans-serif;
src: url("../fonts/nunito/Nunito-Light.ttf") format("truetype");
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Nunito', sans-serif;
src: url("../fonts/nunito/Nunito-Regular.ttf") format("truetype");
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Nunito', sans-serif;
src: url("../fonts/nunito/Nunito-Medium.ttf") format("truetype");
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Nunito', sans-serif;
src: url("../fonts/nunito/Nunito-SemiBold.ttf") format("truetype");
font-weight: 600;
font-style: normal;
}
@font-face {
font-family: 'Nunito', sans-serif;
src: url("../fonts/nunito/Nunito-Bold.ttf") format("truetype");
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Nunito', sans-serif;
src: url("../fonts/nunito/Nunito-ExtraBold.ttf") format("truetype");
font-weight: 800;
font-style: normal;
}
@font-face {
font-family: 'Nunito', sans-serif;
src: url("../fonts/nunito/Nunito-Black.ttf") format("truetype");
font-weight: 900;
font-style: normal;
}
HTML head tag incudes h1 to h6. and also available classes ".h1" to ".h6" in bootstrap.
Heading tag h1
Heading tag h2
Heading tag h3
Heading tag h4
Heading tag h5
Heading tag h6
<h1>Heading tag h1</h1>
<h2>Heading tag h2</h2>
<h3>Heading tag h3</h3>
<h4>Heading tag h4</h4>
<h5>Heading tag h5</h5>
<h6>Heading tag h6</h6>
Typography in documentation involves selecting readable fonts, maintaining appropriate font sizes, creating a hierarchy with varying styles, spacing lines for clarity, and using whitespace and alignment to balance content. Ensure good contrast, use bullet points for lists, maintain consistency, and prioritize accessibility for a visually pleasing and easily understandable document.
Color Style
Just use classes to change color".text-primary, .text-secondary, .text-success, .text-danger, .text-warning and .text-info" in bootstrap.
Heading tag h1
Heading tag h2
Heading tag h3
Heading tag h4
Heading tag h5
Heading tag h6
<h1 class="text-primary">Heading tag h1</h1>
<h2 class="text-secondary">Heading tag h2</h2>
<h3 class="text-success">Heading tag h3</h3>
<h4 class="text-danger">Heading tag h4</h4>
<h5 class="text-warning">Heading tag h5</h5>
<h6 class="text-info">Heading tag h6</h6>
Tempalte use code library Prism. Add prism css on head tag.
<link href="assets/css/vendor/prism.css" rel="stylesheet">
Add prism js bottom of the body tag.
<script src="assets/js/vendor/prism.js"></script>
Simple code
Preview od simple code <div> and
<section> tags.
<pre class ="language-markup m-b-24"> < code class="language-markup"> <div><section> </code> </pre>
<div>
<section>Responsive images
Images in Bootstrap are made responsive with .img-fluid. max-width: 100%; and height: auto; are applied to the image so that it scales with the parent element.
<img src="assets/img/demo-img/1.jpg" class="img-fluid" alt="Responsive image">Image thumbnails
In addition to our border-radius utilities, you can use .img-thumbnail to give an image a rounded 1px border appearance.
<img src="assets/img/demo-img/2.jpg" class="img-thumbnail" alt="Thumbnail image">Image Style
Four type of image style in template .img-rectangle, .img-round-radius, .img-round, .img-pill.
<img src="assets/img/demo-img/2.jpg" class="img-thumbnail" alt="Thumbnail image">Template use css source files, And all files are open source.
<!-- Icon CSS -->
<link href="assets/css/vendor/materialdesignicons.min.css" rel="stylesheet">
<link href="assets/css/vendor/remixicon.css" rel="stylesheet">
<!-- Vendor -->
<link href="assets/css/vendor/bootstrap.min.css" rel="stylesheet">
<link href="assets/css/vendor/prism.css" rel="stylesheet">
<!-- Main CSS -->
<link id="mainCss" href="assets/css/style.css" rel="stylesheet">
A CSS (Cascading Style Sheets) source file is a text-based document used in web development to define the visual appearance and layout of HTML elements on a webpage. It contains a set of rules and declarations that dictate how elements should be displayed, such as fonts, colors, spacing, positioning, and more. CSS files are separate from HTML files, allowing for a clear separation of content and presentation in web design. Web browsers use the information in CSS files to render web pages according to the specified styles, enhancing the overall look and user experience of the website.
Template use js source files, And all files are open source.
<!-- Vendor Custom -->
<script src="assets/js/vendor/jquery-3.6.4.min.js"></script>
<script src="assets/js/vendor/bootstrap.bundle.min.js"></script>
<script src="assets/js/vendor/prism.js"></script>
<!-- Main Custom -->
<script src="assets/js/main.js"></script>
A JavaScript (JS) source file is a text-based document used in web development to add interactivity and dynamic behavior to web pages. It contains code written in the JavaScript programming language, which allows developers to manipulate HTML elements, handle user interactions, make API requests, and perform various tasks on the client side. JavaScript files are typically used to create responsive and interactive web applications by altering the content and behavior of a webpage without requiring a full page reload. When a web browser encounters JavaScript code in a file, it executes the code and enables dynamic features that enhance user engagement and overall functionality.
There are the Four things to setup & run the theme.
- 1. Install & Start Xampp Server
- 2. How to Setup Theme Code Folder
- 5. Database Configuration (this theme have not use any database, because it's html template)
- 4. Run the theme into browser
Step-1 : Install & Start Xampp Server
Download the latest version of Xampp & Install Xampp Server. Click on Start button to start Apache & MySql into Xampp Server.
Now blow image show the running Xampp Server
Now Xammp Instalation process end up here and move to the next step below.
Step-2 : How to Setup Template Code Folder
Open unzip folder Guidex - Online Documentation HTML Template. and copy guidex-html folder as show below image
Now open Xampp folder
After that open htdocs folder
Now paste already copied guidex-html folder into htdocs
Step-3 : Database Configuration
This Template have not use any database, because it's html template and not needed any type of database configuration. theme directly run in localhost or server.
Step-4 : Run the Home page into browser
Open Browser and run the Home page to type located template path : localhost/guidex-html as show below image.
Now you can take a look on any of the layout by choosing on left sidebar of the site menu.
There are the Four things to setup & run the theme.
- 1. Hosting Account
- 2. How to Setup template Code Folder
- 5. Database Configuration (this theme have not use any database, because it's html template)
- 4. Run the template into browser
Step-1 : Hosting Account
You must have Hosting account. And if you don't have please purchase it before move ahed.
Note: I am just giving the example of Hosting account you can purchase any of hosting account that support PHP.
Get Login into your hostinger account and open dashboard.
Now Hosting account end up here and move to the next step below.
Step-2 : How to Setup Template Code Folder
From Dashboard Click on File Manager as show below image.
Now upload grabit-html.zip folder into server.
After upload unzip this folder as shown below image.
Now the Theme Code setup is finished here move to the next step below.
Step-3 : Database Configuration
This theme have not use any database, because it's html template and not needed any type of database configuration. theme directly run in localhost or server.
Step-4 : Run the Home Page into browser
Open Browser and run the Home page to type located template path : yourdomain.com/guidex-html as show below image.
Now you can take a look on any of the layout by choosing on left sidebar of the site menu.
In documentation, a change log serves as a concise and chronological record of alterations made to a template project. It encapsulates details about updates, bug fixes, new features, enhancements, and any modifications introduced in successive versions or releases.
Version 2.0.0
12/05/2023- Added Admin Dashboard
- Added Inner Pages
- Added Dark Mode
- Added Color Mode
- Added Demo 2 Page
- Added Demo 3 Page
- Added Demo 4 Page
- Added Demo 5 Page
- Added Demo 6 Page
- Added Demo 7 Page
- Added Demo 8 Page
- Bug Fix (Responsive)
Version 1.0.1
28/03/2023- Added Animate.css
- Bug Fix
- Fixed Responsive Issue
- Fixed JS Issue
- Fixed CSS Issue
- Fixed HTML Button Issue
Version 1.0.0
15/01/2023- Initial Release
Thank You
Thank you again for download 'Guidex', enjoy it and give us your valuable Review & Rating.
