- 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. -
-
- + Bluelib 2 +
- Panels + RYG style, in pure CSS
-- 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 + Welcome to bluelib!
- You can add text above... + 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 three + Level two
- How deep does the rabbit hole go? + You can add text above...
-- PANELCEPTION. - -+ +
+ ...or below! +
+ Layout +
++ Splitter and splitted +
- ...or below! + 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!
- Layout -
-- Splitter and splitted -
-- You can split elements into multiple columns. -
-- The columns will grow automatically to on the height of the tallest. -
++ Formatting +
- Shorter panel + Colors
- That's it. + 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): +
++ 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 + +
++ +
++
- Taller panel + Toggle buttons
- ++ Bluelib supports buttons that can be toggled on and off: +
++ + + +
++ + + +
++ + + +
- 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): -
-- 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! -
-+ Coloring panels +
++ Panels can be recolored! +
++ Elements contained inside will be recolored accordingly. +
- Forms -
-- Inputs -
-- Bluelib allows for the easy creation of forms: -
- -++ ++ 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: +
+ +