# Rapido.css: semantic HTML for your writings.

Rapido provides a default style for a set of semantic HTML elements that you can use to compose your essays. Just write with semantic HTML, without the need to remember any CSS class or JS command.

The present document has been created using Rapido, you can easily get documents or blog posts with the same layout and style. See how to use Rapido in the next sections.

Rapido is open source, view it on Github.

# Motivation

Having your own corner on the web where you can freely share thoughts or technical stuff is still cool, and the popularity of tools like Jekyll or Gatsby proves that. Rapido intervenes there, offering semantic HTML templates for a variety of typical author needs: like header, sections, side notes, references and so on.The importance of using semantic HTML is a common theme in web development, it is a good idea to use the relevant HTML element for the job. Semantic HTML improves the usability of the code and ensures maximum accessibility.

Rapido has been crafted with the idea that using semantic HTML for your writings can be easy. For such a reason Rapido does not make use of CSS classes or Javascript hooks, the author can compose all the different parts of the document with semantic HTML elements, for example adding side notes in paragraphs with the <small> element.

# Getting started

Rapido provides style rules in the rapido.css stylesheet, you can see the latest version of the CSS file in Github. Use rapido.css linking to it within the <head> element in your document.

The style rules defined in rapido.css are name-spaced under the CSS class rapido. Being Rapido thought for web essays, the place to use the CSS class is the <article> element, as showed in the next snippet.

## Install with npm

Alternatively, you may want to install Rapido using npm. This is especially useful when you want to add Rapido as a dependency of your application.

npm install @nextbitlabs/rapido


If you want to try Rapido then you need the skeleton of an HTML document. The next code snippet provides a minimal template, copy the snippet in a fresh HTML file.

The next sections describe how to replace the ellipsis with the content of interest, like paragraphs, figures, tables and so on.

# Sections

The previous code snippet shows a gap within the <article> element, you can fill the gap with sections. Typically, sections have a heading and one or more paragraphs. Moreover, sections may also contain figures, tables and much more.

The code snippet above shows an example of implicit sectioning, where both the <h1> and <h2> elements are in the same section. Authors are encouraged to explicitly wrap sections in elements of sectioning content, instead of relying on the implicit sections generated by having multiple headings in one <section> element.

# Title and abstract

The <header> element is used for the title and few introductory paragraphs of your document. Generally, it is placed as the first element within the <article> element.

The header may also contain full-width images, as described in section Images and videos.

This section describes how to add a side comment. Side comments typically show parenthetical content considered part of the main flow, like qualifying remarks directly related to the section.Side comments are related to the paragraph, therefore they usually appear right or below the text of the paragraph.

A side comment should be inserted within the paragraph of a section, it will appear at the right of the paragraph and vertically aligned with it, or just below the paragraph on smaller screens.

# Images and videos

Images and videos are displayed using the <img> and <video> elements. If a caption is needed, wrap images and videos within the <figure> element and use the <figcaption> element for the caption, as shown in the code snippet below. The <figcaption> element can contain a heading and one or more paragraphs.

## Videos

Exactly the same HTML code snippet is used for displaying videos, with the obvious difference of using the <video> element in place of the <img> element, as shown below.

# Quotations

This section shows how to add quotations from another source into your document. The <blockquote> element can be inserted in a section within other paragraphs and may contain one or more paragraphs as well.

Content inside a blockquote must be quoted from another source, whose address, if it has one, may be cited in the cite attribute.

HTML Living Standard

# Highlights

The repetition of some content from the same source is used for the purposes of enticing readers or highlighting key topics. You can repeat a passage or an entire paragraph using the <aside> element inside a section.

# Tables

As well as with images and videos, tables are displayed within the <figure> element, with an optional caption. Tables are useful for displaying tabular data with few or several columns, if the table is bigger than the window width the hidden part is visible through mouse scrolling.

# Lists

Lists are created with the <ul> and <ol> elements, whereas <li> element is used to represent list items.

• use the <ol> element for ordered lists

• use the <ul> element for unordered lists

# Code

Listings of code can be inserted inline inside a paragraph or within element <figure> for multiple lines of code.

As with images, videos and tables, the default width is 600px. You can use inline declarations to customise the width, for example setting 100% width with <pre style="width: 100%">. See section Customisations for more details.

## Example 1

The next code snippet shows how to write the factorial function above.

## Example 2

This example shows how to obtain the expected indentation with more lines of code. As rule of thumb, paste the code directly within the <pre><code>...</code></pre> elements.

## Example 3

A special treatment is necessary for HTML code because it needs to be escaped: use string &lt; for < and string &gt; for >.

## Highlight code

You can highlight code in two different ways: inline or full lines.

Instead, highlight one or more lines of code wrapping the full line within the <mark> element, the next snippet shows an example.

# Math formulas

Math typesetting is not supported by default. We suggest using KaTeX, a popular JavaScript library for TeX math rendering on the web. To get KaTex working, copy and paste the next code within the <head> element (see section Getting Started).

## Example 1

You can insert mathematics inline on a paragraph, like the famous equivalence between energy and inertial mass $E = mc^2$, surrounding the mathematical formula with symbols $...$, as presented below.

## Example 2

Having your formula in a new line is easy as well, just use $$...$$ instead of $...$.

$$G_{\mu\nu} + \Lambda g_{\mu\nu} = \frac{8\pi G}{c^4}T_{\mu\nu}$$Einstein field equations [1], expressed for the first time 8 years later the the happiest thought of my life [2].

## Example 3

KaTeX supports a wide list of TeX functions. For example, for the representation of the following system of equations, we make use of the \begin{array} environment.

# Customisations

Rapido focuses on semantic HTML, providing a default style for a variety of HTML elements. Being CSS classes out of scope, authors looking for a different style must opt for a customisation.Rapido does not expose CSS classes. This design choice makes Rapido easier to use and, due to how specificity works, easier to extend with custom CSS classes.

You may change the default CSS rules or write new rules that have precedence over the default ones. As usual, this is possible both with inline declarations and stylesheets. The following examples show some common customisations.