Box

A box panel is a generic container styled as a box with borders on all four sides.

Dimensions

Panels always have a 8px margin and 8px of padding.

Hi! This is me talking to you, the reader!

I'm testing panel dimensions!

See? The margin between these dialog panels is consistent!

Nesting

Panels of any kind can be infinitely nested.

Chapter

A chapter is a grouping of an heading and multiple panels containing tightly related information.

You're seeing one right now!

Panel heights

In a chapter, all panels on a row inherit the height of the tallest panel in it, so that no empty space is left.

Auto-wrapping

Additionaly, panels in a chapter will automatically wrap if their contents won't fit horizontally.

Force-wrapping

You can override the automatic wrapping and manually decide where a chapter should wrap by inserting a force-wrap element where you want the chapter to wrap.

Separator

A separator is a horizontal line that fills all the horizontal space available on a panel, forcing a line wrap.

Top Text

Light separator

A light separator is a slightly more transparent separator, to be used if the regular color distracts too much from the flow of the text.

Bottom Text

Heavy separator

A heavy separator is a non-transparent separator, to be used if the regular color isn't apparent enough.

Bottom Text 2: Electric Boogaloo

Default

Images are automatically centered and resized to fit the panel they are in.

Limited

Images can be limited to prevent them from taking up too much screen space.

Half

The following image has a limit of half the vertical viewport:

Quarter

The following image has a limit of a quarter of the vertical viewport:

Figures

Images can be wrapped in a figure element to semantically provide additional detail to them.

Table

A table is an element displaying data aligned and ordered by rows and columns.

Elements in tables can be marked to increase their contrast with the rest.

Captions can are above the table by default, but they can be moved below the table.

Unordered lists

An unordered list displays a series of items whose order is irrelevant.

• This
• That
• Wooper
• Quagsire

Ordered lists

A ordered list displays a series of items whose order is relevant.

1. Gold
2. Silver
3. Bronze
4. Iron

Description lists

A description list displays a series of name-description pairs.

Key

Value

Other key

Other value

Disabled

An element can be disabled to make it partially transparent, non-interactable and displaying the not-allowed cursor when hovered.

Any element, from a <span> to a chapter, can be disabled.

Input

An input is an interactive element that allows the reader of the page to interact with it.

They come in multiple kinds:

Forms, labels and inputs

A form is a grouping of labels and inputs with the same purpose, with the former describing what should be entered in the latter.

Form groups

Inputs such as radios or checkboxes should be grouped together when inserted in a form.

Groups automatically wrap if the inputs don't fit on a single line.

Row groups

A row group is a form group where the inputs are arranged vertically instead of horizontally.

Form rows

Forms can also contain form rows, elements which ignore the form columns and instead take up the whole row.

Headings

An heading is the title of an article, chapter or panel.

Generally, panels look nicer if they start with a level-3 heading, but you may use whichever you want, as Bluelib will automatically handle the margin.

Anchors

An anchor is a part of text which can be clicked to move to a different page or part of page.

Visited anchors have a slightly different color.

Anchors with no destination are colored differently, so that the page author can notice and fix them.

Anchors which start a download or open an external program have also have slightly different color.

Details and summaries

A detail is an element which collapses the elements inside until its summary is clicked.

Multiple can be displayed aside each other, and can also be nested.

Ruby text

A ruby is an inline element with annotations above the text.

Mo /ˈmɒ/ de /dɪ/ na /nə/

漢 (kan) 字 (ji)

明日 (ashita)

Todo

A todo is a panel marked as incomplete by the page author.

Its colors are palette-independent and derive from the 🚧 Twemoji.

Semantics

A semantic is an inline element having a specific meaning defined by the HTML specification.

Here's the full list of them:

• Abbreviation
• Bring Attention
• Citation
• Code with variable
• Definition
• Emphasis
• Idiomatic Text
• Mark Text
• Inline Quotation
• Strikethrough
• Sample Output
• Side Comment
• Strong Importance
• Unarticulated Annotation
• Variable

Keyboard

A keyboard element represents an interaction of the user with any kind of interface, such as a keyboard key like Enter, a combination of key presses like Ctrl + Alt + Del, or the interaction with an UI element like the Refresh button.

Key presses and releases can be distinguished via special classes: Press A Release A

Preformatted and code

A preformatted text element displays its content as it is, preserving all spaces, newlines, and indentation.

This is regular preformatted text.   :)

If code is being represented, it should be wrapped inside a code element.

This is preformatted code text.   :)

Bluelib color

All Bluelib elements get their Bluelib color dynamically from the --bluelib-color-* CSS variables, and then use it to paint themselves.

It is possible to change this color to alter the color of not only text, but panels and other elements as well!

White

This box has a custom color: it is always white!

Black

This box has a custom color: it is always black!