About

The AsciiArt theme supports three primary layouts:

No Sidebar Demo
Sidebar Full – Sidebar with header upon aside. Demo
Sidebar upon content Demo

No sidebar

A minimalist, single-column layout focused entirely on content. Ideal for landing pages, simple articles, or documentation where a sidebar is unnecessary.

Html Example

Using this content you can generate the most basic html.

HTML Code

Preview

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>AsciiArt Theme - No sidebar demo</title>

  <!-- SCSS compiled CSS -->
  <link rel="stylesheet" href="/css/style.css">
  
</head>
<body>
  
  <header class="banner">
   <pre>
  ___           _ _  ___       _   
 / _ \         (_|_)/ _ \     | |  
/ /_\ \___  ___ _ _/ /_\ \_ __| |_ 
|  _  / __|/ __| | |  _  | '__| __|
| | | \__ \ (__| | | | | | |  | |_ 
\_| |_/___/\___|_|_\_| |_/_|   \__|
    </pre>
</header>



  <main>
    
    <!-- Main content place text, forms or anything else here -->
    <section>
    <h1>Article 1</h1>
    <p>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.</p>
</section>

<section>
    <h1>Article 2</h1>
    <p>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.</p>
</section>

<section>
    <h1>Article 3</h1>
    <p>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.</p>
</section>


<section>
    <h1>Article 4</h1>
    <p>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.</p>
</section>

<section>
    <h1>Article 5</h1>
    <p>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.</p>
</section>

  </main>

  
</body>
</html>

As you notice you need to include the css file. No javascript required.

CSS


<link rel="stylesheet" href="css/style.css">

Sidebar Full Layout

A comprehensive 'Application-style' layout. The sidebar occupies the full height of the viewport on the left, while the navigation and content scale responsively on the right.

Upon small screen or upon window resizing sidebar moves offcanvas allowing the user to focus on content.

HTML Example

HTML Code

Preview


    
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Default Title</title>

  <!-- SCSS compiled CSS -->
  <link rel="stylesheet" href="/css/style.css">
  <script type="application/javascript" src="/js/asciiart.min.js"></script>
  <script type="application/javascript">
    document.addEventListener("DOMContentLoaded", () => {
      new AsciiartTheme.Sidebar("#sidebar");
    });      
  </script>
  
</head>
<body class="sidebar-layout">
  <div id="sidebar" class="aside-wrapper-fullheight bellow-nav">
    <button class="button-close" data-control-element="#sidebar"></button>
    

    <aside>
      <nav aria-label="Sidebar navigation">
        
Sidebar content Here could place menus or navigation links.

      </nav>
    </aside>

    
  </div>

  <div class="main-wrapper">
    <div class="nav-wrapper sticky-top">
        <div class="lead">
          <button role="button" 
            class="button-expand button-toggle" 
            data-control-element="#sidebar"
          ></button>
        </div>
        <nav class="main-nav">
  <a href="/" class="">Index</a>
  <a href="/setup.html" class="">Setup</a>
  <a href="/layouts" class="active">Page types &amp; Layouts</a>
  <a href="/components.html" class="">Visual Components &amp; CSS classes</a>
</nav>
    </div>

    <main>
        
    <!-- Main content place text, forms or anything else here -->
    <section>
    <h1>Article 1</h1>
    <p>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.</p>
</section>

<section>
    <h1>Article 2</h1>
    <p>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.</p>
</section>

<section>
    <h1>Article 3</h1>
    <p>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.</p>
</section>


<section>
    <h1>Article 4</h1>
    <p>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.</p>
</section>

<section>
    <h1>Article 5</h1>
    <p>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.</p>
</section>

    </main>
  </div>
</body>
</html>

CSS

To use this layout, first include the theme's CSS:

CSS


<link rel="stylesheet" href="css/style.css">

Javascriupt

To keep the theme lightweight and modular, components do not auto-initialize. You must instantiate the Sidebar manually after the DOM has loaded:

JavaScript


<script type="application/javascript" src="/js/asciiart.min.js"></script>
<script type="application/javascript">
    document.addEventListener("DOMContentLoaded", () => {
        // Initialize the Sidebar component
        new AsciiartTheme.Sidebar("#sidebar");
    });
</script>


<script type="component">
    import { Sidebar } from "js/asciiart.esm.min.js";

    document.addEventListener("DOMContentLoaded", () => {
        // Initialize the Sidebar using ES6 module
        new Sidebar("#sidebar");
    });
</script>

Sidebar upon content

An extention of no-sidebar layout is to place underneath the main navigation a sidebar. This is usefull for placing a secondary navigation upon main content.

When browser window shinks it becomes hidden allowing you to focus upon main content.

Html

Using this content you can generate the most basic html.

HTML Code

Preview

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Aciiiart Theme Demo</title>

  <!-- SCSS compiled CSS -->
  <link rel="stylesheet" href="/css/style.css">
  <script type="application/javascript" src="/js/asciiart.min.js"></script>
  <script type="application/javascript">
    document.addEventListener("DOMContentLoaded", () => {
      new AsciiartTheme.Sidebar("#sidebar");
    });      
  </script>
  
    

</head>
<body>
  <div class="top-left-responsive">
     <button role="button" 
        class="button-expand button-toggle" 
        data-control-element="#sidebar"
      ></button>
  </div>

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


  </header>

  <div class="nav-wrapper sticky-top">
    
    <nav class="main-nav">
  <a href="#">Index</a>
  <a href="#">Page</a>
  <a href="#">Another page</a>
  <a href="#">Yet another page</a>
</nav>

  </div>

  <div class="sidebar-layout">
    <div class="aside-wrapper" id="sidebar">
      <button class="button-close" data-control-element="#sidebar"></button>
      <aside>
        <nav aria-label="Sidebar navigation">
            
Sidebar content Here could place menus or navigation links.

        </nav>
      </aside>
    </div>

    <div class="main-wrapper">
      <main>
        
    <!-- Main content place text, forms or anything else here -->
    <section>
    <h1>Article 1</h1>
    <p>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.</p>
</section>

<section>
    <h1>Article 2</h1>
    <p>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.</p>
</section>

<section>
    <h1>Article 3</h1>
    <p>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.</p>
</section>


<section>
    <h1>Article 4</h1>
    <p>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.</p>
</section>

<section>
    <h1>Article 5</h1>
    <p>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.</p>
</section>

      </main>
    </div>
  </div>
</body>
</html>

CSS

As you notice you need to include the css file.

CSS


<link rel="stylesheet" href="/css/style.css">

Javascript

Furthermore you need to include the theme's javascript file and initialize the sidebar.
To keep the theme lightweight and modular, components do not auto-initialize. You must instantiate the Sidebar manually after the DOM has loaded.

Javascript


<script type="application/javascript" src="/js/asciiart.min.js"></script>
<script type="application/javascript">
    document.addEventListener("DOMContentLoaded", () => {
        // Initialize the Sidebar component
        new AsciiartTheme.Sidebar("#sidebar");
    });
</script>


<script type="component">
    import { Sidebar } from "js/asciiart.esm.min.js";

    document.addEventListener("DOMContentLoaded", () => {
        // Initialize the Sidebar using ES6 module
        new Sidebar("#sidebar");
    });
</script>

Article & nomal text

Upon <main></main> the page content resides upon. You can use <article></article> and <article></article> tags to wrap the content:

HTML Code

<main>
    <section>
        <h1>Title</h1>
        <p>Some content here...</p>
    </section>

    <article>
        <h1>Title 2</h1>
        <section>
            <h2>Some Content</h2>
            <p>Some content</p>
        </section>
        <section>
            <h2>Some Content 2</h2>
            <p>Some content</p>
        </section>
    </article>
</main>

Unix Manpage

Minimal example

Some examples of manpages are:

grep Demo
tar Demo

Usage:

Using class manpage you can style an article in a style that aids the readability of html representation of unix manpages. A minimal example is:

html

<article class="manpage">
  <h1>GREP(1)</h1>

  <section>
    <h2>NAME</h2>
    <p><code>grep</code> - print lines that match patterns</p>
  </section>

  <section>
    <h2>SYNOPSIS</h2>
    <pre class="synopsis"><code>grep [<var>OPTIONS</var>] <var>PATTERN</var> [<var>FILE</var>...]</code></pre>
  </section>

  <section>
    <h2>DESCRIPTION</h2>
    <p>
      <code>grep</code> searches input files for lines that match a given pattern.
      By default, it prints the matching lines to standard output.
    </p>
    <p>
      Patterns are interpreted as basic regular expressions unless otherwise specified.
    </p>
  </section>

  <section class="options">
    <h2>OPTIONS</h2>
    <dl>
        <dt>
        <code>-i</code>, <code>--ignore-case</code>
        </dt>
        <dd>Ignore case distinctions in patterns and input data.</dd>

        <dt>
        <code>-r</code>, <code>--recursive</code>
        </dt>
        <dd>Read all files under each directory recursively.</dd>

        <dt>
        <code>-n</code>
        </dt>
        <dd>Prefix each line of output with the line number.</dd>

        <dt>
        <code>-v</code>, <code>--invert-match</code>
        </dt>
        <dd>Select non-matching lines.</dd>

        <dt>
        <code>-c</code>, <code>--count</code>
        </dt>
        <dd>Print only a count of matching lines per file.</dd>

        <dt>
        <code>-l</code>
        </dt>
        <dd>Print only names of files with matches.</dd>
    </dl>
    </section>

  <section>
    <h2>EXAMPLES</h2>
    <pre class="margin">
# Search for "error" in a file
grep "error" logfile.txt

# Case-insensitive search
grep -i "warning" logfile.txt

# Recursive search in a directory
grep -r "TODO" ./src

# Show line numbers
grep -n "main" program.c
    </pre>
  </section>

  <section>
    <h2>EXIT STATUS</h2>
    <p>
      0 if a match is found, 1 if no matches are found, and 2 if an error occurred.
    </p>
  </section>

  <section>
    <h2>SEE ALSO</h2>
    <p><code>egrep</code>, <code>fgrep</code>, <code>sed</code>, <code>awk</code></p>
  </section>

  <section>
    <h2>AUTHOR</h2>
    <p>Originally written by GNU Project contributors.</p>
  </section>
</article>

Synopsis

Using class .synopsis you can format the xcomman line usage. Each argument could be annotated using <var>...</var> html tag:

html

<pre class="synopsis"><code>grep [<var>OPTIONS</var>] <var>PATTERN</var> [<var>FILE</var>...]</code></pre>

You can use <pre>...</pre> with .synopsis class multiple times. Also can be used in conjuction with <code>...</code> tags:

html

<pre class="synopsis"><code>tar</code> <var>-c</var> [<var>-f</var> <var>ARCHIVE</var>] [<var>OPTIONS</var>] [<var>FILE...</var>]</pre>
<pre class="synopsis"><code>tar</code> <var>-r</var> [<var>-f</var> <var>ARCHIVE</var>] [<var>OPTIONS</var>] [<var>FILE...</var>]</pre>
<pre class="synopsis"><code>tar</code> <var>-t</var> [<var>-f</var> <var>ARCHIVE</var>] [<var>OPTIONS</var>] [<var>MEMBER...</var>]</pre>
<pre class="synopsis"><code>tar</code> <var>-u</var> [<var>-f</var> <var>ARCHIVE</var>] [<var>OPTIONS</var>] [<var>FILE...</var>]</pre>
<pre class="synopsis"><code>tar</code> <var>-x</var> [<var>-f</var> <var>ARCHIVE</var>] [<var>OPTIONS</var>] [<var>MEMBER...</var>]</pre>

Command line argument description

Upon manpage the comnmand line arguments use <dl></dl> html tags

html

<dl>
  <dt>
    <code>-A</code>, <code>--catenate</code>, <code>--concatenate</code>
  </dt>
  <dd>
    Append archives to the end of another archive. The arguments are treated as
    names of archives to append. All archives must be of the same format as the
    target archive, otherwise the result may be unusable with non-GNU tar.
    When multiple archives are given, members from all but the first are only
    accessible when using <code>-i</code> (<code>--ignore-zeros</code>).
    <br><br>
    Compressed archives cannot be concatenated.
  </dd>

  <dt>
    <code>-c</code>, <code>--create</code>
  </dt>
  <dd>
    Create a new archive. Arguments specify the files to include. Directories
    are archived recursively unless <code>--no-recursion</code> is used.
  </dd>

  <dt>
    <code>-d</code>, <code>--diff</code>, <code>--compare</code>
  </dt>
  <dd>
    Find differences between the archive and the file system. Arguments are
    optional and specify archive members to compare. If omitted, the current
    directory is used.
  </dd>

  <dt>
    <code>--delete</code>
  </dt>
  <dd>
    Delete members from the archive. Arguments specify the names of members
    to remove. At least one argument is required.
    <br><br>
    This option does not work on compressed archives. No short option exists.
  </dd>

  <dt>
    <code>-r</code>, <code>--append</code>
  </dt>
  <dd>
    Append files to the end of an archive. Arguments behave the same as for
    <code>-c</code> (<code>--create</code>).
  </dd>

  <dt>
    <code>-t</code>, <code>--list</code>
  </dt>
  <dd>
    List archive contents. Arguments are optional and specify which members
    to list.
  </dd>

  <dt>
    <code>--test-label</code>
  </dt>
  <dd>
    Test the archive volume label and exit. Without arguments, prints the label
    (if any) and exits with status 0. With arguments, compares the label against
    each one and exits with 0 if a match is found, otherwise 1. No output is
    shown unless used with <code>-v</code> (<code>--verbose</code>).
    <br><br>
    No short option exists.
  </dd>

  <dt>
    <code>-u</code>, <code>--update</code>
  </dt>
  <dd>
    Append files that are newer than their archived versions. Arguments are the
    same as for <code>-c</code> and <code>-r</code>. Newer files do not replace
    old ones; they are appended, so multiple versions of the same file may exist.
  </dd>

  <dt>
    <code>-x</code>, <code>--extract</code>, <code>--get</code>
  </dt>
  <dd>
    Extract files from an archive. Arguments are optional and specify which
    members to extract.
  </dd>

  <dt>