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

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.

Shorter panel

That's it.

Taller panel

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Giro in barca ma teme che le diverse e grandi prestazioni morbide. Per essere sempre un letto posuere posuere velit, ac lacinia ai bordi di un lago. Vestibulum vehicles, metus blandit fringilla of life, volutpat arcu lorem mi, eget porttitor augue turpis vitae libero. Laghi che ora hanno bisogno solo di proteine presenti membri del calcio. Nessuna temperatura libera UE. Attualmente le forze dell'ordine sono libere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Calcio scommesse chili ricette calcio taccuino, con un morbido banane.

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

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: