Bluelib 2

RYG style, in pure CSS

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.

A screenshot showing how to 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.

Uno reverse card reverses water

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:

USB key in a bottle

Quarter

The following image has a limit of a quarter of the vertical viewport:

USB key in a bottle

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

Left
Center
Right

Style

You can use all the usual text styles:

  • Regular
  • Bold
  • Italic
  • Underlined
  • Struck
  • Code
  • All 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!

And panels!

Forms

Inputs

Bluelib allows for the easy creation of forms: