# Get started

Documento - HTML template for documentating digital products & APIs

HTML Template that provides a set of templates, components & tools needed to well-document your digital products & APIs.

Overview

Author & Product owner

Created at:

12/16/2022

Updated at:

01/01/2023

Version:

1.1

Why?

Because the quality of documentation is the quality of the product, and Documento template combines both: the quality as product and the quality as a documentation.

For who?

Whether you're developing a digital product or building an API, you'll absolutly need this documentation template to save time and guarntee quality at the same time.

# Codes

You must describe the structure bellow to highlight any codeblocks: <pre><code class="language-{language}"> .. </code> </pre>
Make sure you change the {language} with the desired highlighted language & the dots with the proper code.

Important Please pay attention to escaping < & > in any codeblock. replace them with & lt; and & gt;

<h1> Hello world </h1>

 console.log('Hello world')

 echo 'Hello world';

#include <stdio.h>
 
int main() {
   printf("Hello world");
   return 0;
}

namespace TawthiqTemplate
{
    class Tawthiq {        
        static void Main(string[] args)
        {
            System.Console.WriteLine("Hello world");
        }
    }
}

import java.io.*;
 
class GFG {
    public static void main (String[] args) {
       System.out.println("Hello world");
    }
}

# Popups

Sizes

Blur

Positioning

# Accordion

Base

Accordion title

Accordion window content. this can contain any other type of content such as images, codeblocks or paragraphs.

Accordion title

Accordion window content. this can contain any other type of content such as images, codeblocks or paragraphs.

Accordion title

Accordion window content. this can contain any other type of content such as images, codeblocks or paragraphs.

Accordion title

Accordion window content. this can contain any other type of content such as images, codeblocks or paragraphs.

Accordion title

Accordion window content. this can contain any other type of content such as images, codeblocks or paragraphs.

Accordion title

Accordion window content. this can contain any other type of content such as images, codeblocks or paragraphs.

Accordion title

Accordion window content. this can contain any other type of content such as images, codeblocks or paragraphs.

Accordion title

Accordion window content. this can contain any other type of content such as images, codeblocks or paragraphs.

# Alerts

Base

Alert title Alert content. an alert is a state of careful watching and readiness especially for danger or opportunity.

Alert title Alert content. an alert is a state of careful watching and readiness especially for danger or opportunity.

Alert title Alert content. an alert is a state of careful watching and readiness especially for danger or opportunity.

Alert title Alert content. an alert is a state of careful watching and readiness especially for danger or opportunity.

Alert title Alert content. an alert is a state of careful watching and readiness especially for danger or opportunity.

Iconed

Alert title Alert content. an alert is a state of careful watching and readiness especially for danger or opportunity.

Alert title Alert content. an alert is a state of careful watching and readiness especially for danger or opportunity.

Alert title Alert content. an alert is a state of careful watching and readiness especially for danger or opportunity.

Alert title Alert content. an alert is a state of careful watching and readiness especially for danger or opportunity.

Alert title Alert content. an alert is a state of careful watching and readiness especially for danger or opportunity.

# Tabs & windows

Base

First window

Second window

Third window

Fourth window

First window content

Second window content

Third window content

Fourth window content

Underlined

First window

Second window

Third window

Fourth window

First window content

Second window content

Third window content

Fourth window content

Full width

First window

Second window

Third window

Fourth window

First window content

Second window content

Third window content

Fourth window content

Underlined & Full width

First window

Second window

Third window

Fourth window

First window content

Second window content

Third window content

Fourth window content

# Headings

# First level heading

# Second level heading

# Third level heading

# Fourth level heading

# Fifth level heading

# Sixth level heading

# Fifth level heading

# Fourth level heading

# Third level heading

# Second level heading

# First level heading

# Texts

Styles

Use the class .marked To highlight any content of the text This one for example

this text can be considered as deleted text Use the class .line-through

Use the class .underline To underline texts

Use the class .overline To overline texts

Use the class .font-semibold To make texts bold

Use the class .font-bold To make texts bolder

Use the class .italic To make texts italic

Sizes

This is small text .text-sm

This is a large text .text-lg

This is an extra large text .text-xl

This is an extra extra large text .text-2xl

Colors

Use the class .text-danger To express failure

Use the class .text-success To express success

Use the class .text-info To notify or inform

Use the class .text-warning To warn

# Blockquotes

Base

The quality of documentation is the quality of the product, and Documento template combines both: the quality as product and the quality as a documentation.
Originator

Bordered

The quality of documentation is the quality of the product, and Documento template combines both: the quality as product and the quality as a documentation.
Originator

Iconed

The quality of documentation is the quality of the product, and Documento template combines both: the quality as product and the quality as a documentation.
Originator

# Cards

blog

Tech

Documento - HTML template for documentating digital products & APIs

HTML Template that provides a set of templates, components & tools needed to well-document your digital products & APIs.

More 1.2K 6

blog

Tech

Documento - HTML template for documentating digital products & APIs

HTML Template that provides a set of templates, components & tools needed to well-document your digital products & APIs.

More 1.2K 6

blog

Tech

Documento - HTML template for documentating digital products & APIs

HTML Template that provides a set of templates, components & tools needed to well-document your digital products & APIs.

More 1.2K 6

blog

Tech

Documento - HTML template for documentating digital products & APIs

HTML Template that provides a set of templates, components & tools needed to well-document your digital products & APIs.

More 1.2K 6

blog

Tech

Documento - HTML template for documentating digital products & APIs

HTML Template that provides a set of templates, components & tools needed to well-document your digital products & APIs.

More 1.2K 6

blog

Tech

Documento - HTML template for documentating digital products & APIs

HTML Template that provides a set of templates, components & tools needed to well-document your digital products & APIs.

More 1.2K 6

# Badges

Colors

Use the class .badge-success To get a badge like so Badge

Use the class .badge-danger To get a badge like so Badge

Use the class .badge-warning To get a badge like so Badge

Use the class .badge-info To get a badge like so Badge

Use the class .badge-default To get a badge like so Badge

Sizes

Use the class .badge-sm To size a badge like so Badge

Use the class .badge-lg To size a badge like so badge

Use the class .badge-xl To size a badge like so Badge

Use the class .badge-2xl To size a badge like so Badge

# Lists

Base

First item
Second item
Third item
Fourth item

Disc

First item
Second item
Third item
Fourth item

Decimal

First item
Second item
Third item
Fourth item

Square

First item
Second item
Third item
Fourth item

Roman

First item
Second item
Third item
Fourth item

# Images

Use the class lazy And define image path in the attribute data-src To lazy load images

Responsive

Auto

With shadow

Rounded

Borderless

# Tables

Base

First column title	Second column title	Third column title
Cell	Cell	Cell
Cell	Cell	Cell
Cell	Cell	Cell

Borderless

First column title	Second column title	Third column title
Cell	Cell	Cell
Cell	Cell	Cell
Cell	Cell	Cell

Rows only

First column title	Second column title	Third column title
Cell	Cell	Cell
Cell	Cell	Cell
Cell	Cell	Cell

Columns only

First column title	Second column title	Third column title
Cell	Cell	Cell
Cell	Cell	Cell
Cell	Cell	Cell

# Flexbox

.flex

1

2

3

4

.flex-1

1

2

3

4

.flex-1

1

2

3

4

.mr-auto

1

2

3

4

.flex-wrap

1

2

3

4

.col-flexed

1

2

3

4

.gap-1

1

2

3

4

.gap-2

1

2

3

4

.gap-3

1

2

3

4

.gap-4

1

2

3

4

.gap-5

1

2

3

4

.gap-6

1

2

3

4

.gap-7

1

2

3

4

.gap-8

1

2

3

4

.gap-9

1

2

3

4

.gap-10

1

2

3

4

# Grid system

.grid-of-1

1

