Name

manweb — Web framework witch display webpage like a nice unix manpage

Synopsys

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

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

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

Description

manweb is framework wich give to website a nice apparence of à UNIX manual displayed with a pager like less or more. So, it will be nice to use as home page for UNIX oriented project, especially terminal programs but it also could be used for serious technical documentation, because it’s distraction free.

Usage

The most minimal code you have to put on the html page header is: 

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

This bring a simple style with just a white background and black text with no other color.

In addition, you can ad under this first line a second colorsheme deffinition: 

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

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

Where colorsheme is the name of the choosen colorsheme. But becarrefull, you have to always put the colorsheme’s stylesheet after the default one.
For the moment, you can chose betwen two additionnal colorsheme:

Elements

Basic Tags

Heading

The section’s <h1> elements have the same redring than the TROFF’s .SH command. It always display the title’s section at the top left and capitalize the text.
So, the following HTML code: 

<h1>Diffie-Helman protocol</h1>
<p>Lorem ipsum dolor sit amet et consectetur.</p>

Will be have a rendering like this:

Diffie-Helman protocol

Lorem ipsum dolor sit amet et consectetur.

Note that others level section titles don’t display the text in top left but begin at five character width to the left side, as the TROFF’s .SS command do. 

<h1>Diffie-Helman protocol</h1>
<h2>How Alice meet Bob</h2>
<p>Lorem ipsum dolor sit amet et consectetur.</p>

Will be have a rendering like this:

Diffie-Helman protocol

How Alice meet Bob

Lorem ipsum dolor sit amet et consectetur.

The <small> tag is also available in the heading tags and create a secondary text. 

<h1>Diffie-Helman protocol <small>is better</small></h1>
<h2>Explanations <small>How it work</small></h2>
<p>Lorem ipsum dolor sit amet et consectetur.</p>

Eliptic Curves is better

Explanations How it work

Lorem ipsum dolor sit amet et consectetur.

Body copy

The section’s <p> elements have the same redring than the TROFF’s .PP command. It always display the title’s section at eight width characters from the left side.

<h1>Diffie-Helman protocol</h1>
<p>This is the begining of the paragraph.</p>

Will be have a rendering like this:

Diffie-Helman protocol

This is the begining of the paragraph.

Links

The default TROFF’s language haven’t a clickable words and didn’t bring any command, so, the links is litteraly displayed with no formating. But manweb come with two ways for displaying links.

The first one is the most similar to the TROFF’s way, it display the full link: 

You can click on <a  class="visible" href="http://example.com">http://example.com</a>
You can click on http://example.com

The other way didn’t exist at all on TROFF, but it’s inspired from the vim’s documentation system. It display the label betwean two pipe (|). 

<a class="displayedLink" href="http://example.com">Click here</a>
Click here
Lists
<ul>
TODO
<ol>
TODO
Description

TODO

Formating

<acronym>
<abbr>
<address>
<b>
<blockquote>
<cite>
<code>
<del>
<em>
<i>
<ins>
<kbd>
<pre>
<q>
<s>
<samp>
<strong>
<tt>
<u>

Form/Table

TODO

Class

.externalCommand
.constant
.displayedLink

Colorsheme

See also

BOOTSTRA.386 at https://kristopolous.github.io/BOOTSTRA.386/

Author

The mayor part of manweb is writen by Fauve (aka Idriss al Idrissi) http://taniere.info and could be foud on Github at https://github.com/FauveNoir/manweb/.