278  Style Guide

This page is a reference for custom HTML classes used throughout the book.

278.1 Citation Styles

Description Appearance Use
Last name with year link in parentheses Lorem Roßa (2017) ipsum Lorem @rossa2017sketchnotes ipsum
Repeated last name with year link in parentheses Lorem Roßa (2020) ipsum Lorem @rossa2020biblio ipsum
Name and year in link with pages Lorem (Roßa 2020, 3–5, 46–48 and passim) ipsum Lorem [@rossa2020biblio, pp. 3-5, 46-48 and passim] ipsum.
Multiple links Lorem (Roßa 2017, 2020) ipsum Lorem [@rossa2017sketchnotes; @rossa2020biblio] ipsum
Multiple links with pages and chapters Lorem (see Roßa 2017, 3–5; also Roßa 2020, chap. 1) ipsum Lorem [see @rossa2017sketchnotes, pp. 3-5; also @rossa2020biblio, chap. 1] ipsum
Page in link Lorem Hamming and Victor (2020, 6) ipsum Lorem @hamming2020art [p. 6] ipsum
Manually write out name Lorem Roßa (2020) ipsum Lorem Roßa [-@rossa2020biblio] ipsum
Table 278.1: Citation Styles. Citations appear in the last chapter.

278.2 HTML Classes

278.2.1 Boxes

Use the .box class to define a hatched box at the start of a chapter for the learning objective and take-home messages.

Take-home Message

Lorem Ipsum

278.2.2 Text Highlights

Class .notetoself:

This is a note to self about something I want to remember

Class .text-box:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

278.2.3 Figure Boxes

Class .bad-block .dv-block:

Figure 278.1: Bad figure caption

Class .good-block .dv-block:

Figure 278.2: Good figure caption

Class .caution-block .dv-block:

Figure 278.3: figure caption

Class .info-block .dv-block:

Figure 278.4: figure caption

Class .good-block .bulb-block .dv-block:

Figure 278.5: figure caption

Class .bad-block .dv-block with a multi-figure output manually adjusting the second figure to be .good-block:

Figure 278.6: Sub-figure 1 caption

Figure 278.7: Sub-figure 2 caption

278.3 Text Boxes

278.3.1 Without numbering or cross-references

Class: .bad-example-block .example-block as text:

Here is a bad example

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Class: .good-example-block .example-block as text:

Here is a good example

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Class: .caution-example-block .example-block as text:

Here is a cautious example

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Class: .info-example-block .example-block as text:

Here is an info example

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Class: .bulb-example-block .example-block as text:

Here is a bright idea

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

278.4 Example Text Boxes w cross-references

278.1 This is an default numbered example.

278.2 This is an numbered example, bulb style.

278.3 This is an numbered example, info style.

278.4 This is an numbered example, bad style.

278.5 This is an numbered example, good style.

278.6 This is an numbered example, caution style.

There are cross references to the examples above: ex 278.1, ex 278.2, ex 278.3, ex 278.4, ex 278.5, ex 278.6.

278.5 Definitions

Class: .dl

A definition without a cross-reference

A Term

and its definition

A definition with a cross-reference, but the actual definition is hidden.

Definition 278.1  

Another Term

and its definition

Link to another term directly in the text.