2021-01-09 01:35:03 +00:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
2021-07-19 16:21:57 +00:00
< link rel = "stylesheet" href = "src/targets/royalblue.root.css" >
2021-01-09 01:35:03 +00:00
< title > Bluelib 2< / title >
2021-07-23 00:53:52 +00:00
< style >
body {
margin: 4px !important;
}
< / style >
2021-01-09 01:35:03 +00:00
< / head >
2021-01-09 22:16:07 +00:00
< body class = "theme-bluelib" >
2021-07-23 21:24:42 +00:00
< hgroup >
< h1 >
Bluelib 2
< / h1 >
2021-01-09 22:16:07 +00:00
< h2 >
2021-07-23 21:24:42 +00:00
RYG style, in pure CSS
2021-01-09 22:16:07 +00:00
< / h2 >
2021-07-23 21:24:42 +00:00
< / hgroup >
< div class = "layout layout-threecol" >
< main class = "main layout-threecol-center" >
2021-03-20 03:10:00 +00:00
< section >
2021-01-09 22:16:07 +00:00
< h3 >
2021-07-23 22:58:22 +00:00
Welcome to Bluelib!
2021-01-09 22:16:07 +00:00
< / h3 >
< p >
2021-07-23 22:58:22 +00:00
This is an example page containing most of the elements present in Bluelib (layouts are obviously missing).
2021-01-09 22:16:07 +00:00
< / p >
< p >
2021-07-23 22:58:22 +00:00
This page uses the < code > royalblue.root.css< / code > target; other targets are available and may have a different look and/or selector names.
2021-01-09 22:16:07 +00:00
< / p >
2021-07-23 22:58:22 +00:00
< p >
To see how an element is constructed, < kbd > Right Click< / kbd > it and then press < kbd > Inspect Element< / kbd > .
< / p >
< img class = "image-limited" src = "https://i.imgur.com/M8sFJeO.png" alt = "A screenshot showing how to Inspect Element." >
2021-01-09 22:16:07 +00:00
< / section >
2021-07-23 21:24:42 +00:00
< h2 >
Panels
< / h2 >
2021-03-20 03:10:00 +00:00
< section >
2021-01-09 22:16:07 +00:00
< h3 >
2021-07-27 02:04:18 +00:00
Box
2021-01-09 22:16:07 +00:00
< / h3 >
< p >
2021-07-27 02:04:18 +00:00
This is a box.
2021-01-09 22:16:07 +00:00
< / p >
< p >
2021-07-23 21:24:42 +00:00
It usually represents a section of text about a topic described by the title above.
2021-01-09 22:16:07 +00:00
< / p >
< / section >
2021-07-23 21:24:42 +00:00
< blockquote >
2021-01-09 22:16:07 +00:00
< h3 >
2021-07-23 21:24:42 +00:00
Blockquote
2021-01-09 22:16:07 +00:00
< / h3 >
< p >
2021-07-23 21:24:42 +00:00
This is a blockquote.
2021-01-09 22:16:07 +00:00
< / p >
2021-01-16 15:44:24 +00:00
< p >
2021-07-23 21:24:42 +00:00
Blockquotes are specially formatted panels, useful for quotes!
2021-01-16 15:44:24 +00:00
< / p >
2021-07-23 21:24:42 +00:00
< / blockquote >
< aside >
2021-03-22 15:28:15 +00:00
< h3 >
2021-07-23 21:24:42 +00:00
Aside
2021-03-22 15:28:15 +00:00
< / h3 >
< p >
2021-07-23 21:24:42 +00:00
This is an aside.
2021-03-22 15:28:15 +00:00
< / p >
< p >
2021-07-23 21:24:42 +00:00
Asides are panels with no border and smaller text, useful to describe less important things while inside
a panel.
2021-03-22 15:28:15 +00:00
< / p >
2021-07-23 21:24:42 +00:00
< / aside >
2021-03-22 15:28:15 +00:00
< section >
< h3 >
2021-07-27 02:04:18 +00:00
Nesting panels
2021-03-22 15:28:15 +00:00
< / h3 >
< p >
2021-07-27 02:04:18 +00:00
Panels can be nested, as you are about to see:
2021-03-22 15:28:15 +00:00
< / p >
2021-07-23 21:24:42 +00:00
< section >
< p >
2021-07-27 02:04:18 +00:00
Nested panels are exactly as regular panels, and they can have text as well.
2021-07-23 21:24:42 +00:00
< / p >
< section >
< p >
How deep does the rabbit hole go?
< / p >
< blockquote >
< b > < a href = "https://www.youtube.com/watch?v=G2jUhnCU9iA" target = "_blank" > PANELCEPTION.< / a > < / b >
< aside >
BWOON.
< aside >
BWOON.
< aside >
BWOON.
< / aside >
< / aside >
< / aside >
< / blockquote >
< / section >
2021-07-27 02:04:18 +00:00
< / section >
< / section >
< section >
< h3 >
Panel margins
< / h3 >
< p >
In most cases, panels adjust their margins automatically.
< / p >
< p >
Here's what three blockquotes next to each other look like:
< / p >
< blockquote >
2021-07-23 21:24:42 +00:00
< p >
2021-07-27 02:04:18 +00:00
Snake?
2021-07-23 21:24:42 +00:00
< / p >
2021-07-27 02:04:18 +00:00
< / blockquote >
< blockquote >
< p >
Snake!
< / p >
< / blockquote >
< blockquote >
< p >
SNAAAAKE!!!
< / p >
< / blockquote >
2021-03-22 15:28:15 +00:00
< / section >
2021-07-23 21:24:42 +00:00
< h2 >
2021-07-27 02:04:18 +00:00
Splits
2021-07-23 21:24:42 +00:00
< / h2 >
< section >
2021-03-22 15:28:15 +00:00
< h3 >
2021-07-24 08:21:09 +00:00
Split
2021-03-22 15:28:15 +00:00
< / h3 >
< p >
2021-07-27 02:04:18 +00:00
You can split panels into multiple columns.
2021-01-29 00:50:03 +00:00
< / p >
2021-07-27 02:04:18 +00:00
< div class = "split" >
< section >
< h3 > Left< / h3 >
< / section >
< section >
< h3 > Right< / h3 >
< / section >
< / div >
< / section >
< section >
< h3 >
Split heights
< / h3 >
2021-07-24 08:21:09 +00:00
< div class = "split" >
2021-07-23 21:24:42 +00:00
< section >
< h3 >
2021-07-27 02:04:18 +00:00
What's happening?
2021-07-23 21:24:42 +00:00
< / h3 >
< p >
2021-07-27 02:04:18 +00:00
Split panels inherit the height of the tallest.
2021-07-23 21:24:42 +00:00
< / p >
< / section >
2021-07-27 02:04:18 +00:00
< aside >
< h3 >
It's time to waste some space.
< / h3 >
< p >
Did you ever hear the tragedy of Darth Plagueis The Wise? I thought not. It’ ’
< / p >
< / aside >
2021-07-23 21:24:42 +00:00
< section >
< h3 >
2021-07-27 02:04:18 +00:00
Split panel types
2021-07-23 21:24:42 +00:00
< / h3 >
2021-07-27 02:04:18 +00:00
< p >
As you have just seen, splits can include panels of different types.
< / p >
2021-07-23 21:24:42 +00:00
< / section >
< / div >
2021-07-27 02:04:18 +00:00
< / section >
< section >
< h3 >
Wrapping
< / h3 >
2021-07-24 08:21:09 +00:00
< p >
2021-07-27 02:04:18 +00:00
Splits will automatically wrap if one of their contents won't fit on the screen.
< / p >
< div class = "split" >
< section >
< h3 > First< / h3 >
< / section >
< section >
< h3 > Second< / h3 >
< / section >
< section >
< h3 > Third< / h3 >
< / section >
< section >
< h3 > Fourth< / h3 >
< / section >
< section >
< h3 > Fifth< / h3 >
< / section >
< section >
< h3 > Sixth< / h3 >
< / section >
< section >
< h3 > Seventh< / h3 >
< / section >
< section >
< h3 > Eigth< / h3 >
< / section >
< section >
< h3 > Ninth< / h3 >
< / section >
< section >
< h3 > Tenth< / h3 >
< / section >
< section >
< h3 > Eleventh< / h3 >
< / section >
< section >
< h3 > Twelfth< / h3 >
< / section >
< section >
< h3 > Thirtheenth< / h3 >
< / section >
< / div >
< / section >
< section >
< h3 >
Force-wrapping
< / h3 >
< p >
You can manually force a split to wrap, fixing the vertical gap between the panels.
2021-07-24 08:21:09 +00:00
< / p >
< div class = "split" >
< section >
< h3 > First< / h3 >
< / section >
< section >
< h3 > Second< / h3 >
< / section >
< section >
< h3 > Third< / h3 >
< / section >
< section >
< h3 > Fourth< / h3 >
< / section >
< div class = "split-forcewrap" > < / div >
< section >
< h3 > Fifth< / h3 >
< / section >
< section >
< h3 > Sixth< / h3 >
< / section >
< section >
< h3 > Seventh< / h3 >
< / section >
< div class = "split-forcewrap" > < / div >
< section >
< h3 > Eigth< / h3 >
< / section >
< section >
< h3 > Ninth< / h3 >
< / section >
< div class = "split-forcewrap" > < / div >
< section >
< h3 > Tenth< / h3 >
< / section >
< / div >
2021-01-29 00:50:03 +00:00
< / section >
2021-07-27 02:04:18 +00:00
< h2 >
Separators
< / h2 >
2021-03-20 03:10:00 +00:00
< section >
2021-01-29 00:50:03 +00:00
< h3 >
2021-07-27 02:04:18 +00:00
Separator
2021-01-29 00:50:03 +00:00
< / h3 >
< p >
2021-07-27 02:04:18 +00:00
Bluelib provides separators, horizontal lines that can be used to separate elements.
2021-01-29 00:50:03 +00:00
< / p >
2021-07-23 21:24:42 +00:00
< hr >
2021-07-17 01:23:58 +00:00
< p >
2021-07-27 02:04:18 +00:00
That was one of them.
2021-07-17 01:23:58 +00:00
< / p >
< / section >
2021-07-27 02:04:18 +00:00
< div class = "split" >
< section >
< h3 >
Light separator
< / h3 >
< p >
A lighter separator is available, if the regular color is too much distracting.
< / p >
< hr class = "separator-light" >
< p >
That was one of them.
< / p >
< / section >
< section >
< h3 >
Heavy separator
< / h3 >
< p >
A heavier separator is available, if the regular color isn't apparent enough.
< / p >
< hr class = "separator-heavy" >
< p >
That was one of them.
< / p >
< / section >
< / div >
2021-07-23 21:24:42 +00:00
< h2 >
Formatting
< / h2 >
2021-07-24 08:21:09 +00:00
< div class = "split" >
2021-07-23 21:24:42 +00:00
< section >
< h3 >
Colors
< / h3 >
< p >
You can use colored text:
< / p >
< ul >
< li > < span class = "color-red" > Red< / span > < / li >
< li > < span class = "color-orange" > Orange< / span > < / li >
< li > < span class = "color-yellow" > Yellow< / span > < / li >
< li > < span class = "color-lime" > Lime< / span > < / li >
< li > < span class = "color-cyan" > Cyan< / span > < / li >
< li > < span class = "color-blue" > Blue< / span > < / li >
< li > < span class = "color-magenta" > Magenta< / span > < / li >
< li > < span class = "color-gray" > Gray< / span > < / li >
< / ul >
< / section >
< section >
< h3 >
Size
< / h3 >
< p >
You can set the text size:
< / p >
< ul >
< li > < span class = "size-xxl" > XXL< / span > < / li >
< li > < span class = "size-xl" > XL< / span > < / li >
< li > < span class = "size-l" > L< / span > < / li >
< li > < span class = "size-m" > M< / span > < / li >
< li > < span class = "size-s" > S< / span > < / li >
< li > < span class = "size-xs" > XS< / span > < / li >
< li > < span class = "size-xxs" > XXS< / span > < / li >
< / ul >
< / section >
< section >
< h3 >
Alignment
< / h3 >
< p >
You can set the text alignment (< i > only in block elements< / i > such as div):
< / p >
< div class = "align-left" > Left< / div >
< div class = "align-center" > Center< / div >
< div class = "align-right" > Right< / div >
< / section >
< section >
< h3 >
Style
< / h3 >
< p >
You can use all the usual text styles:
< / p >
< ul >
< li > Regular< / li >
< li > < b > Bold< / b > < / li >
< li > < i > Italic< / i > < / li >
< li > < u > Underlined< / u > < / li >
< li > < s > Struck< / s > < / li >
< li > < code > Code< / code > < / li >
< li > < b > < i > < u > < s > < code > All of them together< / code > < / s > < / u > < / i > < / b > < / li >
< / ul >
< / section >
< / div >
< h2 >
Elements
< / h2 >
2021-07-24 08:21:09 +00:00
< div class = "split" >
2021-07-23 21:24:42 +00:00
< section >
< h3 >
Buttons
< / h3 >
< p >
Bluelib supports buttons:
< / p >
< p >
< button >
Hi, I'm a inline default button!
< / button >
or
< input class = "color-lime" type = "submit" value = "Hi, I'm a lime submit button!" / >
< / p >
< p >
< button class = "button-fill-width color-orange" >
I'm stretched horizontally!
< / button >
< / p >
< p >
< button disabled class = "button-fill-width" >
Can't click on this!
< / button >
< / p >
< / section >
< section >
< h3 >
Toggle buttons
< / h3 >
< p >
Bluelib supports buttons that can be toggled on and off:
< / p >
< p >
< button class = "button-toggle button-toggle-off" >
Toggled off
< / button >
< button class = "button-toggle button-toggle-on" >
Toggled on
< / button >
< / p >
< p >
< button class = "button-toggle button-toggle-off color-red" >
Colored off
< / button >
< button class = "button-toggle button-toggle-on color-lime" >
Colored on
< / button >
< / p >
< p >
< button disabled class = "button-toggle button-toggle-off" >
Disabled off
< / button >
< button disabled class = "button-toggle button-toggle-on" >
Disabled on
< / button >
< / p >
< / section >
< / div >
< h2 >
Coloring panels
< / h2 >
2021-07-24 08:21:09 +00:00
< div class = "split" >
2021-07-23 21:24:42 +00:00
< section class = "color-red" >
< h3 >
Panels can be recolored!
< / h3 >
< p >
Elements contained inside will be recolored accordingly.
< / p >
< / section >
< blockquote class = "color-lime" >
< h3 >
It works on all types of panels!
< / h3 >
< p >
This blockquote should be green!
< / p >
< hr / >
< p >
And so should be the separator above.
< / p >
< / blockquote >
< aside class = "color-blue" >
< h3 >
Smol blue aside
< / h3 >
< p >
The buttons below should be automatically colored blue.
< / p >
< button >
Blue button
< / button >
< button class = "button-toggle button-toggle-off" >
Blue toggle off
< / button >
< button class = "button-toggle button-toggle-on" >
Blue toggle on
< / button >
< / aside >
< / div >
< h2 >
Interactivity
< / h2 >
2021-07-24 08:21:09 +00:00
< div class = "split" >
2021-07-23 21:24:42 +00:00
< section >
< h3 >
Tooltips
< / h3 >
< p >
Text < abbr title = "Hello world!" > with a tooltip< / abbr > is underlined and has a "help" cursor if
hovered.
< / p >
< / section >
< section >
< h3 >
Disabled
< / h3 >
< p >
Elements can be < span class = "status-disabled" > disabled< / span > to reduce their opacity and display a
"not allowed" cursor if hovered.
< / p >
< p >
It also works with < a disabled class = "status-disabled" > links< / a > !
< / p >
< section class = "status-disabled" >
And panels!
< / section >
< / section >
< / div >
< h2 >
Forms
< / h2 >
2021-07-24 08:21:09 +00:00
< div class = "split" >
2021-07-23 21:24:42 +00:00
< section >
< h3 >
Inputs
< / h3 >
< p >
Bluelib allows for the easy creation of forms:
< / p >
< form >
< label for = "input-text" > Text< / label >
< input id = "input-text" type = "text" placeholder = "Text" / >
< label for = "input-password" > Password< / label >
< input id = "input-password" type = "password" placeholder = "Password" required / >
< label for = "input-email" > Email< / label >
< input id = "input-email" type = "email" placeholder = "Email" / >
< label for = "input-disabled" > Disabled< / label >
< input id = "input-disabled" type = "text" placeholder = "Disabled" disabled / >
< label for = "input-select" > Select< / label >
< select id = "input-select" >
< option > A< / option >
< option > B< / option >
< option > C< / option >
< optgroup label = "D" >
< option > D.1< / option >
< option > D.2< / option >
< option > D.3< / option >
< / optgroup >
< / select >
< label for = "input-multiple" > Multiple< / label >
< select id = "input-multiple" multiple >
< option > A< / option >
< option > B< / option >
< option > C< / option >
< optgroup label = "D" >
< option > D.1< / option >
< option > D.2< / option >
< option > D.3< / option >
< / optgroup >
< / select >
< div class = "form-buttons" >
< input id = "input-submit" type = "submit" value = "Submit" / >
< / div >
< / form >
< / section >
< / div >
< / main >
< nav class = "layout-threecol-left" >
I'm wrong.
< / nav >
< nav class = "layout-threecol-right" >
I'm right :)
< / nav >
< / div >
2021-01-09 01:35:03 +00:00
< / body >
< / html >
