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.
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
- 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):
Spoilers
You can define spoilers.
Spoiler panels
Entire panels can be spoilered as well!
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!
Forms
Inputs
Bluelib allows for the easy creation of forms: