Components Sample
Documentation
General
Template
Layout
Typography
Navigational
Informational
Data
Input
Images
Header
Footer
NeonUI-Documentation Layout
NeonUI Doc Layout

Layout of the Document Sections

Main Index, Main Document, Page Index

NeonUI Documentation Components Layout

Basic Documentation Layout regions

Output Sample

Three regions of the documentation

Once the class "neon-ui" is included in the body element,

  • 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 
<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>
</body>
Copy

Info about the three sections

The three regions are responsive layouts. Automatically changes the width and arrangements according to the screen size of the display device.

Main Index

  • Main index has
    • Group Headings

      Each will Fetch a set of main subgroup pages index list

      First Group Page
      Second Group Page
    • SubGroup Headings and SubGroup pages

      • Subgroup heading has no pointer actions (unclickable)

      • Clicking Subgroup page index item will fetch the document info of that subgroup topic page

      • Icons could be added from different free icons using the NeonUI Icons library for the headings. NeonIcons Library

      • "Active" (current page) Subgroup page index item will have a bold highlight

        SubGroup

      • Subgroup page can have accordion group list as well. With grouped list of pages.

        SubGroup

Main Document Section

  • Main Document section has the documentation text and info
  • All the other NeonUI components could be added as an html page
  • Refer the other component pages to learn more about the available components

    Docs-main Output Sample

    NeonUI-Breadcrumb-Page1 Template Page
    Heading Group

    Main Heading of the page

    Subheading of the page

    First Heading

    Subheading for the page

    First Para

    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.

Page Index

  • Page Index appears on the right hand side of the page
  • The text wraps and have elegant overall view of the page's content summary
  • Each Heading level have indentations so that heading/content groups and overview of the page is easily understood.
Prev
Template - Template Codes
Next
Layout - Main Index