is a light-weight list of CSS definitions for a minimalist responsive documentation.

How can I use it?

Download the mininified source here and add the following line to the header of your HTML:

<link rel="stylesheet" type="text/css" href="wp.min.css">

Documentation

The menu consists of a div elem wrapped inside a nav which is inside an aside tag. A top level menu entry is a simple anchor a. A sub-menu is made by adding a checkbox input with id='s1-*', where * denotes the id of the sub-menu. The input tag is followed by a label and a div with class='s1'.
Second level sub-menu is created in the same fashion as the sub-menu, but with s2 as id-initial and class name.

Headers

supports only 3 levels of headers for readability reasons. The headers follow the following stylistic order:

Header 1

Header 2

Header 3

Links

inline link

The elements a are used for in-line links. These unvisited and visited links are both colored blue.

buttons

Buttons can appear in different context, but provides the same design for each of them. The last one (file) requires a label element after the file input, and also a span to show the selected filesStyling & Customizing File Inputs the Smart Way. These are not included here as JS is not part of . The buttons are:
anchor element file input

Once a file is selected, a span with the .filename class can be used to show the file name: Selected file

reference

You a can add a reference to the text, which is a special type of link, by wrapping the link inside a span class='ref' tag. The resulting link becomes a reference indicated by a superscript right where you want to put the reference.

Lists

supports all three types of lists: unordered, ordered and description lists. In addition, there is an unordered class with custom label/value pairs.

unordered

Short shopping list:

bean
potato
tomato
jalapeño
minced meat
timian

ordered

Awesome recipe:

Cook meat until it's edible.
Chop the potatoes and tomatoes in small cubes.
Cook all vegetables together with the meat.
Add timian and jalapeños.

description

A short description of some Scandinavian countries:

Denmark: Lot of bikes, good beers and licorice.
Sweden: Lot of steel, cold head and semla.
Iceland: Beautiful nature, green energy and hákarl.

custom

The custom list has the same syntax as a description list, but uses the .custom class:

html: Markup language to describe the content of a web page.
css: Stylesheet language to describe the look and feel of a web page.
javascript: Scripting language to implement interactions between web elements.

Code

inline

Code that is inserted in a text is surrounded by the code tag.

block

For a larger code block, wrap the code in pre:

html,
body {
    font-family: 'Avenir Next', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
    background-color: white;
    color: black;
}

For code highlight, we use highlight.js.

classes

Some convenience classes are also provided for quick edit:

.tag: wraps the content with the < and > brackets.

Table

A table with `thead`, `tfoot` and `tbody`.
item name	number of items	item price
total	5	63$
beer	2	3$
wine	1	10$
vodka	1	35$
some very fancy coctail	1	12$

Some additional classes are added to th to better adjust column width:

.half: Sets column width to 50% of the table
.third: Sets column width to 33.33% of the table
.fourth: Sets column width to 25% of the table
.fifth: Sets column width to 20% of the table

Classes

Some more convenience classes.

card

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis eget hendrerit mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam sagittis massa et consequat lacinia. Curabitur pharetra tellus id efficitur scelerisque. Maecenas aliquet scelerisque elit eget lobortis. Vestibulum laoreet arcu nisl, id luctus nunc ornare vel. Pellentesque arcu augue, faucibus ut nisi in, facilisis tempor nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

test 3 test 3 test 3 test 3 test 3