Welcome to Bluelib!
This is an example page containing most of the elements present in Bluelib (layouts are obviously missing).
This page uses the royalblue.root.css target; other targets are available and may have a different look and/or selector names.
To see how an element is constructed, Right Click it and then press Inspect Element.
Panels
Box
This is a box.
It usually represents a section of text about a topic described by the title above.
Blockquote
This is a blockquote.
Blockquotes are specially formatted panels, useful for quotes!
Nesting panels
Panels can be nested, as you are about to see:
Nested panels are exactly as regular panels, and they can have text as well.
How deep does the rabbit hole go?
PANELCEPTION.
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
What's happening?
Split panels inherit the height of the tallest.
Split panel types
As you have just seen, splits can include panels of different types.
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.
Disabled
Disabled elements appear transparent, non-interactable and display a not-allowed cursor if hovered.
Forms
Inputs
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.
Various elements
Headings
Bluelib styles up to 6 levels of headings:
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:
This is an example.
Visited anchors will have a different color.
Take me to Wikipedia!
Anchors with no destination have a different style, so that the page author can notice and fix them.
This link leads nowhere.
Anchors which start a download or open an external program will have a different style:
Download GIMP 2.10.24
Annotations
Ruby text
Ruby text is made slightly transparent, to make the main text more evident.
Mo de na
漢 字
明日