Notebook Style

Last updated : 

This style is a modified version of that used for page 04 of my journal. It is a somewhat minimalist design inspired by notebooks that I used to keep in high school, featuring black, red, and blue ink.

This style supports both marginal and toggleäble notes, and is an excellent design if those are things you need. On the other hand, its emphasis on marginal notes means that it is only responsive down to 40rem. If you are goïng to choose a style with enormous margins like this one, make sure that you make use of them.


To use this style, just fill an <article> with any number of <header>, <footer>, <section>, <nav>, and <aside> children. Each of these divisions should only have element children. Only <section>s may have marginal notes.

Marginal notes are added using the <ins> element, whose child element should be the note itself. Code like the following is recommended : <ins ><span role="note" >Note contents.</span ></ins >. For optimal display, do not put needless whitespace inside of the note.Marginal notes use an <ins> element because their intention is to provide supplementary information or commentary which is inserted into ( the margins of ) a document. Imagine marking up a document with a red pen.

Toggleäble notes ( annotations ) can be added by specifying both the ANNOTATED class and a tabindex value ( 0 is recommended ) on an element ; you can use a <span class="ANNOTATION"> inside an ANNOTATED element to give the annotation.tabindex is required because it allows the element to receive focus—necessary for devices and readers who canʼt rely on hovering to display the annotation. The result looks like this An annotation..

Circled numbering is supported through <b class="NUMERIC"> : Add the SPACED class to give the numerals negative left and right margins, which might look more appealing if you have already padded the numerals with a fixed amount of whitespace in your source.

<nav> elements are displayed as a 3×n grid ; it is recommended that you place links inside of a <ul> or <ol> element.