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!
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.
Limiting panels
Panels can be limited to force them to stay under 420px in width.
Split limited panels
This applies to panels inside a splitter too!
Autocenter
The splitter will try to keep the limited panels centered.
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 too!