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.

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: