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>

Lists

Unordered List

  • Item 1
  • Item 2
  • Item 3

Ordered List

  1. Item 1
  2. Item 2
  3. Item 3

Inline list

Using class .inline upon a ul class in order to display a list as inline:

  • Item 1
  • Item 2
  • Item 3

Inline with commas

Using class .inline-comma upon a ul class in order to display a list as inline:

  • Item 1
  • Item 2
  • Item 3

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

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.

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>
        <span>HTML</span>
        <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>
        <span>Installation Instructions</span>

        <div role="tablist" 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>

Also codewrapper can contain multiple tabs as well. In that case left and right scroll button appear:


sudo add-apt-repository ppa:pcmagas/mkdotenv
sudo apt-get update
sudo apt-get install mkdotenv

sudo dnf install dnf-plugins-core
dnf copr enable pc-magas/mkdotenv 
sudo dnf install mkdotenv

sudo dnf install -y 'dnf-command(copr)'
sudo dnf copr enable pc-magas/mkdotenv 
sudo dnf install -y mkdotenv

sudo zypper install opi
opi copr pc-magas/mkdotenv
sudo zypper install mkdotenv

wget https://github.com/pc-magas/mkdotenv/releases/download/v/mkdotenv--r0.apk
apk add mkdotenv--r0.apk
            

export VERSION=v
wget -o mkdotenv https://github.com/pc-magas/mkdotenv/releases/download/${VERSION}/mkdotenv-linux-amd64 
sudo cp mkdotenv-linux-amd64  /bin/mkdotenv
sudo chmod 755 /bin/mkdotenv

mkdotenv --version


export VERSION=v
wget -o mkdotenv https://github.com/pc-magas/mkdotenv/releases/download/${VERSION}/mkdotenv-linux-amd64 
cp mkdotenv-linux-amd64  ~/.local/bin/mkdotenv
chmod 755 ~/.local/bin/mkdotenv

mkdotenv --version

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>

        <span>Installation Instructions</span>

        <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 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>

Miscelanous classes

Hide upon small screens

You can use class .sm-hidden in order to hide an elemen in screend having < 700px

Banner class

If displaying asciiart wrap it around an element containing .banner class in order to display it nicely:

html 
<header class="banner">
   <pre>  ___           _ _  ___       _   
 / _ \         (_|_)/ _ \     | |  
/ /_\ \___  ___ _ _/ /_\ \_ __| |_ 
|  _  / __|/ __| | |  _  | '__| __|
| | | \__ \ (__| | | | | | |  | |_ 
\_| |_/___/\___|_|_\_| |_/_|   \__|
    </pre>
</header>

Stick to top

Via using class .sticky-top you can make an element stick into the top of the page.