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.
Formatting
Colors
You can use colored text:
- Red
- Orange
- Yellow
- Lime
- Cyan
- Blue
- Magenta
- Gray
Size
You can set the text size:
- XXL
- XL
- L
- M
- S
- XS
- XXS
Alignment
You can set the text alignment (only in block elements such as div):
Style
You can use all the usual text styles:
- Regular
- Bold
- Italic
- Underlined
StruckCodeAll of them together
Elements
Buttons
Bluelib supports buttons:
or
Toggle buttons
Bluelib supports buttons that can be toggled on and off:
Coloring panels
Panels can be recolored!
Elements contained inside will be recolored accordingly.
It works on all types of panels!
This blockquote should be green!
And so should be the separator above.
Interactivity
Tooltips
Text with a tooltip is underlined and has a "help" cursor if hovered.
Disabled
Elements can be disabled to reduce their opacity and display a "not allowed" cursor if hovered.
It also works with links!