Typograhpy

Headers

                
h1. Header 1

                
h2. Header 2

                
h3. Header 3

                
h4. Header 4

                
h5. Header 5

                
h6. Header 6

Paragraphs

Conubia donec, velit dictumst interdum. Per quisque adipiscing, habitasse litora sed id. Varius porttitor aliquet, placerat erat, quam vulputate viverra eros nec gravida. Magna interdum nostra euismod, arcu enim consectetur primis duis. Habitant eu mi porta, curabitur sit sollicitudin, convallis dui metus leo nibh erat aenean sed. Egestas massa nulla turpis, imperdiet vivamus curabitur, dictum lacinia vulputate dictumst nullam luctus placerat molestie.

Links

This is a normal link

This is a link styled as button link
Use class button to style it: 

<a href="#" class="button">link</a>

Tables

Column 1 Column 2 Column 3 Column 4
Row 1 Data 1 Row 1 Data 2 Row 1 Data 3 Row 1 Data 4
Row 2 Data 1 Row 2 Data 2 Row 2 Data 3 Row 2 Data 4
Row 3 Data 1 Row 3 Data 2 Row 3 Data 3 Row 3 Data 4
Footer 1 Footer 2 Footer 3 Footer 4

Description List

Basic

Apple
A red fruit rich in vitamins
Orange
Both a fruit and a color. As a fruit it is sually squeezed for its juice.
Banana
Yellow long fruit rich in potasium. It is sweet and most popular.

Inline

NaN

Using class .desc-columns you can placer both <dt>...</dt> into a single line with te following <dd>...</dd>:

Html
<dl class="desc-columns">
    <dt>Apple</dt>
    <dd>A red fruit rich in vitamins</dd>
    <dt>Orange</dt>
    <dd>Both a fruit and a color. As a fruit it is sually squeezed for its juice.</dd>
    <dt>Banana</dt>
    <dd>Yellow long fruit rich in potasium. It is sweet and most popular.</dd>
</dl>

Colors

Theme comes comes in color combinations consisting of 2 colors. Background color and text color.
For each color there are classes started with color-* indicating which color is selected:

Color CSS Class Background Color Frontend Color Change
Default <none> rgb(0,0,0) rgb(220,217,217)
Green .color-green rgb(0,0,0) hsl(120 56.1% 50.5%)
Amber .color-amber rgb(0,0,0) hsl(40 70% 49.5%)
Blue (DOS-Line, windows BSOD-like) .color-dos hsl(240 100% 33%) rgb(0,0,0)
Paper .color-paper hsl(40 70% 49.5%) rgb(219,218,218)

Alerts

Alert Info

Use this to notify user about an important information

Dear sir I am informing you about something.... 
<div class="alert alert-info">
    <i class="icon"></i>
    Dear sir I am informing you about something....
</div>

Alert Notice

Notify user about something serious.

You must pay attention on what you are doing.... 
<div class="alert alert-notice">
    <i class="icon"></i>
    You must pay attention on what you are doing....
</div>

Alert Stop

Notify user about a prohibiting action.

Stop doing do this.... 
<div class="alert alert-stop">
    <i class="icon"></i>
    Stop doing do this....
</div>

Alert Warning

Ensure user pays attention.

Oh snap this is serious!! 
<div class="alert alert-warning">
    Oh snap this is serious!!
</div>

Alert Danger

Blinking text

Oh snap this is serious!! 
<div class="alert alert-danger">
    Oh snap this is serious!!
</div>

Blinking Background

Oh snap this is serious!! 
<div class="alert alert-danger2">
    Oh snap this is serious!!
</div>

CodeWrapper

Basic usage

If you want to place a piece of code into your documentation use:

HTML
            
<div class="code-wrapper">
    <div>
        <h5>HTML</h5>
        <button class="copy">COPY</button>
    </div>
    <pre>
        <code>
            Piece of code here            
        </code>
    </pre>
</div>

The component also need to initialize the copy buttons, both js and esm supported:

JS
            
<script type=\"module\">
    import { autoinit } from "/js/asciiart.esm.js"; 
    document.addEventListener("DOMContentLoaded",function(){
        autoinit.codewrapper()
    })
</script>
            
        
            
