+ 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.
+
+
+ Due to technical limitations, panels will have a 16px vertical margin when a chapter is force-wrapped.
+
+
+
+
+
+ Separators
+
+
+
+ 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
-
-
-
- Panel margins
-
-
- In most cases, panels adjust their margins automatically.
-
-
- Here's what three blockquotes next to each other look like:
-
-
-
- Snake?
-
-
-
-
- Snake!
-
-
-
-
- SNAAAAKE!!!
-
-
-
-
- Splits
-
-
-
- Split
-
-
- You can split panels into multiple columns.
-
-
-
-
Left
-
-
-
Right
-
-
-
-
-
- Split heights
-
-
-
+
+
+ Images
+
+
- What's happening?
+ Default
- Split panels inherit the height of the tallest.
+ Images are automatically centered and resized to fit the panel they are in.
+
-
-
-
- Split panel types
-
-
- As you have just seen, splits can include panels of different types.
+ 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:
+
+
+
+
-
-
-
-
- Wrapping
-
-
- Splits will automatically wrap if one of their contents won't fit on the screen.
-
-
-
-
First
-
-
-
Second
-
-
-
Third
-
-
-
Fourth
-
-
-
Fifth
-
-
-
Sixth
-
-
-
Seventh
-
-
-
Eigth
-
-
-
Ninth
-
-
-
Tenth
-
-
-
Eleventh
-
-
-
Twelfth
-
-
-
Thirtheenth
-
-
-
-
-
- Force-wrapping
-
-
- You can manually force a split to wrap, fixing the vertical gap between the panels.
-
-
-
-
First
-
-
-
Second
-
-
-
Third
-
-
-
Fourth
-
-
-
-
Fifth
-
-
-
Sixth
-
-
-
Seventh
-
-
-
-
Eigth
-
-
-
Ninth
-
-
-
-
Tenth
-
-
-
-
- Separators
-
-
-
- Separator
-
-
- Bluelib provides separators, horizontal lines that can be used to separate elements.
-
-
-
- That was one of them.
-
-
-
-
-
- Light separator
-
-
- A lighter separator is available, if the regular color is too much distracting.
-
-
-
- That was one of them.
-
-
-
- Heavy separator
-
-
- A heavier separator is available, if the regular color isn't apparent enough.
-
-
-
- That was one of them.
-
-
-
-
- Images
-
-
-
- Default images
-
-
- Bluelib centers and automatically resizes images to fit the panel they are contained in.
-
-
-
-
-
- Limited images
-
-
- Images can be "limited", so that they never occupy too much screen real estate, especially if they're very tall.
-
-
-
-
- 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:
-
-
-
-
-
-
- Status
-
-
-
- Status
-
-
- Status are classes that can be applied to elements to mark some special interaction property.
-
-
-
+
+
+ Status
+
+
Disabled
- Disabled elements appear transparent, non-interactable and display a not-allowed cursor if hovered.
+ 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.
+
+
+ Please re-enable me, I did nothing wrong! I just said "AMOGU—"
+
-
-
-
- Forms
-
-
-
-
+
+
+
Inputs
-
-
+
+
+
+ Input
+
+
+ An input is an interactive element that allows the reader of the page to interact with it.
+
+
+ They come in multiple kinds:
+
+
+
+
+ Field
+
+
+ A field is an input where the user can insert text with their keyboard.
+
+
+
+
+
+
+ Select
+
+
+ A select is an input where the user can select one between multiple options.
+
+
+
+
+
+
+
+ Area
+
+
+ A area is a resizable input where the user can insert multiple lines of text with their keyboard.
+
+
+
+
+
+
+ Multiselect
+
+
+ A multiselect is an input where the user can select many options from a list.
+
+
+
+
+
+
+
+ Radio
+
+
+ A radio is an input which the user can either select or not, deselecting the other radios with the same name.
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Checkbox
+
+
+ A checkbox is an input which the user can either select or not.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Button
+
+
+ A button is an input which the user can interact with to trigger a reaction.
+
+
+
+
+
+
+
-
-
- Groups
-
-
- Form inputs can be grouped together.
-
-
-
- They automatically wrap if the inputs don't fit on a single line.
-
-
-
- Labels can be made to fill the whole line, forcing a wrap.
-
-
+
+
+ Forms
+
+
+
+ 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.
+
+
+
-
-
- Various elements
-
-
-
+
+
+ Common elements
+
Headings
- Bluelib styles up to 6 levels of headings:
+ An heading is the title of an article, chapter or panel.
-
Level-1
-
Level-2
-
Level-3
-
Level-4
-
Level-5
-
Level-6
-
+
+
Level-1
+
Level-2
+
Level-3
+
Level-4
+
Level-5
+
Level-6
+
+
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
-
-
- Bluelib styles anchors, clickable links to different places:
-
- 
+