Bluelib 2
RYG style, in pure CSS
Welcome to bluelib!
Following are some examples on the things you can do with bluelib.
To see how something is done, Right Click on it and then press Inspect Element.
Panels
Panel
This is a panel.
It usually represents a section of text about a topic described by the title above.
| This... | ...is a... | table! |
|---|---|---|
| Tables are containers too! | They will be themed automatically. | Columns will be automatically scaled based on their content. |
Blockquote
This is a blockquote.
Blockquotes are specially formatted panels, useful for quotes!
Close containers
Here's what two panels next to each other look like:
Nesting containers
Level one
Containers can be nested effortlessly!
Drop one outside of any paragraphs and they will nest automatically.
Level two
You can add text above...
Level three
How deep does the rabbit hole go?
PANELCEPTION.
...or below!
Layout
Splitter and splitted
You can split elements into multiple columns.
The columns will grow automatically to on the height of the tallest.
Horizonal rows
You can add horizontal rows to the page:
They are very useful as separators!
Formatting
Colors
You can use colored text:
- Red
- Orange
- Yellow
- Lime
- Cyan
- Blue
- Magenta
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):
Spoilers
You can define spoilers.
Spoiler panels
Entire panels can be spoilered as well!
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!