<script type="application/javascript" src="/js/asciiart.min.js></script>
<script>
    document.addEventListener("DOMContentLoaded",function(){
        AsciiartTheme.autoinit.codewrapper()
    })
</script>

Otherwise you can use the CodeWrapper class, ideal for a single element, both js and esm supported:

JS
            
<script type=\"module\">
    import { CodeWrapper } from "/js/asciiart.esm.js"; 
    document.addEventListener("DOMContentLoaded",function(){
        new CodeWrapper("#mycontainer")
    })
</script>
            
        
            
<script type="application/javascript" src="/js/asciiart.min.js"></script>
<script>
    document.addEventListener("DOMContentLoaded",function(){
        new AsciiartTheme.CodeWrapper("#mycontainer")
    })
</script>

Tabs

In case thay you need to show variations (eg. on how could a package be installed) codewrapper supports tabs as well:

HTML
            
<div class="code-wrapper">
    <div>
        <h5>Installation Instructions</h5>
        <div class="tab-button-container">
                <button class="btn-tab" role="tab" aria-selected="true" aria-controls="#windows">Windows</button>
                <button class="btn-tab" role="tab" aria-controls="#linux">Linux</button>
        </div>
        <button class="copy">COPY</button>
    </div>
    <pre id="windows">
        <code>
            windows installation            
        </code>
    </pre>
    <pre id="linux">
        <code>
            linux installation            
        </code>
    </pre>
</div>

Tabs can lead the title as well:

HTML
            
<div class="code-wrapper">
    <div>
        <div class="tab-button-container">
                <button class="btn-tab" role="tab" aria-selected="true" aria-controls="#windows">Windows</button>
                <button class="btn-tab" role="tab" aria-controls="#linux">Linux</button>
        </div>
        <h5>Installation Instructions</h5>
        <button class="copy">COPY</button>
    </div>
    <pre id="windows">
        <code>
            windows installation            
        </code>
    </pre>
    <pre id="linux">
        <code>
            linux installation            
        </code>
    </pre>
</div>

Simple Tree

Preview

  • Item
  • Item
  • Item with nested Items
    • Nested Item 1
    • Nested Item with nested Items
      • Nested Item 1
      • Nested Item 2
    • Nested Item 3

Usage

In case you want to simply display a list in a form of tree use tree class instead. Javascript ignores this class:

HTML Code
<ul class="tree">
                <li>Item</li>
                <li>Item</li>
                <li data-visible="true">
                    <span>Item with nested Items</span>
                    <ul>
                        <li><span>Nested Item 1</span></li>
                        <li><span>Nested Item with nested Items</span>
                             <ul>
                                <li>Nested Item 1</li>
                                <li>Nested Item 2</li>
                            </ul>
                        </li>
                        <li>Nested Item 3</li>
                    </ul>
                </li>
            </ul>

Treemenu

Usage

Tree menu is an ideal way to represent navigation whilst retaining a nice, retro look. In order to work you need to initialize html:

HTML Code
<ul class="treemenu">
                <li><a href="#">Typography</a></li>
                <li><a href="#">Tables</a></li>
                <li data-visible="true">
                    <button aria-expanded="false">Navbar</button>
                    <ul>
                        <li><a href="#">Basic Usage</a></li>
                        <li><a href="#">Sticky Top</a></li>
                        <li><a href="#">Leading Elements</a></li>
                    </ul>
                </li>
                <li><a href="#">Alerts</a></li>
                <li><button aria-expanded="false">Codewrapper</button>
                    <ul>
                        <li><a href="#">Basic usage</a></li>
                        <li><a href="#">Tabs</a></li>
                    </ul>
                </li>
                <li><a href="#">Treemenu</a></li>
            </ul>

Beyond html it also needs to be initialized via Javascript:

JS Code
<script type="application/javascript" src="/js/asciiart.min.js"></script>
<script>
    document.addEventListener("DOMContentLoaded",function(){
        AsciiartTheme.autoinit.treemenu()
    })
</script>
<script type="module">
    import { autoinit } from "/js/asciiart.esm.js"; 
    document.addEventListener("DOMContentLoaded",function(){
        autoinit.treemenu()
    })
</script>