2021-01-09 01:35:03 +00:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
2021-07-31 01:32:01 +00:00
< link rel = "stylesheet" href = "src/targets/skeleton.root.css" >
< link rel = "stylesheet" href = "src/targets/paper.root.css" >
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-27 13:04:30 +00:00
< h2 >
Images
< / h2 >
< section >
< h3 >
Default images
< / h3 >
< p >
Bluelib centers and automatically resizes images to fit the panel they are contained in.
< / p >
< img src = "https://i.imgur.com/tpC5y1N.png" alt = "Uno reverse card reverses water" / >
< / section >
< section >
< h3 >
Limited images
< / h3 >
< p >
Images can be "limited", so that they never occupy too much screen real estate, especially if they're very tall.
< / p >
2021-07-27 13:09:37 +00:00
< div class = "split" >
< section >
< h3 >
Half
< / h3 >
< p >
The following image has a limit of half the vertical viewport:
< / p >
< img class = "image-limit-half" src = "https://i.redd.it/0b2r669b73f41.jpg" alt = "USB key in a bottle" / >
< / section >
< section >
< h3 >
Quarter
< / h3 >
< p >
The following image has a limit of a quarter of the vertical viewport:
< / p >
< img class = "image-limit-quarter" src = "https://i.redd.it/0b2r669b73f41.jpg" alt = "USB key in a bottle" / >
< / section >
< / div >
2021-07-27 13:04:30 +00:00
< / section >
2021-07-28 16:57:31 +00:00
< h2 >
Status
< / h2 >
< section >
< h3 >
2021-07-28 22:07:48 +00:00
Status
2021-07-28 16:57:31 +00:00
< / h3 >
< p >
2021-07-28 22:07:48 +00:00
Status are classes that can be applied to elements to mark some special interaction property.
2021-07-28 16:57:31 +00:00
< / p >
< div class = "split" >
< section class = "status-disabled" >
< h3 >
Disabled
< / h3 >
< p >
Disabled elements appear transparent, non-interactable and display a < code > not-allowed< / code > cursor if hovered.
< / p >
< / section >
< / div >
< / section >
2021-07-28 22:07:48 +00:00
< h2 >
Forms
< / h2 >
< div class = "split" >
< section >
< h3 >
Inputs
< / h3 >
< form >
< label for = "input-text" > Text< / label >
< input id = "input-text" type = "text" placeholder = "All fields have a customizable placeholder" required / >
< label for = "input-password" > Password< / label >
< input id = "input-password" type = "password" placeholder = "Field type determines how input is displayed" required / >
< label for = "input-phone" > Phone< / label >
< input id = "input-phone" type = "tel" placeholder = "Optional fields have italic text" / >
2021-07-29 18:58:28 +00:00
< label for = "input-fax" > Fax< / label >
< input id = "input-fax" type = "text" placeholder = "Disabled fields have a dashed underline" disabled required / >
< label for = "input-size" > Shirt size< / label >
< select id = "input-size" required >
2021-07-28 22:29:57 +00:00
< optgroup label = "Smaller" >
< option > XXS< / option >
< option > XS< / option >
< option > S< / option >
< / optgroup >
< option > M< / option >
< optgroup label = "Larger" >
< option > L< / option >
< option > XL< / option >
< option > XXL< / option >
2021-07-28 22:07:48 +00:00
< / optgroup >
< / select >
2021-07-29 18:58:28 +00:00
< label for = "input-colors" > Colors< / label >
< select id = "input-colors" multiple required >
2021-07-28 22:29:57 +00:00
< option > Red< / option >
< option > Yellow< / option >
< option > Green< / option >
< optgroup label = "Blues" >
< option > Blue< / option >
< option > Purple< / option >
< option > Cyan< / option >
2021-07-28 22:07:48 +00:00
< / optgroup >
< / select >
2021-07-28 22:29:57 +00:00
< div class = "form-row" >
2021-07-29 18:58:28 +00:00
< input id = "input-reset-1" type = "reset" value = "Reset" / >
< input id = "input-submit-1" type = "submit" value = "Submit" / >
< / div >
< / form >
< / section >
< section >
< h3 >
Groups
< / h3 >
< p >
Form inputs can be grouped together.
< / p >
< form >
< label for = "input-mood" > Mood< / label >
< div id = "input-mood" class = "form-group" >
< label >
< input type = "radio" name = "input-mood" value = "happy" / >
Happy
< / label >
< label >
< input type = "radio" name = "input-mood" value = "sad" / >
Sad
< / label >
< label >
< input type = "radio" name = "input-mood" value = "angry" / >
Angry
< / label >
< / div >
< / form >
< p >
They automatically wrap if the inputs don't fit on a single line.
< / p >
< form >
< label for = "input-pets" > Pets< / label >
< div id = "input-pets" class = "form-group" >
< label >
< input type = "checkbox" name = "input-pets" value = "cats" / >
Cats
< / label >
< label >
< input type = "checkbox" name = "input-pets" value = "dogs" / >
Dogs
< / label >
< label >
< input type = "checkbox" name = "input-pets" value = "sneks" / >
Sneks
< / label >
< label >
< input type = "checkbox" name = "input-pets" value = "bunnies" / >
Bunnies
< / label >
< label >
< input type = "checkbox" name = "input-pets" value = "frogs" / >
Frogs
< / label >
< label >
< input type = "checkbox" name = "input-pets" value = "ants" / >
Ants
< / label >
< label >
< input type = "checkbox" name = "input-pets" value = "parrots" / >
Parrots
< / label >
< / div >
< / form >
< p >
Labels can be made to fill the whole line, forcing a wrap.
< / p >
< form >
< label for = "input-roman" > Fav. roman numeral< / label >
< div id = "input-roman" class = "form-group" >
< label class = "form-group-row" >
< input type = "radio" name = "input-roman" value = "i" required / >
I (1)
< / label >
< label class = "form-group-row" >
< input type = "radio" name = "input-roman" value = "v" required / >
V (5)
< / label >
< label class = "form-group-row" >
< input type = "radio" name = "input-roman" value = "x" required / >
X (10)
< / label >
< label class = "form-group-row" >
< input type = "radio" name = "input-roman" value = "i" required / >
I (1)
< / label >
2021-07-28 22:07:48 +00:00
< / div >
< / form >
< / section >
< / div >
2021-07-23 21:24:42 +00:00
< h2 >
2021-07-31 14:01:37 +00:00
Various elements
2021-07-23 21:24:42 +00:00
< / h2 >
2021-07-24 08:21:09 +00:00
< div class = "split" >
2021-07-23 21:24:42 +00:00
< section >
< h3 >
2021-07-31 14:01:37 +00:00
Headings
2021-07-23 21:24:42 +00:00
< / h3 >
< p >
2021-07-31 14:01:37 +00:00
Bluelib (and HTML) supports up to 6 levels of headings:
2021-07-23 21:24:42 +00:00
< / p >
2021-07-31 14:01:37 +00:00
< section >
< h1 > Level-1< / h1 >
< h2 > Level-2< / h2 >
< h3 > Level-3< / h3 >
< h4 > Level-4< / h4 >
< h5 > Level-5< / h5 >
< h6 > Level-6< / h6 >
< / section >
2021-07-23 21:24:42 +00:00
< p >
2021-07-31 14:01:37 +00:00
Generally, panels look nicer if they start with a level-3 heading, but you may use whichever you want, as Bluelib will automatically handle the margin.
2021-07-23 21:24:42 +00:00
< / p >
< / section >
< / div >
< / main >
< nav class = "layout-threecol-left" >
2021-07-31 14:03:27 +00:00
< section >
I'm wrong. :(
< / section >
2021-07-23 21:24:42 +00:00
< / nav >
< nav class = "layout-threecol-right" >
2021-07-31 14:03:27 +00:00
< section >
I'm right! ;P
< / section >
2021-07-23 21:24:42 +00:00
< / nav >
< / div >
2021-01-09 01:35:03 +00:00
< / body >
< / html >
