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.

How to 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.

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):

Left
Center
Right