2

3

4

.grid-of-2

1

2

3

4

.grid-of-3

1

2

3

.grid-of-43

1

2

3

4

.grid-of-5

1

2

3

4

5

.grid-of-6

1

2

3

4

5

6

# API

Base

GET /api/v1/users Get all users

DELETE /api/v1/users/{user} Delete a specific user

PATCH /api/v1/users/{user} Update a specific user's data

POST /api/v1/users Create a new user

PUT /api/v1/users Create a new user

With responses

GET /api/v1/users Get all users

[
  {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "Sincere@april.biz"
  },
  {
    "id": 2,
    "name": "Ervin Howell",
    "username": "Antonette",
    "email": "Shanna@melissa.tv"
  },
  {
    "id": 3,
    "name": "Clementine Bauch",
    "username": "Samantha",
    "email": "Nathan@yesenia.net"
  }
]

DELETE /api/v1/users/{user} Delete a specific user

{
    status:200,
    message:"User was deleted successfuly"
}

PATCH /api/v1/users/{user} Update a specific user's data

{
    status:200,
    message:"User's data was updated successfuly"
}

POST /api/v1/users Create a new user

{
    status:200,
    message:"User was created successfuly"
}

Contained in an accordion

GET /api/v1/users Get all users

[
  {
    "id": 1,
    "name": "Leanne Graham",
    "username": "Bret",
    "email": "Sincere@april.biz"
  },
  {
    "id": 2,
    "name": "Ervin Howell",
    "username": "Antonette",
    "email": "Shanna@melissa.tv"
  },
  {
    "id": 3,
    "name": "Clementine Bauch",
    "username": "Samantha",
    "email": "Nathan@yesenia.net"
  }
]

DELETE /api/v1/users/{user} Delete a specific user

{
    status:200,
    message:"User was deleted successfuly"
}

PATCH /api/v1/users/{user} Update a specific user's data

{
    status:200,
    message:"User's data was updated successfuly"
}

POST /api/v1/users Create a new user

{
    status:200,
    message:"User was created successfuly"
}

POST /api/v1/users Create a new user

{
  status:200,
  message:"User was created successfuly"
}

Contained in tabs

End point

Headers

body

Response

POST /api/v1/users Create a new user

Content-Type: application/json
Authorization: Bearer {token}
Accept: application/json

{
  "name": "Leanne Graham",
  "username": "Bret",
  "email": "Sincere@april.biz"
}

{
   status:200,
   message:"User was created successfuly"
}

# Changelog

12/12/2020 ~ v1.0

ADDED
Implemented a new feature
DELETED
Got rid of an existing feature
UPDATED
Update an existing feature
ADDED
Implemented a new feature
DELETED
Got rid of an existing feature
UPDATED
Update an existing feature

12/12/2021 ~ v1.1

ADDED
Implemented a new feature
DELETED
Got rid of an existing feature
UPDATED
Update an existing feature
ADDED
Implemented a new feature
DELETED
Got rid of an existing feature
UPDATED
Update an existing feature

# Contact us

Sample 1

Contact us

Contact us form subtitle

Email address

Your message

Contact us footer text

Sample 2

Contact us

Contact us form subtitle

Email address

Your message

Contact us footer text

Sample 3

Contact us

Contact us form subtitle

Email address

Your message

Contact us footer text

# Gallery

Gallery title

Gallery description

gallery

gallery

gallery

gallery

gallery

gallery

# Pricing

Pricing

Pricing subtitle

Base

Free

Feature

Feature

Feature

Details

Prod

38$ / Month

Feature

Feature

Feature

Feature

Feature

Feature

More

VIP

120$ / Month

Feature

Feature

Feature

Feature

Feature

Feature

Details

# Statistics

2.7K

Users

1.8K

Subscribes

35

Downloads

4

Products

2.7K

Users

1.8K

Subscribes

35

Downloads

4

Products

2.7K

Users

1.8K

Subscribes

35

Downloads

4

Products