NeonUI Template for Documentation

Sample UI template to start

NeonUI Documentation Template - Basic Skeleton

Basic Documentation skeleton Template Downloads

Basic Documentation skeleton Template Explanation

In the HTML page, where documentation is created, the following simple steps would get one started

Download and include the "neon-ui-v1.0-min.css" file in the link tag using the src attribute in the head section of the HTML page
Download and include the "neon-ui-v1.0-min.js" file in the script tag using the src attribute , as the last HTML statement before body element tag of the HTML page
Add the class neon-ui in the element, preferably body element, for whole HTML page or in the particlular element hierarchy under which the NeonUI formatting is to be applied
Have an element div or section or article with a class for each of the sections.
- main-index Main Index section - Left hand side Chapter Index
- docs-main Main Documentation section - Center Detailed documentation
- page-index Page Index section - Right hand side Page topic Index
Have these three elements main-index , docs-main , page-index wrapped by an element tag
- div or section or article with the class docs-container

Template HTML Code

<!DOCTYPE html>
<html lang="en">

    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <link rel="stylesheet" href="./neon-ui-v1.0-min.css">
    </head>

    <body class="neon-ui">
      <main>
        <article class="docs-container">

          <section class="main-index">
          </section>

          <section class="docs-main">
          </section>

          <aside class="page-index">
          </aside>

        </article>
      </main>

      <script src="./neon-ui-v1.0-min.js"></script>
    </body>

</html>

Copy

NeonUI Documentation - Basic Starter Template

Basic Starter Documentation Template Downloads

Basic Documentation skeleton Template Explanation

Check the next chapter pages, to understand more about the layouts and how the temaplate code works.

Template Sample Output

Output in a Seperate Tab

Click the below link to open the NeonUI sample template starter file in a separate tab full width.

NeonUI Doc Template Starter Sample

Output Sample

Template HTML Code

<!DOCTYPE html>
<html lang="en">

    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <link rel="stylesheet" href=".neon-ui-v1.0-min.css">
    </head>

    <body class="neon-ui">
      <main>
        <article class="docs-container">
          <section class="main-index">

            <div class="index-item main-index-heading active">
              <i class="ph-bold ph-stack"></i>
              <a href="">
                First Group Page</a>
            </div>
            <div class="index-item main-index-heading">
              <i class="las la-book"></i>
              <a href="">Second Group Page</a>
            </div>
            <div class="index-item main-index-group-heading">
              <i class="ph ph-puzzle-piece"></i>
              <div class="main-index-heading-text">SubGroup</div>
            </div>
            <ul class="main-index-group">

              <li>
                <a href="" class="main-index-item active" href="">Intro Page</a>
              </li>

              <li>
                <a href="" class="main-index-item " href="">Second Page</a>
              </li>

              <li>
                <div class="main-index-item accordion-index-group-head show  ">
                  Expandable
                  <i class="fa-solid fa-angle-right"></i>
                </div>

                <ul class="accordion-index-group-list show">
                  <li>
                    <a class="main-index-item" href="">
                      Page One
                    </a>
                  </li>
                  <li>
                    <a class="main-index-item" href="">
                      Page Two
                    </a>
                  </li>
                  <li>
                    <a class="main-index-item" href="">
                      Page Three
                    </a>
                  </li>
                </ul>
              </li>
              <li>
                <a href="" class="main-index-item " href="">Third Page</a>
              </li>
            </ul>
          </section>
          <section class="docs-main">

            <section class="breadcrumb">
              <a href="">
                <i class="fa-regular fa-house"></i>
              </a>
              <span class="breadcrumb-divider">
                <i class="ph-bold ph-caret-right"></i>
              </span>
              <a href="">
                NeonUI-Breadcrumb-Page1
              </a>

              <span class="breadcrumb-divider">
                <i class="ph-bold ph-caret-right"></i>
              </span>
              <a href="">
                Template Page
              </a>
            </section>
            <section class="heading-container">
              <h5 class="eyebrow">Heading Group</h5>
              <h1 class="h1-page-title">
                Main Heading of the page
              </h1>
              <p class="subheading">
                Subheading of the page
              </p>
            </section>


            <h2 id="h2-1" class="h2-intro">
              First Heading
            </h2>

            <h3 id="h3-1">Subheading for the page</h3>

            <h4 id="h4-1">First Para</h4>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores tempora, cum at consectetur facilis
              eaque quam dicta illum tempore esse voluptatem quod nemo dolore, laudantium tenetur,
              accusamus ratione. Iure, vitae.</p>


            <h2 id="h2-2" class="h2-intro">
              Second Heading
            </h2>

            <h3 id="h3-2">Second Subheading for the page</h3>

            <h4 id="h4-2">Second Para</h4>

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores tempora, cum at consectetur facilis
              eaque quam dicta illum tempore esse voluptatem quod nemo dolore, laudantium tenetur,
              accusamus ratione. Iure, vitae.</p>


          </section>
          <aside class="page-index">
            <div class="index-item page-index-heading">
              <i class="ph ph-book-open-text index-icon"></i>
              <div class="page-index-head-text">On this page</div>
            </div>
            <div class="page-index-list">
              <div class="index-item page-index-h2">
                <a href="#h2-1">First Heading</a>
              </div>
              <div class="index-item page-index-h3">
                <a href="#h3-1">Subheading</a>
              </div>
              <div class="index-item page-index-h4">
                <a href="#h4-1">First Para</a>
              </div>
              <div class="index-item page-index-h2">
                <a href="#h2-1">Second Heading</a>
              </div>
              <div class="index-item page-index-h3">
                <a href="#h3-1">Subheading</a>
              </div>
              <div class="index-item page-index-h4">
                <a href="#h4-1">Second Para</a>
              </div>

          </aside>
        </article>
      </main>
      <script type="module" src="./neon-ui-v1.0-min.js"></script>

      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/default.min.css">
      <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>


      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/a11y-light.min.css"
        integrity="sha512-WDk6RzwygsN9KecRHAfm9HTN87LQjqdygDmkHSJxVkVI7ErCZ8ZWxP6T8RvBujY1n2/E4Ac+bn2ChXnp5rnnHA=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />

      <script>hljs.highlightAll();</script>
    </body>

</html>

Copy

Optional Code Highlighter - Highlight.js

NeonUI make use of Opensource code highlighter Highlight.js javascript package.

It is optional. One could include the online Javascript codes using the following code if inclined.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js"></script>


<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/a11y-light.min.css"
  integrity="sha512-WDk6RzwygsN9KecRHAfm9HTN87LQjqdygDmkHSJxVkVI7ErCZ8ZWxP6T8RvBujY1n2/E4Ac+bn2ChXnp5rnnHA=="
  crossorigin="anonymous" referrerpolicy="no-referrer" />

<script>hljs.highlightAll();</script>

Copy

General - Getting Started

Layout - Docs Layout