2021-01-09 01:35:03 +00:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
2021-08-02 00:41:48 +00:00
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
2022-02-21 03:54:35 +00:00
< link rel = "stylesheet" href = "dist/skeleton.root.css" >
< link rel = "stylesheet" href = "dist/paper.root.css" >
< link rel = "stylesheet" href = "dist/hacker.root.css" >
< link rel = "stylesheet" href = "dist/sophon.root.css" >
< link rel = "stylesheet" href = "dist/amber.root.css" >
2022-02-27 02:34:57 +00:00
< link rel = "stylesheet" href = "dist/royalblue.root.css" >
2022-03-16 18:31:03 +00:00
< link rel = "stylesheet" href = "dist/crown.root.css" >
2021-08-18 17:44:09 +00:00
< title > Bluelib 3< / title >
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 >
< / hgroup >
< div class = "layout layout-threecol" >
< main class = "main layout-threecol-center" >
2021-08-01 00:12:03 +00:00
< article >
< h1 >
2022-02-21 03:00:03 +00:00
Bluelib 3 Example
2021-08-01 00:12:03 +00:00
< / h1 >
< section class = "chapter" >
< h2 >
Panels
< / h2 >
< section class = "panel" id = "panel-panel" >
< h3 >
Panel
< / h3 >
2021-07-23 21:24:42 +00:00
< p >
2021-08-01 00:12:03 +00:00
A < dfn id = "dfn-panel" > panel< / dfn > is a < b > base container< / b > styled with a < b > slight background color< / b > and no borders.
2021-07-23 21:24:42 +00:00
< / p >
< / section >
2021-08-01 00:12:03 +00:00
< section class = "panel panel-box" id = "panel-box" >
2021-07-23 21:24:42 +00:00
< h3 >
2021-08-01 00:12:03 +00:00
Box
2021-07-23 21:24:42 +00:00
< / h3 >
< p >
2021-08-01 00:12:03 +00:00
A < dfn id = "dfn-box" > box< / dfn > panel is a < b > generic container< / b > styled as a < b > box with borders on all four sides< / b > .
2021-07-23 21:24:42 +00:00
< / p >
< / section >
2021-08-01 00:12:03 +00:00
< section class = "panel panel-dialog" id = "panel-dialog" >
2021-07-27 02:04:18 +00:00
< h3 >
2021-08-01 00:12:03 +00:00
Dialog
2021-07-27 02:04:18 +00:00
< / h3 >
< p >
2021-08-01 00:12:03 +00:00
A < dfn id = "dfn-dialog" > dialog< / dfn > panel is a < b > container for quotes or dialogues< / b > , styled as a box with only the left border.
2021-07-27 02:04:18 +00:00
< / p >
2021-08-01 00:12:03 +00:00
< / section >
< section class = "panel panel-parenthesis" id = "panel-parenthesis" >
2021-07-23 21:24:42 +00:00
< h3 >
2021-08-01 00:12:03 +00:00
Parenthesis
2021-07-23 21:24:42 +00:00
< / h3 >
2021-07-27 02:04:18 +00:00
< p >
2021-08-01 00:12:03 +00:00
A < dfn id = "dfn-parenthesis" > parenthesis< / dfn > panel is a < b > container for text tangentially related to the rest of the document< / b > , styled as a box with smaller text and no borders.
2021-07-27 02:04:18 +00:00
< / p >
2021-07-23 21:24:42 +00:00
< / section >
2021-08-01 00:12:03 +00:00
< div class = "chapter-forcewrap" > < / div >
< section class = "panel panel-box" id = "panel-dimensions" >
< h3 >
Dimensions
< / h3 >
< p >
Panels always have a < b > < code > 8px< / code > margin< / b > and < b > < code > 8px< / code > of padding< / b > .
< / p >
< blockquote class = "panel panel-dialog" >
Hi! This is me talking to you, the reader!
< / blockquote >
< blockquote class = "panel panel-dialog" >
I'm testing panel dimensions!
< / blockquote >
< blockquote class = "panel panel-dialog" >
See? The margin between these dialog panels is consistent!
< / blockquote >
2021-07-27 02:04:18 +00:00
< / section >
2021-08-01 00:12:03 +00:00
< section class = "panel panel-box" id = "panel-nesting" >
< h3 >
Nesting
< / h3 >
< p >
Panels of any kind can be < b > infinitely nested< / b > .
< / p >
< section class = "panel" >
< p >
Like this!
< / p >
< section class = "panel" >
< p >
How deep does this rabbit hole go?
< / p >
< section class = "panel" >
< p >
BWOON.
< / p >
< section class = "panel" >
< p >
BWOON.
< / p >
< section class = "panel" >
< p >
BWOON.
< / p >
< section class = "panel" >
< em >
< a href = "https://www.youtube.com/watch?v=G2jUhnCU9iA" target = "_blank" >
PANELCEPTION.
< / a >
< / em >
< / section >
< / section >
< / section >
< / section >
< / section >
< / section >
2021-07-27 02:04:18 +00:00
< / section >
2021-08-01 00:12:03 +00:00
< / section >
< section class = "chapter" id = "chapter-chapters" >
< h2 >
Chapters
< / h2 >
< section class = "panel panel-box" id = "panel-chapter" >
< h3 >
Chapter
< / h3 >
< p >
A < dfn id = "dfn-chapter" > chapter< / dfn > is a grouping of an heading and multiple panels containing tightly related information.
< / p >
< blockquote class = "panel panel-dialog" >
You're seeing one right now!
< / blockquote >
2021-07-24 08:21:09 +00:00
< / section >
2021-08-01 00:12:03 +00:00
< section class = "panel panel-box" id = "panel-panelheights" >
< h3 >
Panel heights
< / h3 >
< p >
In a chapter, all panels on a row < b > inherit the height of the tallest panel in it< / b > , so that no empty space is left.
< / p >
2021-07-24 08:21:09 +00:00
< / section >
2021-08-01 00:12:03 +00:00
< section class = "panel panel-box" id = "panel-autowrap" >
< h3 >
Auto-wrapping
< / h3 >
< p >
Additionaly, panels in a chapter will < b > automatically wrap< / b > if their contents won't fit horizontally.
< / p >
2021-07-24 08:21:09 +00:00
< / section >
2021-08-01 00:12:03 +00:00
< div class = "chapter-forcewrap" > < / div >
< section class = "panel panel-box" id = "panel-forcewrap" >
< h3 >
Force-wrapping
< / h3 >
< p >
You can override the automatic wrapping and manually decide where a chapter should wrap by inserting a < dfn id = "dfn-forcewrap" > force-wrap< / dfn > element where you want the chapter to wrap.
< / p >
< section class = "panel panel-parenthesis" >
Due to technical limitations, panels will have a < b > < code > 16px< / code > vertical margin< / b > when a chapter is force-wrapped.
< / section >
2021-07-24 08:21:09 +00:00
< / section >
2021-08-01 00:12:03 +00:00
< / section >
< section class = "chapter" id = "chapter-separators" >
< h2 >
Separators
< / h2 >
< section class = "panel panel-box" id = "panel-separator" >
< h3 >
Separator
< / h3 >
< p >
A < dfn id = "dfn-separator" > separator< / dfn > is a < b > horizontal line< / b > that fills all the horizontal space available on a panel, forcing a line wrap.
< / p >
< hr >
< blockquote class = "panel panel-dialog" >
Top Text
< / blockquote >
2021-07-24 08:21:09 +00:00
< / section >
2021-08-01 00:12:03 +00:00
< div class = "chapter-forcewrap" > < / div >
< section class = "panel panel-box" id = "panel-separator-light" >
< h3 >
Light separator
< / h3 >
< p >
A < dfn id = "dfn-separator-light" > light separator< / dfn > is a < b > slightly more transparent separator< / b > , to be used if the regular color distracts too much from the flow of the text.
< / p >
< hr class = "separator-light" >
< blockquote class = "panel panel-dialog" >
Bottom Text
< / blockquote >
2021-07-24 08:21:09 +00:00
< / section >
2021-08-01 00:12:03 +00:00
< section class = "panel panel-box" id = "panel-separator-heavy" >
< h3 >
Heavy separator
< / h3 >
< p >
A < dfn id = "dfn-separator-heavy" > heavy separator< / dfn > is a < b > non-transparent separator< / b > , to be used if the regular color isn't apparent enough.
< / p >
< hr class = "separator-heavy" >
< blockquote class = "panel panel-dialog" >
Bottom Text 2: Electric Boogaloo
< / blockquote >
2021-07-24 08:21:09 +00:00
< / section >
2021-08-01 00:12:03 +00:00
< / section >
< section class = "chapter" id = "chapter-images" >
< h2 >
Images
< / h2 >
< section class = "panel panel-box" id = "panel-images-default" >
< h3 >
Default
< / h3 >
< p >
Images are < b > automatically centered and resized to fit< / b > the panel they are in.
< / p >
2022-03-16 15:29:35 +00:00
< img src = "https://images.unsplash.com/photo-1593415553970-bd0145efc369" alt = "Neon Ice Cream" / >
2021-07-24 08:21:09 +00:00
< / section >
2021-08-01 00:12:03 +00:00
< div class = "chapter-forcewrap" > < / div >
< section class = "panel panel-box" id = "panel-limited" >
< h3 >
Limited
< / h3 >
< p >
Images can be < dfn id = "dfn-limited" > limited< / dfn > to < b > prevent them from taking up too much screen space< / b > .
< / p >
< div class = "chapter" >
2021-08-01 00:56:42 +00:00
< section class = "panel panel-box" id = "panel-limited-half" >
2021-08-01 00:12:03 +00:00
< h3 >
Half
< / h3 >
< p >
The following image has a limit of half the vertical viewport:
< / p >
2022-03-16 15:29:35 +00:00
< img class = "image-limit-half" src = "https://images.unsplash.com/photo-1593415553970-bd0145efc369" alt = "Neon ice cream" / >
2021-08-01 00:12:03 +00:00
< / section >
2021-08-01 00:56:42 +00:00
< section class = "panel panel-box" id = "panel-limited-quarter" >
2021-08-01 00:12:03 +00:00
< h3 >
Quarter
< / h3 >
< p >
The following image has a limit of a quarter of the vertical viewport:
< / p >
2022-03-16 15:29:35 +00:00
< img class = "image-limit-quarter" src = "https://images.unsplash.com/photo-1593415553970-bd0145efc369" alt = "Neon ice cream" / >
2021-08-01 00:12:03 +00:00
< / section >
< / div >
2021-07-24 08:21:09 +00:00
< / section >
2022-03-10 02:23:14 +00:00
< div class = "chapter-forcewrap" > < / div >
< section class = "panel panel-box" id = "panel-figure" >
< h3 >
Figures
< / h3 >
< p >
Images can be wrapped in a figure element to semantically provide additional detail to them.
< / p >
< figure >
2022-03-16 15:29:35 +00:00
< img class = "image-limit-quarter" src = "https://images.unsplash.com/photo-1593415553970-bd0145efc369" alt = "Neon ice cream" / >
2022-03-10 02:23:14 +00:00
< figcaption >
2022-03-16 15:29:35 +00:00
Neon ice cream
2022-03-10 02:23:14 +00:00
< / figcaption >
< / figure >
< / section >
2021-08-13 03:03:04 +00:00
< / section >
< section class = "chapter" id = "chapter-tables" >
< h2 >
Tables
< / h2 >
< section class = "panel panel-box" id = "panel-table" >
< h3 >
Table
< / h3 >
< p >
A < dfn id = "dfn-table" > table< / dfn > is an element displaying data aligned and ordered by rows and columns.
< / p >
< table >
< caption class = "table-caption-top" > What do the brothers think of the following elements?< / caption >
< thead >
< tr >
< th > < / th >
< th > Mario< / th >
< th > Luigi< / th >
< / tr >
< / thead >
< tbody >
< tr >
< th scope = "row" > Tables< / th >
< td > They're cool and allow you to do cool stuff< / td >
< td > They need chairs to be useful< / td >
< / tr >
< tr >
< th scope = "row" > Flexboxes< / th >
< td > They're very useful< / td >
< td > Not enough flexible for me< / td >
< / tr >
< tr >
< th scope = "row" > Grids< / th >
< td > I love them< / td >
< td > Bleargh< / td >
< / tr >
< / tbody >
< tfoot >
< tr >
< th scope = "row" > Overall< / th >
< td > < 3< / td >
< td > 0/10< / td >
< / tr >
< / tfoot >
< / table >
< p >
Elements in tables can be marked to increase their contrast with the rest.
< / p >
< table >
< caption class = "table-caption-top" >
A game of tic-tac-toe.
< / caption >
< tbody >
< tr >
< td > O< / td >
< td > < / td >
< td class = "table-mark" > X< / td >
< / tr >
< tr >
< td > X< / td >
< td class = "table-mark" > X< / td >
< td > O< / td >
< / tr >
< tr >
< td class = "table-mark" > X< / td >
< td > O< / td >
< td > < / td >
< / tr >
< / tbody >
< / table >
< p >
Captions can are above the table by default, but they can be moved below the table.
< / p >
< table >
< caption class = "table-caption-bottom" >
HTML elements tier list
< / caption >
< tbody >
< tr >
< th scope = "row" > S< / th >
< td > < code > < span> < / code > < / td >
< / tr >
< tr >
< th scope = "row" > A< / th >
< td > < code > < a> < / code > < / td >
< / tr >
< tr >
< th scope = "row" > B< / th >
< td > < body> < / td >
< / tr >
< tr >
< th scope = "row" > C< / th >
< td > < caption> < / td >
< / tr >
< / tbody >
< / table >
< / section >
2021-08-01 00:12:03 +00:00
< / section >
2021-08-13 20:34:14 +00:00
< section class = "chapter" id = "chapter-lists" >
< h2 >
Lists
< / h2 >
< section class = "panel panel-box" id = "panel-list-unordered" >
< h3 >
Unordered lists
< / h3 >
< p >
An < dfn id = "dfn-list-unordered" > unordered list< / dfn > displays a series of items whose order is irrelevant.
< / p >
< ul >
< li > This< / li >
< li > That< / li >
< li > Wooper< / li >
< li > Quagsire< / li >
< / ul >
< / section >
< section class = "panel panel-box" id = "panel-list-ordered" >
< h3 >
Ordered lists
< / h3 >
< p >
A < dfn id = "dfn-list-ordered" > ordered list< / dfn > displays a series of items whose order is relevant.
< / p >
< ol >
< li > Gold< / li >
< li > Silver< / li >
< li > Bronze< / li >
< li > Iron< / li >
< / ol >
< / section >
< section class = "panel panel-box" id = "panel-list-description" >
< h3 >
Description lists
< / h3 >
< p >
A < dfn id = "dfn-list-description" > description list< / dfn > displays a series of name-description pairs.
< / p >
< dl >
< dt >
Key
< / dt >
< dd >
Value
< / dd >
< dt >
Other key
< / dt >
< dd >
Other value
< / dd >
< / dl >
< / section >
< / section >
2021-08-01 00:12:03 +00:00
< section class = "chapter" id = "chapter-status" >
< h2 >
Status
< / h2 >
< section class = "panel panel-box" id = "panel-disabled" >
< h3 >
Disabled
< / h3 >
< p >
An element can be < dfn id = "dfn-disabled" > disabled< / dfn > to make it < b > partially transparent< / b > , < b > non-interactable< / b > and < b > displaying the < code > not-allowed< / code > cursor< / b > when hovered.
< / p >
< p >
Any element, from a < code > < span> < / code > to a chapter, can be disabled.
< / p >
< section class = "panel panel-dialog status-disabled" >
Please re-enable me, I did nothing wrong! I just said "AMOGU—"
< / section >
2021-07-24 08:21:09 +00:00
< / section >
2021-07-27 02:04:18 +00:00
< / section >
2021-08-01 00:12:03 +00:00
< section class = "chapter" id = "chapter-inputs" >
< h2 >
Inputs
< / h2 >
2021-08-01 00:56:42 +00:00
< section class = "panel panel-box" id = "panel-input" >
2021-08-01 00:12:03 +00:00
< h3 >
Input
< / h3 >
< p >
An < dfn id = "dfn-input" > input< / dfn > is an interactive element that allows the reader of the page to interact with it.
< / p >
< p >
They come in multiple kinds:
< / p >
2021-08-01 00:56:42 +00:00
< section class = "chapter" id = "chapter-input-kinds" >
< section class = "panel panel-box" id = "panel-input-field" >
2021-08-01 00:12:03 +00:00
< h3 >
Field
< / h3 >
< p >
A < dfn id = "dfn-input-field" > field< / dfn > is an input where the user can < b > insert text< / b > with their keyboard.
< / p >
<!-- suppress HtmlFormInputWithoutLabel -->
< input type = "text" placeholder = "This is called a placeholder, by the way." / >
< / section >
2021-08-01 00:56:42 +00:00
< section class = "panel panel-box" id = "panel-input-select" >
2021-08-01 00:12:03 +00:00
< h3 >
Select
< / h3 >
< p >
A < dfn id = "dfn-input-select" > select< / dfn > is an input where the user can select < b > one between multiple options< / b > .
< / p >
<!-- suppress HtmlFormInputWithoutLabel -->
< select >
< option > 1< / option >
< option > 2< / option >
< optgroup label = "3" >
< option > 3.1< / option >
< option > 3.2< / option >
< option > 3.3< / option >
< / optgroup >
< / select >
< / section >
< div class = "chapter-forcewrap" > < / div >
2021-08-01 00:56:42 +00:00
< section class = "panel panel-box" id = "panel-input-area" >
2021-08-01 00:12:03 +00:00
< h3 >
Area
< / h3 >
< p >
A < dfn id = "dfn-input-area" > area< / dfn > is a < b > resizable< / b > input where the user can < b > insert multiple lines of text< / b > with their keyboard.
< / p >
<!-- suppress HtmlFormInputWithoutLabel -->
< textarea placeholder = "Write something here!" > < / textarea >
< / section >
2021-08-01 00:56:42 +00:00
< section class = "panel panel-box" id = "panel-input-multiselect" >
2021-08-01 00:12:03 +00:00
< h3 >
Multiselect
< / h3 >
< p >
A < dfn id = "dfn-input-multiselect" > multiselect< / dfn > is an input where the user can select < b > many options from a list< / b > .
< / p >
<!-- suppress HtmlFormInputWithoutLabel -->
< select multiple >
< option > 1< / option >
< option > 2< / option >
< optgroup label = "3" >
< option > 3.1< / option >
< option > 3.2< / option >
< option > 3.3< / option >
< / optgroup >
< / select >
< / section >
< div class = "chapter-forcewrap" > < / div >
2021-08-01 00:56:42 +00:00
< section class = "panel panel-box" id = "panel-input-radio" >
2021-08-01 00:12:03 +00:00
< h3 >
Radio
< / h3 >
< p >
A < dfn id = "dfn-input-radio" > radio< / dfn > is an input which the user can < b > either select or not< / b > , deselecting the other radios with the same name.
< / p >
< p >
< label >
< input type = "radio" name = "input-radio-example" / > 1
< / label >
< / p >
< p >
< label >
< input type = "radio" name = "input-radio-example" / > 2
< / label >
< / p >
< p >
< label >
< input type = "radio" name = "input-radio-example" / > 3
< / label >
< / p >
< / section >
2021-08-01 00:56:42 +00:00
< section class = "panel panel-box" id = "panel-input-checkbox" >
2021-08-01 00:12:03 +00:00
< h3 >
Checkbox
< / h3 >
< p >
A < dfn id = "dfn-input-checkbox" > checkbox< / dfn > is an input which the user can < b > either select or not< / b > .
< / p >
< p >
< label >
< input type = "checkbox" name = "input-checkbox-example" / > 1
< / label >
< / p >
< p >
< label >
< input type = "checkbox" name = "input-checkbox-example" / > 2
< / label >
< / p >
< p >
< label >
< input type = "checkbox" name = "input-checkbox-example" / > 3
< / label >
< / p >
< / section >
< div class = "chapter-forcewrap" > < / div >
2021-08-01 00:56:42 +00:00
< section class = "panel panel-box" id = "panel-input-button" >
2021-08-01 00:12:03 +00:00
< h3 >
Button
< / h3 >
< p >
A < dfn id = "dfn-input-button" > button< / dfn > is an input which the user can < b > interact with to trigger a reaction< / b > .
< / p >
< p >
< button >
Do nothing
< / button >
< / p >
< / section >
< / section >
< / section >
2021-07-27 02:04:18 +00:00
< / section >
2021-08-01 00:12:03 +00:00
< section class = "chapter" id = "chapter-forms" >
< h2 >
Forms
< / h2 >
2021-08-01 00:56:42 +00:00
< section class = "panel panel-box" id = "chapter-form-labels-inputs" >
2021-07-27 13:09:37 +00:00
< h3 >
2021-08-01 00:12:03 +00:00
Forms, labels and inputs
2021-07-27 13:09:37 +00:00
< / h3 >
< p >
2021-08-01 00:12:03 +00:00
A < dfn id = "dfn-form" > form< / dfn > is a grouping of < dfn id = "dfn-label" > labels< / dfn > and < i > inputs< / i > with the same purpose, with the < b > former describing what should be entered in the latter< / b > .
2021-07-27 13:09:37 +00:00
< / p >
2021-08-01 00:12:03 +00:00
< form >
< label for = "input-username" > Username< / label >
< input id = "input-username" type = "text" placeholder = "Required fields have regular text" required / >
< label for = "input-phone" > Phone< / label >
< input id = "input-phone" type = "tel" placeholder = "Optional fields have italic text" / >
< 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 >
< 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 >
< / optgroup >
< / select >
< label for = "input-colors" > Colors< / label >
< select id = "input-colors" multiple required >
< option > Red< / option >
< option > Yellow< / option >
< option > Green< / option >
< optgroup label = "Blues" >
< option > Blue< / option >
< option > Purple< / option >
< option > Cyan< / option >
< / optgroup >
< / select >
< / form >
2021-07-27 13:09:37 +00:00
< / section >
2021-08-01 00:12:03 +00:00
< div class = "chapter-forcewrap" > < / div >
2021-08-01 00:56:42 +00:00
< section class = "panel panel-box" id = "panel-form-groups" >
2021-07-27 13:09:37 +00:00
< h3 >
2021-08-01 00:12:03 +00:00
Form groups
2021-07-27 13:09:37 +00:00
< / h3 >
< p >
2021-08-01 00:12:03 +00:00
Inputs such as < i > radios< / i > or < i > checkboxes< / i > should be < em > grouped< / em > together when inserted in a form.
< / p >
< form >
< label for = "input-mood" > Current 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 >
Groups < b > automatically wrap< / b > if the inputs don't fit on a single line.
2021-07-27 13:09:37 +00:00
< / p >
2021-08-01 00:12:03 +00:00
< form >
< label for = "input-pets" > Owned 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 >
2021-07-27 13:09:37 +00:00
< / section >
2021-08-01 00:56:42 +00:00
< section class = "panel panel-box" id = "panel-form-groups-row" >
2021-07-28 16:57:31 +00:00
< h3 >
2021-08-01 00:12:03 +00:00
Row groups
2021-07-28 16:57:31 +00:00
< / h3 >
< p >
2021-08-01 00:12:03 +00:00
A < dfn id = "dfn-form-groups-row" > row group< / dfn > is a < b > form group< / b > where the < b > inputs are arranged vertically< / b > instead of horizontally.
2021-07-28 16:57:31 +00:00
< / p >
2021-08-01 00:12:03 +00:00
< 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 / >
L (50)
< / label >
< / div >
< / form >
< / section >
< div class = "chapter-forcewrap" > < / div >
2021-08-01 00:56:42 +00:00
< section class = "panel panel-box" id = "panel-form-row" >
2021-08-01 00:12:03 +00:00
< h3 >
Form rows
< / h3 >
< p >
Forms can also contain < dfn id = "dfn-form-row" > form rows< / dfn > , elements which ignore the form columns and instead < b > take up the whole row< / b > .
< / p >
< form >
< label for = "input-email" > Email< / label >
< input id = "input-email" type = "email" placeholder = "Enter your email here" required / >
< label for = "input-password" > Password< / label >
< input id = "input-password" type = "text" placeholder = "Enter your password here" required / >
< div class = "form-row" >
< blockquote class = "panel panel-parenthesis" >
By logging in, you agree to sell your soul to the devil and to be tracked endlessly by all the corporations in the world.
< / blockquote >
< / div >
< label for = "input-consent" > Consent< / label >
< div id = "input-consent" class = "form-group" >
< label class = "form-group-row" >
< input type = "checkbox" name = "input-consent" value = "accept" / >
I accept the conditions detailed above
< / label >
< / div >
< div class = "form-row" >
< input id = "input-reset-2" type = "reset" value = "Reset" / >
< input id = "input-submit-2" type = "submit" value = "Submit" / >
< / div >
< / form >
2021-07-28 16:57:31 +00:00
< / section >
2021-07-28 22:07:48 +00:00
< / section >
2021-08-01 00:56:42 +00:00
< section class = "chapter" id = "chapter-common-elements" >
2021-08-01 00:12:03 +00:00
< h2 >
Common elements
2021-08-01 00:56:42 +00:00
< / h2 >
< section class = "panel panel-box" id = "panel-headings" >
< h3 >
Headings
< / h3 >
< p >
An < dfn id = "dfn-heading" > heading< / dfn > is the < b > title< / b > of an article, chapter or panel.
< / p >
< section class = "panel panel-box" >
< 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 >
< blockquote class = "panel panel-dialog" >
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.
< / blockquote >
< / section >
< section class = "panel panel-box" id = "panel-anchors" >
2021-08-01 00:12:03 +00:00
< h3 >
Anchors
< / h3 >
< p >
An < dfn id = "dfn-anchor" > anchor< / dfn > is a part of text which can be clicked to move to a different page or part of page.
< / p >
< section class = "panel panel-box" >
This is an < a href = "https://example.org" target = "_blank" > example anchor< / a > .
< / section >
< p >
Visited anchors have a slightly different color.
< / p >
< section class = "panel panel-box" >
Take me to < a href = "https://wikipedia.org" target = "_blank" > Wikipedia< / a > !
< / section >
< p >
Anchors with no destination are colored differently, so that the page author can notice and fix them.
< / p >
< section class = "panel panel-box" >
< a > This link< / a > leads nowhere.
< / section >
< p >
Anchors which start a download or open an external program have also have slightly different color.
< / p >
< section class = "panel panel-box" >
Download <!-- suppress HtmlUnknownTarget -->
2022-02-21 04:37:33 +00:00
< a download href = "magnet:?xt=urn:btih:377852690518c09acdcdd970068a5eaa47dd0a9d&dn=gimp-2.10.24-setup-3.exe&tr=udp%3a%2f%2ftracker.opentrackr.org%3a1337%2fannounce&tr=udp%3a%2f%2ftracker.coppersurfer.tk%3a6969%2fannounce&tr=udp%3a%2f%2ftracker.leechers-paradise.org%3a6969%2fannounce&tr=https%3a%2f%2fashrise.com%3a443%2fphoenix%2fannounce&tr=udp%3a%2f%2ftracker.openbittorrent.com%3a80%2fannounce&ws=https%3a%2f%2fartfiles.org%2fgimp.org%2fpub%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fdownload.gimp.org%2fpub%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fftp.acc.umu.se%2fpub%2fgimp%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fftp.cc.uoc.gr%2fmirrors%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fftp.fau.de%2fgimp%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fftp.gwdg.de%2fpub%2fmisc%2fgrafik%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fftp.icm.edu.pl%2fpub%2fgraphics%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fftp.lysator.liu.se%2fpub%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fftp.snt.utwente.nl%2fpub%2fsoftware%2fgimp%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fgimp.ip-connect.info%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fmirror.jaleco.com%2fgimp%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fmirror.klaus-uwe.me%2fgimp%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fmirror.umd.edu%2fgimp%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fmirrors.dotsrc.org%2fgimp%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fmirrors.syringanetworks.net%2fgimp%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fmirrors.ukfast.co.uk%2fsites%2fgimp.org%2fpub%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fmirrors.xmission.com%2fgimp%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fwww.mirrorservice.org%2fsites%2fftp.gimp.org%2fpub%2fgimp%2fv2.10%2fwindows%2f&ws=https%3a%2f%2fwww.nic.funet.fi%2fpub%2fmirrors%2fftp.gimp.org%2fv2.10%2fwindows%2f" >
2021-07-31 15:50:33 +00:00
GIMP 2.10.24
< / a >
2021-08-01 00:12:03 +00:00
< / section >
< / section >
2021-09-22 14:58:12 +00:00
< section class = "panel panel-box" id = "panel-details" >
< h3 >
Details and summaries
< / h3 >
< p >
A < dfn id = "dfn-detail" > detail< / dfn > is an element which < b > collapses< / b > the elements inside until its < dfn id = "dfn-summary" > summary< / dfn > is clicked.
< / p >
< section class = "panel panel-box" >
< details >
< summary >
There's something inside here...
< / summary >
< section class = "details-content" >
You found a < b > HP Up< / b > ! Maximum HP increased by 25.
< / section >
< / details >
< / section >
< p >
Multiple can be displayed aside each other, and can also be nested.
< / p >
< section class = "panel panel-box" >
< details >
< summary >
There's something else inside...
< / summary >
< section class = "details-content" >
You found < b > Pipis< / b > . It exploded.
< / section >
< / details >
< details >
< summary >
There's another item...
< / summary >
< section class = "details-content" >
You found < b > recursion< / b > !
< / section >
< details class = "details-content" >
< summary >
Recursion
< / summary >
< section class = "details-content" >
No, Winnie, don't eat recursion...
< / section >
< details class = "details-content" >
< summary >
Recursion
< / summary >
< section class = "details-content" >
Please, stop...
< / section >
< details class = "details-content" >
< summary >
Recursion
< / summary >
< section class = "details-content" >
NOOOOOOOOOOOOOOO!
< / section >
< details class = "details-content" >
< summary >
Recursion
< / summary >
< section class = "details-content" >
Stack overflow.
< / section >
< / details >
< / details >
< / details >
< / details >
< / details >
< / section >
< / section >
2021-07-31 15:50:33 +00:00
< / section >
2021-08-01 00:56:42 +00:00
< section class = "chapter" id = "chapter-annotations" >
2021-08-01 00:12:03 +00:00
< h2 >
Annotations
< / h2 >
2021-08-01 00:56:42 +00:00
< section class = "panel panel-box" id = "panel-ruby" >
2021-08-01 00:12:03 +00:00
< h3 >
2021-08-01 00:56:42 +00:00
Ruby text
2021-08-01 00:12:03 +00:00
< / h3 >
< p >
2021-08-01 19:33:23 +00:00
A < dfn id = "dfn-ruby" > ruby< / dfn > is an inline element with annotations above the text.
2021-08-01 00:12:03 +00:00
< / p >
2021-08-01 00:56:42 +00:00
< p style = "font-size: xx-large;" >
2021-08-01 00:12:03 +00:00
< ruby >
Mo < rp > /< / rp > < rt > ˈ < / rt > < rp > /< / rp >
de < rp > /< / rp > < rt > dɪ < / rt > < rp > /< / rp >
na < rp > /< / rp > < rt > nə< / rt > < rp > /< / rp >
< / ruby >
< / p >
2021-08-01 00:56:42 +00:00
< p style = "font-size: xx-large;" >
2021-08-01 00:12:03 +00:00
< ruby >
漢 < rp > (< / rp > < rt > kan< / rt > < rp > )< / rp >
字 < rp > (< / rp > < rt > ji< / rt > < rp > )< / rp >
< / ruby >
< / p >
2021-08-01 00:56:42 +00:00
< p style = "font-size: xx-large;" >
2021-08-01 00:12:03 +00:00
< ruby >
明日 < rp > (< / rp > < rt > ashita< / rt > < rp > )< / rp >
< / ruby >
< / p >
< / section >
2021-08-01 00:56:42 +00:00
< section class = "panel panel-box" id = "panel-todo" >
< h3 >
Todo
< / h3 >
< p >
A < dfn id = "dfn-todo" > todo< / dfn > is a panel marked as incomplete by the page author.
< / p >
< p >
Its colors are palette-independent and derive from the 🚧 Twemoji.
< / p >
< div class = "panel panel todo" >
🚧 Write a description for this element.
< / div >
< div class = "panel panel-box todo" >
🚧 Write a description for this element.
< / div >
< div class = "panel panel-dialog todo" >
🚧 Write a description for this element.
< / div >
< div class = "panel panel-parenthesis todo" >
🚧 Write a description for this element.
< / div >
< / section >
< / section >
2021-08-01 19:33:23 +00:00
< section class = "chapter" id = "chapter-semantics" >
< h2 >
Semantics
< / h2 >
< section class = "panel panel-box" >
< h3 >
Semantics
< / h3 >
< p >
2021-08-01 20:03:02 +00:00
A < dfn id = "dfn-semantic" > semantic< / dfn > is an inline element having a specific meaning defined by the < a href = "https://html.spec.whatwg.org/" > HTML specification< / a > .
2021-08-01 19:33:23 +00:00
< / p >
< p >
Here's the full list of them:
< / p >
2021-08-13 20:34:14 +00:00
< ul class = "list-gap-large" >
2021-08-01 19:33:23 +00:00
< li >
2021-08-13 20:34:14 +00:00
< abbr > Abbreviation< / abbr >
2021-08-01 19:33:23 +00:00
< / li >
< li >
2021-08-13 20:34:14 +00:00
< b > Bring Attention< / b >
2021-08-01 19:33:23 +00:00
< / li >
< li >
2021-08-13 20:34:14 +00:00
< cite > Citation< / cite >
2021-08-01 19:33:23 +00:00
< / li >
< li >
2022-03-10 02:51:31 +00:00
< code > Code with < var > variable< / var > < / code >
2021-08-01 19:33:23 +00:00
< / li >
< li >
2021-08-13 20:34:14 +00:00
< dfn > Definition< / dfn >
2021-08-01 19:33:23 +00:00
< / li >
< li >
2021-08-13 20:34:14 +00:00
< em > Emphasis< / em >
2021-08-01 19:33:23 +00:00
< / li >
< li >
2021-08-13 20:34:14 +00:00
< i > Idiomatic Text< / i >
2021-08-01 19:33:23 +00:00
< / li >
< li >
2021-08-13 20:34:14 +00:00
< mark > Mark Text< / mark >
2021-08-01 19:33:23 +00:00
< / li >
< li >
2021-08-13 20:34:14 +00:00
< q > Inline Quotation< / q >
2021-08-01 19:33:23 +00:00
< / li >
< li >
2021-08-13 20:34:14 +00:00
< s > Strikethrough< / s >
2021-08-01 19:33:23 +00:00
< / li >
< li >
2021-08-13 20:34:14 +00:00
< samp > Sample Output< / samp >
2021-08-01 19:33:23 +00:00
< / li >
< li >
2021-08-13 20:34:14 +00:00
< small > Side Comment< / small >
2021-08-01 19:33:23 +00:00
< / li >
< li >
2021-08-13 20:34:14 +00:00
< strong > Strong Importance< / strong >
2021-08-01 19:33:23 +00:00
< / li >
< li >
2021-08-13 20:34:14 +00:00
< u > Unarticulated Annotation< / u >
2021-08-01 19:33:23 +00:00
< / li >
< li >
2021-08-13 20:34:14 +00:00
< var > Variable< / var >
2021-08-01 19:33:23 +00:00
< / li >
< / ul >
< / section >
2022-03-10 03:26:19 +00:00
< div class = "chapter-forcewrap" > < / div >
< section class = "panel panel-box" >
< h3 >
Keyboard inputs
< / h3 >
< p >
< kbd > Meta< / kbd >
< / p >
< p >
< kbd > < kbd > Ctrl< / kbd > + < kbd > Alt< / kbd > + < kbd > Del< / kbd > < / kbd >
< / p >
< p >
Half A presses: < kbd class = "semantic-kbd-press" > ↓ < kbd > A< / kbd > < / kbd > < kbd class = "semantic-kbd-release" > ↑ < kbd > A< / kbd > < / kbd >
< / p >
< / section >
2022-03-10 02:51:31 +00:00
< section class = "panel panel-box" >
< h3 >
Preformatted and code
< / h3 >
< p >
A < dfn id = "dfn-pre" > preformatted text element< / dfn > displays its content as it is, preserving all spaces, newlines, and indentation.
< / p >
< section class = "panel panel-box" >
< pre > This is regular preformatted text. :)< / pre >
< / section >
< p >
If code is being represented, it should be wrapped inside a code element.
< / p >
< section class = "panel panel-box" >
< pre > < code > This is preformatted code text. :)< / code > < / pre >
< / section >
< / section >
2021-08-01 19:33:23 +00:00
< / section >
2021-08-01 00:56:42 +00:00
< section class = "chapter" id = "chapter-colors" >
< h2 >
Colors
< / h2 >
< section class = "panel panel-box" >
< h3 >
Bluelib color
< / h3 >
< p >
All Bluelib elements get their < dfn id = "dfn-bluelib-color" > Bluelib color< / dfn > dynamically from the < code > --bluelib-color-*< / code > CSS variables, and then use it to < b > paint themselves< / b > .
< / p >
< p >
It is possible to change this color to alter the color of not only text, but panels and other elements as well!
< / p >
< / section >
< div class = "chapter-forcewrap" > < / div >
< section class = "panel panel-box color-red" id = "panel-red" >
< h3 >
Red
< / h3 >
< p >
This is a < b > red< / b > box.
< / p >
< / section >
< section class = "panel panel-box color-orange" id = "panel-orange" >
< h3 >
Orange
< / h3 >
< p >
This is an < b > orange< / b > box.
< / p >
< / section >
< section class = "panel panel-box color-yellow" id = "panel-yellow" >
< h3 >
Yellow
< / h3 >
< p >
This is a < b > yellow< / b > box.
< / p >
< / section >
< section class = "panel panel-box color-lime" id = "panel-lime" >
< h3 >
Lime
< / h3 >
< p >
This is a < b > lime< / b > box.
< / p >
< / section >
< section class = "panel panel-box color-cyan" id = "panel-cyan" >
< h3 >
Cyan
< / h3 >
< p >
This is a < b > cyan< / b > box.
< / p >
< / section >
< section class = "panel panel-box color-blue" id = "panel-blue" >
< h3 >
Blue
< / h3 >
< p >
This is a < b > blue< / b > box.
< / p >
< / section >
< section class = "panel panel-box color-magenta" id = "panel-magenta" >
< h3 >
Magenta
< / h3 >
< p >
This is a < b > magenta< / b > box.
< / p >
< / section >
< section class = "panel panel-box color-gray" id = "panel-gray" >
< h3 >
Gray
< / h3 >
< p >
This is a < b > gray< / b > box.
< / p >
< / section >
< div class = "chapter-forcewrap" > < / div >
< section class = "panel panel-box" id = "panel-white" style = "--bluelib-color-r: 255; --bluelib-color-g: 255; --bluelib-color-b: 255;" >
< h3 >
White
< / h3 >
< p >
This box has a custom color: it is always < b > white< / b > !
< / p >
< / section >
< section class = "panel panel-box" id = "panel-black" style = "--bluelib-color-r: 0; --bluelib-color-g: 0; --bluelib-color-b: 0;" >
< h3 >
Black
< / h3 >
< p >
This box has a custom color: it is always < b > black< / b > !
< / p >
< / section >
2021-07-31 15:50:33 +00:00
< / section >
2021-08-01 00:12:03 +00:00
< / article >
2021-07-23 21:24:42 +00:00
< / main >
< / div >
2021-08-19 01:51:45 +00:00
< footer >
© < a href = "https://steffo.eu" > Stefano Pigozzi< / a > -
< a href = "https://www.gnu.org/licenses/agpl-3.0.en.html" > AGPL 3.0< / a > -
< a href = "https://github.com/Steffo99/bluelib" > GitHub< / a >
< / footer >
2021-01-09 01:35:03 +00:00
< / body >
2021-08-18 17:44:09 +00:00
< / html >
