2022-10-11 09:27:55 +00:00
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
2022-10-15 11:38:18 +00:00
< title > Bluelib< / title >
2022-10-11 09:27:55 +00:00
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
2022-10-15 11:38:18 +00:00
< meta property = "og:title" content = "Bluelib" / >
< meta property = "og:description" content = "A versatile and easy to use CSS stylesheet that supports fast dynamic recoloring via CSS variables." / >
< meta property = "og:type" content = "website" / >
< meta property = "og:url" content = "https://gh.steffo.eu/bluelib/examples/index.html" / >
< meta property = "og:image" content = "../media/opengraph.png" / >
2022-10-11 09:27:55 +00:00
< link rel = "icon" type = "image/x-icon" href = "../favicon.ico" >
2022-10-14 14:31:23 +00:00
< link rel = "stylesheet/less" type = "text/css" href = "../dist/base.root.less" id = "css:base" >
< link rel = "stylesheet/less" type = "text/css" href = "../dist/colors-royalblue.root.less" id = "css:colors" >
< link rel = "stylesheet/less" type = "text/css" href = "../dist/fonts-fira-ghpages.root.less" id = "css:fonts" >
< link rel = "stylesheet/less" type = "text/css" href = "../dist/classic.root.less" id = "css:classic" >
< link rel = "stylesheet/less" type = "text/css" href = "../dist/glass.root.less" id = "css:glass" >
< link rel = "stylesheet/less" type = "text/css" href = "../dist/fun.root.less" id = "css:fun" >
2022-10-15 11:22:46 +00:00
< link rel = "stylesheet" type = "text/css" href = "./index.css" id = "css:thispage" >
2022-10-14 14:31:23 +00:00
< script >
less = {
env: "development",
};
2022-10-14 14:51:06 +00:00
< / script >
2022-10-11 09:27:55 +00:00
< script src = "https://cdn.jsdelivr.net/npm/less" > < / script >
2022-10-14 14:50:47 +00:00
< title > Bluelib< / title >
2022-10-11 09:27:55 +00:00
< / head >
2022-10-14 14:54:02 +00:00
< body id = "body" class = "theme-bluelib" >
2022-10-11 09:27:55 +00:00
< div class = "layout layout-threecol" >
< main >
< article >
< h1 >
2022-10-14 14:50:47 +00:00
Bluelib
2022-10-11 09:27:55 +00:00
< / h1 >
2022-10-14 22:51:30 +00:00
< div class = "chapter-1" id = "chapter-welcome" >
2022-10-15 11:53:42 +00:00
< h2 style = "margin-top: 0;" >
2022-10-14 14:31:23 +00:00
Welcome to Bluelib!
< / h2 >
2022-10-14 22:51:30 +00:00
< section class = "panel box" id = "panel-what-is-bluelib" >
2022-10-14 14:31:23 +00:00
< h3 >
What is Bluelib?
< / h3 >
< p >
< dfn id = "dfn-bluelib" > Bluelib< / dfn > is a modular < i > CSS< / i > library for web pages which aims to provide < b > great customization< / b > and < b > flexibility< / b > while trying to keep < b > HTML as "basic" as possible< / b > .
< / p >
< p >
This page itself acts both as a < b > documentation< / b > of the library and as a < b > live preview< / b > of its capabilities.
< / p >
< p >
If you're on a browser which supports that, you can right click any element of this page and then click < kbd > Inspect Element< / kbd > to see how something is done.
< / p >
2022-10-14 14:34:05 +00:00
< div class = "panel parenthesis float-bottom" >
2022-10-14 14:31:23 +00:00
< p >
2022-10-14 22:51:30 +00:00
This page is also used for development, therefore it uses un-minified sources and imports some development scripts.
2022-10-14 14:31:23 +00:00
< / p >
< p >
2022-10-14 22:51:30 +00:00
Do not try to determine the performance of Bluelib from this page, as the development features are somewhat heavy on the browser!
2022-10-14 14:31:23 +00:00
< / p >
< / div >
< / section >
2022-10-14 22:51:30 +00:00
< / div >
< div class = "chapter-2" >
< section class = "panel box" id = "panel-index" >
< h3 >
Table of contents
< / h3 >
< ol >
< li > < a href = "#chapter-welcome" > Welcome to Bluelib!< / a > < / li >
< li > < a href = "#chapter-targets" > Rulesets, selectorsets, targets< / a > < / li >
< li > < a href = "#chapter-install" > Installation and usage< / a > < / li >
< li > < a href = "#chapter-panels" > Panels< / a > < / li >
< li > < a href = "#chapter-chapters" > Chapters< / a > < / li >
< li > < a href = "#chapter-modifiers" > Modifiers< / a > < / li >
< li > < a href = "#chapter-separators" > Separators< / a > < / li >
< li > < a href = "#chapter-lists" > Lists< / a > < / li >
< li > < a href = "#chapter-glossaries" > Glossaries< / a > < / li >
< li > < a href = "#chapter-text" > Text elements< / a > < / li >
< li > < a href = "#chapter-tables" > Tables< / a > < / li >
< li > < a href = "#chapter-images" > Images< / a > < / li >
< li > < a href = "#chapter-inputs" > Inputs< / a > < / li >
< li > < a href = "#chapter-forms" > Forms< / a > < / li >
< / ol >
< / section >
< section class = "panel box" id = "panel-glossary" >
< h3 >
Glossary
< / h3 >
< ul style = "column-width: 12ex;" >
< li > < a href = "#dfn-abbreviation" > Abbreviation< / a > < / li >
< li > < a href = "#dfn-anchor" > Anchor< / a > < / li >
< li > < a href = "#dfn-annotation" > Annotation, unarticulated< / a > < / li >
< li > < a href = "#dfn-area" > Area< / a > < / li >
< li > < a href = "#dfn-attention" > Bring attention< / a > < / li >
< li > < a href = "#dfn-bluelib" > Bluelib< / a > < / li >
< li > < a href = "#dfn-box" > Box< / a > < / li >
< li > < a href = "#dfn-button" > Button< / a > < / li >
< li > < a href = "#dfn-chapter" > Chapter< / a > < / li >
< li > < a href = "#dfn-checkbox" > Checkbox< / a > < / li >
< li > < a href = "#dfn-citation" > Citation< / a > < / li >
< li > < a href = "#dfn-code" > Code< / a > < / li >
< li > < a href = "#dfn-color" > Color< / a > < / li >
< li > < a href = "#dfn-color-input" > Color input< / a > < / li >
< li > < a href = "#dfn-definition" > Definition< / a > < / li >
< li > < a href = "#dfn-deleted" > Deleted text< / a > < / li >
< li > < a href = "#dfn-details" > Details< / a > < / li >
< li > < a href = "#dfn-dialog" > Dialog< / a > < / li >
< li > < a href = "#dfn-fade" > Fade< / a > < / li >
< li > < a href = "#dfn-field" > Field< / a > < / li >
< li > < a href = "#dfn-file-input" > File input< / a > < / li >
< li > < a href = "#dfn-float" > Float< / a > < / li >
< li > < a href = "#dfn-form" > Form< / a > < / li >
< li > < a href = "#dfn-form-flex" > Flex form< / a > < / li >
< li > < a href = "#dfn-idiomatic" > Idiomatic expressions< / a > < / li >
< li > < a href = "#dfn-input" > Input< / a > < / li >
< li > < a href = "#dfn-inserted" > Inserted text< / a > < / li >
< li > < a href = "#dfn-limited" > Limited images< / a > < / li >
< li > < a href = "#dfn-list-definition" > List, definition< / a > < / li >
< li > < a href = "#dfn-list-ordered" > List, ordered< / a > < / li >
< li > < a href = "#dfn-list-unordered" > List, unordered< / a > < / li >
< li > < a href = "#dfn-mark" > Mark< / a > < / li >
< li > < a href = "#dfn-multiselect" > Multiselect< / a > < / li >
< li > < a href = "#dfn-panel" > Panel< / a > < / li >
< li > < a href = "#dfn-parenthesis" > Parenthesis< / a > < / li >
< li > < a href = "#dfn-preformatted" > Preformatted text< / a > < / li >
< li > < a href = "#dfn-quote" > Quote< / a > < / li >
< li > < a href = "#dfn-radio" > Radio< / a > < / li >
< li > < a href = "#dfn-range" > Range< / a > < / li >
< li > < a href = "#dfn-ruby" > Ruby< / a > < / li >
< li > < a href = "#dfn-ruleset" > Ruleset< / a > < / li >
< li > < a href = "#dfn-sample-input" > Sample, input< / a > < / li >
< li > < a href = "#dfn-sample-output" > Sample, output< / a > < / li >
< li > < a href = "#dfn-select" > Select< / a > < / li >
< li > < a href = "#dfn-selectorset" > Selectorset< / a > < / li >
< li > < a href = "#dfn-separator" > Separator< / a > < / li >
< li > < a href = "#dfn-separator-heavy" > Separator, heavy< / a > < / li >
< li > < a href = "#dfn-separator-light" > Separator, light< / a > < / li >
< li > < a href = "#dfn-small" > Small comment< / a > < / li >
< li > < a href = "#dfn-strike" > Strike< / a > < / li >
< li > < a href = "#dfn-strong" > Strong importance< / a > < / li >
< li > < a href = "#dfn-table" > Table< / a > < / li >
< li > < a href = "#dfn-tablepanel" > Table panel< / a > < / li >
< li > < a href = "#dfn-target" > Target< / a > < / li >
< li > < a href = "#dfn-todo" > Todo< / a > < / li >
< li > < a href = "#dfn-variable" > Variable< / a > < / li >
< / ul >
< / section >
< / div >
< div class = "chapter-3" id = "chapter-targets" >
< h2 >
Rulesets, selectorsets, targets
< / h2 >
< section class = "panel box" id = "panel-targets" >
2022-10-14 14:31:23 +00:00
< h3 >
2022-10-14 22:51:30 +00:00
Targets
2022-10-14 14:31:23 +00:00
< / h3 >
< p >
2022-10-14 22:51:30 +00:00
A Bluelib < dfn id = "dfn-target" > target< / dfn > is a CSS document where CSS rulesets of a certain type are grouped together.
< / p >
< p >
It is composed by two parts: the < dfn id = "dfn-ruleset" > ruleset< / dfn > , determining the CSS rules to use, and the < dfn id = "dfn-selectorset" > selectorset< / dfn > , determining the elements to apply the CSS rules on.
< / p >
< hr / >
< p >
< i > Targets< / i > always have a predictable name, which is:
< / p >
< div class = "panel" >
< p >
< code > dist/< var > RULESET< / var > .< var > SELECTORSET< / var > .css< / code >
< / p >
< / div >
< p >
Be sure to choose the ones matching your needs!
< / p >
< hr / >
< p >
By running < code > dist/_build.sh< / code > , new targets are generated and compiled from < a href = "https://lesscss.org/" > Less< / a > to CSS.
< / p >
< p >
The < a href = "https://en.wikipedia.org/wiki/Cartesian_product" > cartesian product< / a > is applied between all < i > rulesets< / i > in < code > src/rulesets< / code > and all < i > selectorsets< / i > in < code > src/selectorsets< / code > , compiling a new target for each pair.
2022-10-14 14:31:23 +00:00
< / p >
2022-10-14 22:51:30 +00:00
< / section >
2022-10-15 14:09:44 +00:00
< section class = "panel box" id = "panel-rulesets todo" >
2022-10-14 22:51:30 +00:00
< h3 >
Available rulesets
< / h3 >
< dl >
2022-10-14 23:08:57 +00:00
< dt > < label class = "fade" > < input type = "checkbox" disabled checked name = "ruleset-base" > Base< / label > < / dt >
2022-10-14 22:51:30 +00:00
< dd >
The base < i > ruleset< / i > , providing the layout and basic high contrast theming.
< / dd >
2022-10-14 23:08:57 +00:00
< dt > < label class = "fade" > < input type = "checkbox" disabled checked name = "ruleset-classic" > Classic< / label > < / dt >
2022-10-14 22:51:30 +00:00
< dd >
Inspired by the older Bluelib versions, with semi-transparent panels and rounded borders.
< / dd >
2022-10-14 23:08:57 +00:00
< dt > < label class = "fade" > < input type = "checkbox" disabled checked name = "ruleset-glass" > Glass< / label > < / dt >
2022-10-14 22:51:30 +00:00
< dd >
Made to celebrate the addition of < code > backdrop-filter< / code > to Firefox, makes panels have a < q > stained glass< / q > background.
< / dd >
2022-10-14 23:08:57 +00:00
< dt > < label class = "fade" > < input type = "checkbox" disabled checked name = "ruleset-fun" > Fun< / label > < / dt >
2022-10-14 22:51:30 +00:00
< dd >
Experimental < i > ruleset< / i > with bizzare or buggy but fun rules. Unsupported, do not use in production!
< / dd >
< dt > Colors< / dt >
< dd >
< dl >
2022-10-14 23:08:57 +00:00
< dt > < label class = "fade" > < input type = "radio" disabled checked name = "ruleset-colors" > Royal Blue< / label > < / dt >
2022-10-14 22:51:30 +00:00
< dd >
< a href = "https://github.com/Steffo99" > Steffo< / a > 's signature color theme, based upon RYG⁵'s logo colors.
< / dd >
2022-10-14 23:08:57 +00:00
< dt > < label class = "fade" > < input type = "radio" disabled name = "ruleset-colors" > Gestione Amber< / label > < / dt >
2022-10-14 22:51:30 +00:00
< dd >
< a href = "https://github.com/Nemesis-FT" > Nemesis< / a > ' own color theme, with a "coffee-like" look.
< / dd >
< / dl >
< / dd >
< dt > Fonts< / dt >
< dd >
< dl >
2022-10-14 23:08:57 +00:00
< dt > < label class = "fade" > < input type = "radio" disabled checked name = " ruleset-fonts " > Fira< / label > < / dt >
2022-10-14 22:51:30 +00:00
< dd >
Font theme based upon Mozilla's < a href = "https://github.com/mozilla/Fira" > Fira< / a > font.
< / dd >
< / dl >
< / dd >
< / dl >
< / section >
< section class = "panel box" id = "panel-selectorsets" >
< h3 >
Available selectorsets
< / h3 >
< dl >
2022-10-14 23:08:57 +00:00
< dt > < label class = "fade" > < input type = "radio" disabled checked name = "selectorset" > Root< / label > < / dt >
2022-10-14 22:51:30 +00:00
< dd >
Simple selectors for usage in plain HTML pages, with short and human-friendly class names.
< / dd >
2022-10-14 23:08:57 +00:00
< dt > < label class = "fade" > < input type = "radio" disabled name = "selectorset" > Module< / label > < / dt >
2022-10-14 22:51:30 +00:00
< dd >
All selectors use class names, allowing the usage of the target with < a href = "https://github.com/css-modules/css-modules" > CSS Modules< / a > . Useful for React or similar web app projects.
< / dd >
< / dl >
2022-10-14 14:31:23 +00:00
< / section >
< / div >
2022-10-14 22:51:30 +00:00
< div class = "chapter-3" id = "chapter-install" >
< h2 >
Installation and usage
< / h2 >
< section class = "panel box" id = "panel-unpkg" >
< h3 >
Via UNPKG
< / h3 >
< p >
The easiest way to use Bluelib on your website is by using < a href = "https://unpkg.com/" > UNPKG< / a > .
< / p >
< p >
Simply link the stylesheets in the header of your project like this:
< / p >
< div class = "panel" >
< code > < link rel=" stylesheet" href=" https://unpkg.com/@steffo/bluelib@< var > VERSION< / var > /dist/< var > RULESET< / var > .< var > SELECTORSET< / var > .css" type=" text/css" /> < / code >
< / div >
< / section >
< section class = "panel box todo" id = "panel-installtbd" >
< h3 >
Coming soon
< / h3 >
< p >
More installation methods coming soon!
< / p >
< / section >
< / div >
< div class = "chapter-4" id = "chapter-panels" >
2022-10-11 09:27:55 +00:00
< h2 >
Panels
< / h2 >
2022-10-14 12:51:13 +00:00
< section class = "panel box" id = "panel-panel" >
2022-10-11 09:27:55 +00:00
< h3 >
Panel
< / h3 >
< p >
A < dfn id = "dfn-panel" > Panel< / dfn > is a < b > container< / b > styled with a < b > slight background color< / b > and no borders.
< / p >
< div class = "panel float-bottom" >
Hello world! I am a Panel!
< / div >
< / section >
2022-10-14 12:51:13 +00:00
< section class = "panel box" id = "panel-box" >
2022-10-11 09:27:55 +00:00
< h3 >
Box
< / h3 >
< p >
A < dfn id = "dfn-box" > Box< / dfn > is a < b > container< / b > adding < b > borders of all four sides< / b > to the base appearence of a Panel.
< / p >
2022-10-14 12:51:13 +00:00
< div class = "panel box float-bottom" >
2022-10-11 09:27:55 +00:00
This Box contains a hidden Snake. < span style = "display: none;" > 🐍< / span >
< / div >
< / section >
2022-10-14 12:51:13 +00:00
< section class = "panel box" id = "panel-dialog" >
2022-10-11 09:27:55 +00:00
< h3 >
Dialog
< / h3 >
< p >
A < dfn id = "dfn-dialog" > Dialog< / dfn > is a < b > container< / b > adding a < b > left border< / b > to the base appearence of a Panel.
< / p >
2022-10-14 12:51:13 +00:00
< blockquote class = "panel dialog float-bottom" >
2022-10-11 09:27:55 +00:00
< q > Snake? Snake??? SNAKEEEEEEE!< / q >
< / blockquote >
< / section >
2022-10-14 12:51:13 +00:00
< section class = "panel box" id = "panel-parenthesis" >
2022-10-11 09:27:55 +00:00
< h3 >
Parenthesis
< / h3 >
< p >
A < dfn id = "dfn-parenthesis" > Parenthesis< / dfn > is a < b > container< / b > styled as a Panel and with smaller text.
< / p >
2022-10-14 12:51:13 +00:00
< div class = "panel parenthesis float-bottom" >
2022-10-11 09:27:55 +00:00
I think we lost the Snake...
< / div >
< / section >
2022-10-14 12:51:13 +00:00
< section class = "panel box" id = "panel-when-panel" >
2022-10-11 09:27:55 +00:00
< h3 >
Panel usage
< / h3 >
< p >
When using Bluelib, text should always be either an < b > header< / b > or < b > inside a < i > Panel< / i > < / b > .
< / p >
< p >
Since < i > Panels< / i > often denote "sections" of text, they should usually be < b > < code > < section> < / code > elements< / b > .
< / p >
< p >
When they are only used cosmetically, < b > < code > < div> < / code > elements< / b > should be used instead.
< / p >
< p >
When used to create forms, they may also be < b > < code > < form> < / code > elements< / b > .
< / p >
< / section >
2022-10-14 12:51:13 +00:00
< section class = "panel box" id = "panel-when-box" >
2022-10-11 09:27:55 +00:00
< h3 >
Box usage
< / h3 >
< p >
A < i > Box< / i > creates a visible < b > separation< / b > between the < b > content inside it< / b > and the < b > content outside it< / b > , and should be used when this separation is desired, like when < b > describing a topic< / b > (like here).
< / p >
< p >
To achieve the best visual style, < i > Boxes< / i > should always be the outmost panels: you should < b > < em > never< / em > place a < i > Box< / i > inside a Panel or a Dialog< / b > , but you can place one inside another < i > Box< / i > .
< / p >
< / section >
2022-10-14 12:51:13 +00:00
< section class = "panel box" id = "panel-when-dialog" >
2022-10-11 09:27:55 +00:00
< h3 >
Dialog usage
< / h3 >
< p >
A < i > Dialog< / i > creates a visible < b > indentation< / b > of the < b > content inside it< / b > , and should be used when this indentation is desired, like in < b > quotes< / b > or < b > examples< / b > .
< / p >
< p >
When containing a quote, they should use < b > < code > < blockquote> < / code > elements< / b > .
< / p >
< p >
Like Boxes, < i > Dialogs< / i > should < b > < em > never< / em > < / b > be placed < b > into containers with less borders< / b > than them, such as Panels.
< / p >
< / section >
2022-10-14 12:51:13 +00:00
< section class = "panel box" id = "panel-when-parenthesis" >
2022-10-11 09:27:55 +00:00
< h3 >
Parenthesis usage
< / h3 >
< p >
A < i > Parenthesis< / i > < b > removes importance from its contents< / b > , and therefore makes for a great container for notes or additional information about a topic.
< / p >
< p >
Having no borders, they should be considered as Panels when placing them: never add Boxes or Dialogs inside them.
< / p >
< / section >
< / div >
< div class = "chapter-2" >
2022-10-14 12:51:13 +00:00
< section class = "panel box" id = "panel-nesting" >
2022-10-11 09:27:55 +00:00
< h3 >
Nesting
< / h3 >
< p >
As you have seen in the sections before, panels can be < b > nested< / b > many times (until the text becomes undistinguishable)!
< / p >
2022-10-14 12:51:13 +00:00
< div class = "panel parenthesis" >
2022-10-11 09:27:55 +00:00
< p >
Like this!
< / p >
2022-10-14 12:51:13 +00:00
< div class = "panel parenthesis" >
2022-10-11 09:27:55 +00:00
< p >
How deep does this Panel hole go?
< / p >
2022-10-14 12:51:13 +00:00
< div class = "panel parenthesis" >
2022-10-11 09:27:55 +00:00
< p >
BWOON.
< / p >
2022-10-14 12:51:13 +00:00
< div class = "panel parenthesis" >
2022-10-11 09:27:55 +00:00
< p >
BWOON.
< / p >
2022-10-14 12:51:13 +00:00
< div class = "panel parenthesis" >
2022-10-11 09:27:55 +00:00
< p >
BWOON.
< / p >
2022-10-14 12:51:13 +00:00
< div class = "panel parenthesis" >
2022-10-11 09:27:55 +00:00
< em >
< a href = "https://www.youtube.com/watch?v=G2jUhnCU9iA" target = "_blank" >
PANELCEPTION.
< / a >
< / em >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / section >
< / div >
< div class = "chapter-3" id = "chapter-chapters" >
< h2 >
Chapters
< / h2 >
2022-10-14 12:51:13 +00:00
< section class = "panel box" id = "panel-chapter" >
2022-10-11 09:27:55 +00:00
< 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 >
< p >
They split their children into a preset amount of columns: this one, for example, splits panels < b > into two columns< / b > .
< / p >
< p >
The maximum number of columns in a chapter is 9; beyond that, you'll need to write your own chapter code.
< / p >
< / section >
2022-10-14 12:51:13 +00:00
< section class = "panel box" id = "panel-panelheights" >
2022-10-11 09:27:55 +00:00
< 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 >
< / section >
2022-10-14 12:51:13 +00:00
< section class = "panel box" id = "panel-float" >
2022-10-11 09:27:55 +00:00
< h3 >
Element floats
< / h3 >
< p >
A < dfn id = "dfn-float" > float< / dfn > is a utility class to align items in panels without having to write CSS.
< / p >
< p class = "float-bottom" >
For example, if a panel has some empty space, elements can be made to < b > float to the bottom< / b > , which can be useful for example for buttons in sibling panels.
< / p >
< / section >
2022-10-14 12:51:13 +00:00
< section class = "panel box" id = "panel-autowrap" >
2022-10-11 09:27:55 +00:00
< h3 >
Auto-wrapping
< / h3 >
< p >
Panels in a numbered chapter will < b > automatically wrap< / b > if their contents won't fit horizontally.
< / p >
< p >
Wrapped panels' heights ignore the height of panels in other rows.
< / p >
< p class = "float-bottom" >
To have a constant height, one has to be set manually.
< / p >
< / section >
2022-10-14 22:51:30 +00:00
< section class = "panel box" id = "panel-autosizing" >
2022-10-11 09:27:55 +00:00
< h3 >
Auto-sizing
< / h3 >
< p >
Panels in a "zero" chapter will instead < b > automatically resize< / b > to fit everything in a single row.
< / p >
< div class = "chapter-0" >
< div class = "panel" >
1
< / div >
< div class = "panel" >
2
< / div >
< div class = "panel" >
3
< / div >
< div class = "panel" >
4
< / div >
< div class = "panel" >
5
< / div >
< div class = "panel" >
6
< / div >
< div class = "panel" >
7
< / div >
< div class = "panel" >
8
< / div >
< div class = "panel" >
9
< / div >
< div class = "panel" >
10
< / div >
< / div >
< p class = "float-bottom" >
To set a constant width, one has to be set manually.
< / p >
< / section >
< / div >
2022-10-14 22:51:30 +00:00
< div class = "chapter-3" id = "chapter-modifiers" >
2022-10-11 09:27:55 +00:00
< h2 >
Modifiers
< / h2 >
2022-10-14 12:51:13 +00:00
< section class = "panel box" id = "panel-fade" >
2022-10-11 09:27:55 +00:00
< h3 >
Fade
< / h3 >
< p >
The < dfn id = "dfn-fade" > fade< / dfn > modifier < b > reduces the opacity< / b > of the elements it is applied to.
< / p >
2022-10-14 12:51:13 +00:00
< div class = "panel box fade float-bottom" >
2022-10-11 09:27:55 +00:00
< p >
I'm a faded box!
< / p >
2022-10-14 12:51:13 +00:00
< div class = "panel box" >
2022-10-11 09:27:55 +00:00
< p >
I'm faded too!
< / p >
2022-10-14 12:51:13 +00:00
< div class = "panel box fade" >
2022-10-11 09:27:55 +00:00
< p >
But they can be faded < b > more< / b > .
< / p >
< / div >
< / div >
< / div >
< / section >
2022-10-14 22:51:30 +00:00
< section class = "panel box" id = "panel-mark" >
2022-10-11 09:27:55 +00:00
< h3 >
Mark
< / h3 >
< p >
The < dfn id = "dfn-mark" > mark< / dfn > modifier < b > distinguishes< / b > the elements it is applied to from the surrounding ones by applying a < b > strong color contrast< / b > .
< / p >
2022-10-14 12:51:13 +00:00
< div class = "panel box mark float-bottom" >
2022-10-11 09:27:55 +00:00
< p >
Think of it like an < b > highlighter< / b > , but for < mark > anything< / mark > !
< / p >
2022-10-14 12:51:13 +00:00
< div class = "panel box mark" >
2022-10-11 09:27:55 +00:00
< p >
Which can be nested to < mark > negate< / mark > its effect.
< / p >
2022-10-14 12:51:13 +00:00
< div class = "panel box mark" >
2022-10-11 09:27:55 +00:00
< p >
Up to 3 times and < mark > not any more< / mark > .
< / p >
< / div >
< / div >
< / div >
< / section >
2022-10-14 12:51:13 +00:00
< section class = "panel box" id = "panel-todo" >
2022-10-11 09:27:55 +00:00
< h3 >
To do
< / h3 >
< p >
The < dfn id = "dfn-todo" > todo< / dfn > modifier emphasises that the contents of the elements it is applied to are not correct or final.
< / p >
2022-10-14 12:51:13 +00:00
< div class = "panel box todo float-bottom" >
2022-10-11 09:27:55 +00:00
< p >
Like this!
< / p >
2022-10-14 12:51:13 +00:00
< div class = "panel box" >
2022-10-11 09:27:55 +00:00
< p >
As with other modifiers, it is inherited.
< / p >
2022-10-14 12:51:13 +00:00
< div class = "panel box todo" >
2022-10-11 09:27:55 +00:00
< p >
And it does nothing if reapplied.
< / p >
< / div >
< / div >
< / div >
< / section >
2022-10-14 12:51:13 +00:00
< section class = "panel box" id = "panel-colors" >
2022-10-11 09:27:55 +00:00
< h3 >
Color modifiers
< / h3 >
< p >
The < dfn id = "dfn-color" > color< / dfn > modifiers change the colors of the elements they are applied to.
< / p >
< div class = "chapter-6 float-bottom" >
2022-10-14 12:51:13 +00:00
< div class = "panel box red" >
2022-10-11 09:27:55 +00:00
< h4 >
Red
< / h4 >
< p >
* warns angrily!
< / p >
< / div >
2022-10-14 12:51:13 +00:00
< div class = "panel box yellow" >
2022-10-11 09:27:55 +00:00
< h4 >
Yellow
< / h4 >
< p >
* warns.
< / p >
< / div >
2022-10-14 12:51:13 +00:00
< div class = "panel box green" >
2022-10-11 09:27:55 +00:00
< h4 >
Green
< / h4 >
< p >
* is a success!
< / p >
< / div >
2022-10-14 12:51:13 +00:00
< div class = "panel box cyan" >
2022-10-11 09:27:55 +00:00
< h4 >
Cyan
< / h4 >
< p >
* informs...
< / p >
< / div >
2022-10-14 12:51:13 +00:00
< div class = "panel box blue" >
2022-10-11 09:27:55 +00:00
< h4 >
Blue
< / h4 >
< p >
* annotates
< / p >
< / div >
2022-10-14 12:51:13 +00:00
< div class = "panel box magenta" >
2022-10-11 09:27:55 +00:00
< h4 >
Magenta
< / h4 >
< p >
* asks a question?
< / p >
< / div >
< / div >
< / section >
< / div >
< div class = "chapter-3" id = "chapter-separators" >
< h2 >
Separators
< / h2 >
2022-10-14 12:51:13 +00:00
< section class = "panel box" id = "panel-separator" >
2022-10-11 09:27:55 +00:00
< 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 class = "float-bottom" >
2022-10-14 12:51:13 +00:00
< blockquote class = "panel dialog" >
2022-10-11 09:27:55 +00:00
Top Text
< / blockquote >
< / section >
2022-10-14 12:51:13 +00:00
< section class = "panel box" id = "panel-separator-light" >
2022-10-11 09:27:55 +00:00
< h3 >
Light separator
< / h3 >
< p >
A < dfn id = "dfn-separator-light" > light separator< / dfn > is a < b > less eye-catching separator< / b > , to be used if the regular separator distracts too much from the flow of the text.
< / p >
< hr class = "separator-light float-bottom" >
2022-10-14 12:51:13 +00:00
< blockquote class = "panel dialog" >
2022-10-11 09:27:55 +00:00
Bottom Text
< / blockquote >
< / section >
2022-10-14 12:51:13 +00:00
< section class = "panel box" id = "panel-separator-heavy" >
2022-10-11 09:27:55 +00:00
< h3 >
Heavy separator
< / h3 >
< p >
A < dfn id = "dfn-separator-heavy" > heavy separator< / dfn > is a < b > very eye-catching separator< / b > , to be used if the regular separator isn't apparent enough.
< / p >
< hr class = "separator-heavy float-bottom" >
2022-10-14 12:51:13 +00:00
< blockquote class = "panel dialog" >
2022-10-11 09:27:55 +00:00
Bottom Text 2: Electric Boogaloo
< / blockquote >
< / section >
< / div >
< div class = "chapter-2" id = "chapter-lists" >
< h2 >
Lists
< / h2 >
2022-10-14 12:51:13 +00:00
< section class = "panel box" id = "panel-list-ordered" >
2022-10-11 09:27:55 +00:00
< h3 >
Ordered list
< / h3 >
< p >
A < dfn id = "dfn-list-ordered" > ordered list< / dfn > displays a series of items whose order is relevant.
< / p >
< ol >
< li > First< / li >
< li > Second< / li >
< li > Third< / li >
< li > Fourth< / li >
< li > Fifth< / li >
< li > Sixth< / li >
< li > Seventh< / li >
< li > Eight< / li >
< li > Ninth< / li >
< li > Tenth< / li >
< li > Eleventh< / li >
< li > Twelfth< / li >
< / ol >
< / section >
2022-10-14 12:51:13 +00:00
< section class = "panel box" id = "panel-list-unordered" >
2022-10-11 09:27:55 +00:00
< h3 >
Unordered list
< / h3 >
< p >
An < dfn id = "dfn-list-unordered" > unordered list< / dfn > displays a series of items whose order is irrelevant.
< / p >
< ul >
< li > First< / li >
< li > Second< / li >
< li > Third< / li >
< li > Fourth< / li >
< li > Fifth< / li >
< li > Sixth< / li >
< li > Seventh< / li >
< li > Eight< / li >
< li > Ninth< / li >
< li > Tenth< / li >
< li > Eleventh< / li >
< li > Twelfth< / li >
< / ul >
< / section >
< / div >
< div class = "chapter-2" id = "chapter-glossaries" >
< h2 >
Glossaries
< / h2 >
2022-10-14 12:51:13 +00:00
< section class = "panel box" id = "panel-list-definition" >
2022-10-11 09:27:55 +00:00
< h3 >
Definition list
< / h3 >
< p >
A < dfn id = "dfn-list-definition" > definition list< / dfn > displays a series of term-description pairs.
< / p >
< dl >
< dt >
Term
< / dt >
< dd >
Description
< / dd >
< dt >
Other term
< / dt >
< dd >
Other description
< / dd >
< / dl >
< / section >
2022-10-14 12:51:13 +00:00
< section class = "panel box" id = "panel-details" >
2022-10-11 09:27:55 +00:00
< h3 >
Collapsible details
< / h3 >
< p >
A < dfn id = "dfn-details" > details< / dfn > element < b > hides its contents< / b > , displaying only a < dfn id = "dfn-summary" > summary< / dfn > until either the marker or the summary itself < b > is activated< / b > .
< / p >
< details >
< summary > Something< / summary >
< p >
Something else
< / p >
< / details >
< details >
< summary > Something more< / summary >
< p >
Something different
< / p >
< / details >
< / section >
< / div >
< div class = "chapter-1" id = "chapter-text" >
< h2 >
2022-10-14 22:51:30 +00:00
Text elements
2022-10-11 09:27:55 +00:00
< / h2 >
2022-10-14 22:51:30 +00:00
< section class = "panel box" id = "panel-anchor" >
2022-10-11 09:27:55 +00:00
< h3 >
< u > A< / u > nchors
< / h3 >
< p >
An < dfn id = "dfn-anchor" > anchor< / dfn > is an interactable element which can be clicked to < b > go to a different page< / b > , or a < b > different part of the same page< / b > , or to < b > perform an action with a different application< / b > !
< / p >
< div class = "panel" >
< p >
Do you want to < a href = "https://example.org/" > go to example.org< / a > ?
< / p >
< p >
Or perhaps to < a href = "#chapter-glossaries" > the chapter about glossaries< / a > ?
< / p >
< p >
Or perhaps to < a href = "magnet:?xt=urn:btih:dd8255ecdc7ca55fb0bbf81323d87062db1f6d1c&dn=Big+Buck+Bunny&tr=udp%3A%2F%2Fexplodie.org%3A6969&tr=udp%3A%2F%2Ftracker.coppersurfer.tk%3A6969&tr=udp%3A%2F%2Ftracker.empire-js.us%3A1337&tr=udp%3A%2F%2Ftracker.leechers-paradise.org%3A6969&tr=udp%3A%2F%2Ftracker.opentrackr.org%3A1337&tr=wss%3A%2F%2Ftracker.btorrent.xyz&tr=wss%3A%2F%2Ftracker.fastcast.nz&tr=wss%3A%2F%2Ftracker.openwebtorrent.com&ws=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2F&xs=https%3A%2F%2Fwebtorrent.io%2Ftorrents%2Fbig-buck-bunny.torrent" > download Big Buck Bunny< / a > with a torrent client?
< / p >
< / div >
< / section >
< / div >
< div class = "chapter-4" >
2022-10-14 22:51:30 +00:00
< section class = "panel box" id = "panel-idiomatic" >
2022-10-11 09:27:55 +00:00
< h3 >
< u > I< / u > diomatic expressions
< / h3 >
< p >
An < dfn id = "dfn-idiomatic" > idiomatic expression< / dfn > should be used when a < b > domain-specific term< / b > is used.
< / p >
< div class = "panel float-bottom" >
< p >
This is an < i > idiomatic expression< / i > .
< / p >
< / div >
< / section >
2022-10-14 22:51:30 +00:00
< section class = "panel box" id = "panel-emphasis" >
2022-10-11 09:27:55 +00:00
< h3 >
< u > Em< / u > phasis
< / h3 >
< p >
An < dfn id = "dfn-emphasis" > emphasis< / dfn > should be used when a certain word should be < b > stressed more< / b > than the others in a text.
< / p >
< div class = "panel float-bottom" >
< p >
You're doing < em > what< / em > ?!
< / p >
< / div >
< / section >
2022-10-14 22:51:30 +00:00
< section class = "panel box" id = "panel-attention" >
2022-10-11 09:27:55 +00:00
< h3 >
< u > B< / u > ring attention
< / h3 >
< p >
An < dfn id = "dfn-attention" > attention-bringer< / dfn > element denotes parts of text as < b > more important< / b > than the others.
< / p >
< div class = "panel float-bottom" >
< p >
I used attention-bringers basically < b > everywhere in this page< / b > .
< / p >
< / div >
< / section >
2022-10-14 22:51:30 +00:00
< section class = "panel box" id = "panel-strong" >
2022-10-11 09:27:55 +00:00
< h3 >
< u > Strong< / u > importance
< / h3 >
< p >
A < dfn id = "dfn-strong" > strong importance< / dfn > element denotes parts of text that are < b > even more important< / b > than the ones denoted by < i > attention-bringers< / i > .
< / p >
< div class = "panel float-bottom" >
< p >
Pls < strong > notice me< / strong > senpai!!1!
< / p >
< / div >
< / section >
2022-10-14 22:51:30 +00:00
< section class = "panel box" id = "panel-annotation" >
2022-10-11 09:27:55 +00:00
< h3 >
< u > U< / u > narticulated annotations
< / h3 >
< p >
An < dfn id = "dfn-annotation" > unarticulated annotation< / dfn > denotes parts of text that were given an < b > annotation< / b > without any comment.
< / p >
< div class = "panel float-bottom" >
< p >
Just look at the < u > h< / u > eaders of level < u > 3< / u > of these panels!
< / p >
< / div >
< / section >
2022-10-14 22:51:30 +00:00
< section class = "panel box" id = "panel-strike" >
2022-10-11 09:27:55 +00:00
< h3 >
< u > S< / u > trike
< / h3 >
< p >
A < dfn id = "dfn-strike" > strike< / dfn > marks a part of text as < b > incorrect< / b > .
< / p >
< div class = "panel float-bottom" >
< p >
I'm < s > plotting to conquer the world< / s > completely innocent and not an evil villain!
< / p >
< / div >
< / section >
2022-10-14 22:51:30 +00:00
< section class = "panel box" id = "panel-insdel" >
2022-10-11 09:27:55 +00:00
< h3 >
< u > Ins< / u > erted and < u > del< / u > eted text
< / h3 >
< p >
2022-10-14 22:51:30 +00:00
When comparing changes to a text, parts of it can be marked as < dfn id = "dfn-inserted" > inserted< / dfn > or < dfn id = "dfn-deleted" > deleted< / dfn > .
2022-10-11 09:27:55 +00:00
< / p >
< div class = "panel float-bottom" >
< h4 style = "text-align: left;" >
Bluelib 5.0.0
< / h4 >
< ul >
< li > Added: < ins > more bugs< / ins > < / li >
< li > Removed: < del > cool features< / del > < / li >
< / ul >
< / div >
< / section >
2022-10-14 22:51:30 +00:00
< section class = "panel box" id = "panel-small" >
2022-10-11 09:27:55 +00:00
< h3 >
< u > Small< / u > comment
< / h3 >
< p >
A < dfn id = "dfn-small" > small comment< / dfn > element denotes a part of a text as less important than the others.
< / p >
< p >
It can be considered the opposite of < i > attention-bringers< / i > , and similar to the < i > parenthesis< / i > panel.
< / p >
< div class = "panel float-bottom" >
< p >
Bluelib is great! < small > I'm joking, of course.< / small >
< / p >
< / div >
< / section >
2022-10-14 22:51:30 +00:00
< section class = "panel box" id = "panel-preformatted" >
2022-10-11 09:27:55 +00:00
< h3 >
2022-10-14 22:51:30 +00:00
< u > Pre< / u > formatted text
2022-10-11 09:27:55 +00:00
< / h3 >
< p >
A < dfn id = "dfn-preformatted" > preformatted text< / dfn > element denotes text where < b > lines and positioning are significant< / b > ; this prevents them from being < b > rearranged< / b > by the browser.
< / p >
< p >
It should be used for < b > poetry< / b > , < b > code< / b > , < b > ASCII art< / b > , < b > kaomoji< / b > , etc.
< / p >
< div class = "panel float-bottom" >
< pre > mm mmmm mmm mmmmm mmmmm
## #" " m" " # #
# # "#mmm # # #
#mm# "# # # #
# # "mmm#" "mmm" mm#mm mm#mm< / pre >
< / div >
< / section >
2022-10-14 22:51:30 +00:00
< section class = "panel box" id = "panel-code" >
2022-10-11 09:27:55 +00:00
< h3 >
2022-10-14 22:51:30 +00:00
Code
2022-10-11 09:27:55 +00:00
< / h3 >
< p >
A < dfn id = "dfn-code" > code< / dfn > element denotes that its contents are some kind of < b > code< / b > (probably belonging to a programming language).
< / p >
< p >
If displayed as a block instead of inline, it should be used with a < i > preformatted text< / i > element.
< / p >
< div class = "panel float-bottom" >
< p >
How to create a < code > section.panel< / code > with Bluelib:
< / p >
< pre > < code > < div class=" panel" >
< p>
Contents
< /p>
< /div> < / code > < / pre >
< / div >
< / section >
2022-10-14 22:51:30 +00:00
< section class = "panel box" id = "panel-sample" >
2022-10-11 09:27:55 +00:00
< h3 >
Sample input and output
< / h3 >
< p >
< dfn id = "dfn-sample-input" > Input samples< / dfn > and < dfn id = "dfn-sample-output" > output samples< / dfn > from a computer have elements which denote them, and are formatted appropriately.
< / p >
< p >
A < i > sample< / i > inside another creates emphasises the individual element, creating a combination.
< / p >
< div class = "panel float-bottom" >
< p >
If you press < kbd > < kbd > Ctrl< / kbd > +< kbd > Alt< / kbd > +< kbd > Del< / kbd > < / kbd > , something will happen!
< / p >
< p >
If you're on Windows, a menu will appear, and one of the options will say < samp > Task Manager< / samp > .
< / p >
< / div >
< / section >
2022-10-14 22:51:30 +00:00
< section class = "panel box" id = "panel-variable" >
2022-10-11 09:27:55 +00:00
< h3 >
Variables
< / h3 >
< p >
A < dfn id = "dfn-variable" > variable< / dfn > denotes a placeholder for something in a formula or algorithm.
< / p >
< div class = "panel float-bottom" >
< p >
< u > Sum< / u > : < var > Whatever< / var > + < var > Anything< / var > = < var > Something< / var >
< / p >
< / div >
< / section >
2022-10-14 22:51:30 +00:00
< section class = "panel box" id = "panel-quote" >
2022-10-11 09:27:55 +00:00
< h3 >
Quotes and citations
< / h3 >
< p >
A < dfn id = "dfn-quote" > quote< / dfn > element indicates an < b > inline quote< / b > , and may be optionally include a < dfn id = "dfn-citation" > citation< / dfn > element indicating the < b > source of the quote< / b > .
< / p >
2022-10-14 12:51:13 +00:00
< div class = "panel dialog float-bottom" >
2022-10-11 09:27:55 +00:00
< p >
< q > Objection!< / q > < br / >
—< cite > Phoenix Wright< / cite > , Ace Attorney
< / p >
< / div >
< / section >
2022-10-14 22:51:30 +00:00
< section class = "panel box" id = "panel-definition" >
2022-10-11 09:27:55 +00:00
< h3 >
Definitions
< / h3 >
< p >
A < dfn id = "dfn-definition" > definition< / dfn > element indicates the < b > term that is being defined< / b > in the contained paragraph.
< / p >
< div class = "panel float-bottom" >
< p >
This < dfn > definition example< / dfn > is getting a bit too < i > meta< / i > for my tastes.
< / p >
< / div >
< / section >
2022-10-14 22:51:30 +00:00
< section class = "panel box" id = "panel-abbreviation" >
2022-10-11 09:27:55 +00:00
< h3 >
Abbreviations
< / h3 >
< p >
An < dfn id = "dfn-abbreviation" > abbreviation< / dfn > element marks its contents as an < b > acronym< / b > or < b > abbreviation< / b > and allows the user to view the expanded abbreviation by hovering it with the mouse.
< / p >
< p >
Note that no mobile browsers currently support this feature, so you'll have to < b > manually provide an alternative< / b > for mobile users to see the full abbreviation.
< / p >
< div class = "panel float-bottom" >
< p >
Two companies against each other: < abbr class = "blue" title = "Builders League United" > BLU< / abbr > vs. < abbr class = "red" title = "Reliable Excavation Demolition" > RED< / abbr > !
< / p >
< / div >
< / section >
2022-10-14 22:51:30 +00:00
< section class = "panel box" id = "panel-ruby" >
2022-10-11 09:27:55 +00:00
< h3 >
Ruby
< / h3 >
< p >
2022-10-14 22:51:30 +00:00
A < dfn id = "dfn-ruby" > ruby text< / dfn > element is < b > text with small annotations above< / b > , commonly used in East Asian texts.
2022-10-11 09:27:55 +00:00
< / p >
< div class = "panel float-bottom" >
< p style = "font-size: xx-large;" >
< 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 >
< p style = "font-size: xx-large;" >
< ruby >
漢 < rp > (< / rp > < rt > kan< / rt > < rp > )< / rp >
字 < rp > (< / rp > < rt > ji< / rt > < rp > )< / rp >
< / ruby >
< / p >
< p style = "font-size: xx-large;" >
< ruby >
明日 < rp > (< / rp > < rt > ashita< / rt > < rp > )< / rp >
< / ruby >
< / p >
< / div >
< / section >
< / div >
< div class = "chapter-2" id = "chapter-tables" >
< h2 >
Tables
< / h2 >
2022-10-14 12:51:13 +00:00
< section class = "panel box" id = "panel-table" >
2022-10-11 09:27:55 +00:00
< h3 >
Table
< / h3 >
< p >
A < dfn id = "dfn-table" > table< / dfn > is an element whose children are aligned in a grid.
< / p >
< table >
< thead >
< tr >
< th > Emoji< / th >
< th > Meaning< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > 🙂< / td >
< td > Slightly Smiling Face< / td >
< / tr >
< tr >
< td > 🌑< / td >
< td > New Moon< / td >
< / tr >
< tr >
< td > 🌚< / td >
< td > New Moon with Face< / td >
< / tr >
< / tbody >
< / table >
< / section >
2022-10-14 12:51:13 +00:00
< section class = "panel box" id = "panel-tablecaption" >
2022-10-11 09:27:55 +00:00
< h3 >
Table caption
< / h3 >
< p >
Tables can have captions attached to their top.
< / p >
< table >
< caption class = "table-caption-top" >
Apple emoji meanings
< / caption >
< thead >
< tr >
< th > Emoji< / th >
< th > Meaning< / th >
< / tr >
< / thead >
< tbody >
< tr >
< td > 🍎< / td >
< td > Red Apple< / td >
< / tr >
< tr >
< td > 🍏< / td >
< td > Green Apple< / td >
< / tr >
< tr >
< td > < / td >
< td > Hopefully a square with < code > F8FF< / code > written inside it< / td >
< / tr >
< / tbody >
< / table >
< p >
Tables can also have headings and captions attached to their bottom.
< / p >
< table >
< caption class = "table-caption-bottom" >
Pear emoji meanings
< / caption >
< tbody >
< tr >
< td > 🍐< / td >
< td > Pear< / td >
< / tr >
< / tbody >
< tfoot >
< tr >
< th > Emoji< / th >
< th > Meaning< / th >
< / tr >
< / tfoot >
< / table >
< / section >
2022-10-14 12:51:13 +00:00
< table class = "panel box" id = "panel-tablepanel" >
2022-10-11 09:27:55 +00:00
< caption class = "table-caption-top" >
< h3 >
Table panels
< / h3 >
< p >
A < dfn id = "dfn-tablepanel" > table panel< / dfn > is a special table which is rendered as a panel.
< / p >
< p >
This table in particular is rendered as a box panel, and is about what two brothers think of the following objects:
< / p >
< / 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 >
2022-10-14 12:51:13 +00:00
< table class = "panel dialog" id = "panel-tabledialogs" >
2022-10-11 09:27:55 +00:00
< caption >
< h3 >
Table dialogs
< / h3 >
< p >
Panel tables can also be dialogs and parentheses.
< / p >
< p >
This table in particular is a dialog panel, and is about example features for a robot:
< / p >
< / caption >
< thead >
< tr >
< th > Feature< / th >
< th > Description< / th >
< / tr >
< / thead >
< tbody >
< tr >
< th scope = "row" > Base< / th >
< td > All the base features of your home robot!< / td >
< / tr >
< tr >
< th scope = "row" > Extra< / th >
< td > Everything a robot should be able to do, plus an infinite bubblewrap dispenser!< / td >
< / tr >
< tr >
< th scope = "row" > Super< / th >
< td > The robot is now armed with a non-free printer, and is ready to conquer the world!< / td >
< / tr >
< / tbody >
< tfoot >
< tr >
< th scope = "row" > Ultimate< / th >
< td > A time machine has been embedded into the robot, and it is free to use it at will.< / td >
< / tr >
< / tfoot >
< / table >
2022-10-14 12:51:13 +00:00
< table class = "panel box" id = "panel-cellmodifiers" >
2022-10-11 09:27:55 +00:00
< caption class = "table-caption-top" >
< h3 >
Cell modifiers
< / h3 >
< p >
Cells in tables have modifiers applied like all elements.
< / p >
< p >
This table in particular is for a game of tic-tac-toe.
< / p >
< / caption >
< tbody >
< tr >
< td class = "fade" > O< / td >
< td class = "fade" > < / td >
< td class = "mark" > X< / td >
< / tr >
< tr >
< td class = "fade" > X< / td >
< td class = "mark" > X< / td >
< td class = "fade" > O< / td >
< / tr >
< tr >
< td class = "mark" > X< / td >
< td class = "fade" > O< / td >
< td class = "fade" > < / td >
< / tr >
< / tbody >
< / table >
< / div >
< div class = "chapter-2" id = "chapter-images" >
< h2 >
Images
< / h2 >
2022-10-14 12:51:13 +00:00
< section class = "panel box" id = "panel-images-default" >
2022-10-11 09:27:55 +00:00
< h3 >
Default
< / h3 >
< p >
Images are < b > automatically centered and resized to fit< / b > the panel they are in.
< / p >
< img class = "float-bottom" src = "https://images.unsplash.com/photo-1593415553970-bd0145efc369" alt = "Neon Ice Cream" / >
< / section >
2022-10-14 12:51:13 +00:00
< section class = "panel box" id = "panel-limited" >
2022-10-11 09:27:55 +00:00
< 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 > , like the previous one did.
< / p >
< hr / >
< h4 >
Half
< / h4 >
< p >
The following image has a limit of half the vertical viewport:
< / p >
< img class = "image-limit-half" src = "https://images.unsplash.com/photo-1593415553970-bd0145efc369" alt = "Neon ice cream" / >
< hr / >
< 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://images.unsplash.com/photo-1593415553970-bd0145efc369" alt = "Neon ice cream" / >
< / section >
< / div >
2022-10-14 22:51:30 +00:00
< div class = "chapter-1" id = "chapter-inputs" >
2022-10-11 09:27:55 +00:00
< h2 >
Inputs
< / h2 >
2022-10-14 12:51:13 +00:00
< section class = "panel box" id = "panel-input" >
2022-10-11 09:27:55 +00:00
< h3 >
Input
< / h3 >
< p >
An < dfn id = "dfn-input" > Input< / dfn > is an interactive element which allows the user to interact with the web page.
< / p >
< / section >
< / div >
< div class = "chapter-2" >
2022-10-14 22:51:30 +00:00
< section class = "panel box" id = "panel-field" >
2022-10-11 09:27:55 +00:00
< h3 >
Field
< / h3 >
< p >
A < dfn id = "dfn-field" > Field< / dfn > is an < i > Input< / i > which allows the user to enter < b > single-line< / b > free-form text.
< / p >
< form class = "panel" >
< p >
< label >
First name
< input type = "text" placeholder = "Text" >
< / label >
< / p >
< p >
< label >
Last name
< input type = "text" placeholder = "Text" >
< / label >
< / p >
< p >
< label >
Nickname
< input type = "text" placeholder = "Text" >
< / label >
< / p >
< / form >
< hr / >
< h4 >
Special types of < i > Field< / i > s
< / h4 >
< p >
A < i > Field< / i > may require a particular < a href = "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#type" > type< / a > of data, such as an email or a phone number.
< / p >
< form class = "panel" >
< p >
< label >
Email
< input type = "email" placeholder = "Email" >
< / label >
< / p >
< p >
< label >
Password
< input type = "password" placeholder = "Password" >
< / label >
< / p >
< p >
< label >
Age
< input type = "number" placeholder = "Number" >
< / label >
< / p >
< p >
< label >
Phone
< input type = "tel" placeholder = "Telephone" >
< / label >
< / p >
< p >
< label >
Birthday
< input type = "date" placeholder = "Date" >
< / label >
< / p >
< p >
< label >
Had lunch at
< input type = "time" placeholder = "Time" >
< / label >
< / p >
< p >
< label >
Last party attended
< input type = "datetime-local" placeholder = "Date & time" >
< / label >
< / p >
< p >
< label >
Search for a friend
< input type = "search" placeholder = "Search" >
< / label >
< / p >
< / form >
< / section >
2022-10-14 22:51:30 +00:00
< section class = "panel box" id = "panel-area" >
2022-10-11 09:27:55 +00:00
< h3 >
Area
< / h3 >
< p >
An < dfn id = "dfn-area" > Area< / dfn > is a resizable < i > Input< / i > which allows the user to enter < b > multi-line< / b > free-form text.
< / p >
< form class = "panel" >
< p >
< label >
Interests
< textarea placeholder = "Text" > < / textarea >
< / label >
< / p >
< / form >
< / section >
2022-10-14 22:51:30 +00:00
< section class = "panel box" id = "panel-select" >
2022-10-11 09:27:55 +00:00
< h3 >
Select
< / h3 >
< p >
A < dfn id = "dfn-select" > Select< / dfn > is an < i > Input< / i > which allow the user to select between < b > one of multiple options< / b > .
< / p >
< form class = "panel float-bottom" >
< p >
< label >
Favourite primary color
< select >
< optgroup label = "RGB" >
< option > Red< / option >
< option > Green< / option >
< option > Blue< / option >
< / optgroup >
< optgroup label = "CYM" >
< option > Cyan< / option >
< option > Yellow< / option >
< option > Magenta< / option >
< / optgroup >
< / select >
< / label >
< / p >
< / form >
< / section >
2022-10-14 22:51:30 +00:00
< section class = "panel box" id = "panel-multiselect" >
2022-10-11 09:27:55 +00:00
< h3 >
Multiselect
< / h3 >
< p >
A < dfn id = "dfn-multiselect" > Multiselect< / dfn > is an < i > Input< / i > which allows the user to < b > enable or disable multiple options< / b > .
< / p >
< p >
Be aware that the average user will probably not know how to interact with the < i > Multiselect< / i > : to select options not adjacent to each other on a desktop browser, it requires holding the < kbd > Ctrl< / kbd > key.
< / p >
< form class = "panel float-bottom" >
< p >
< label >
Defeated rivals
< select multiple >
< optgroup label = "1st generation" >
< option > Blue< / option >
< / optgroup >
< optgroup label = "2nd generation" >
< option > Silver< / option >
< / optgroup >
< optgroup label = "3rd generation" >
< option > Brendan< / option >
< option > May< / option >
< / optgroup >
< optgroup label = "4th generation" >
< option > Barry< / option >
< option > Silver< / option >
< / optgroup >
< optgroup label = "5th generation" >
< option > Cheren< / option >
< option > Bianca< / option >
< option > Hugh< / option >
< / optgroup >
< option > Other< / option >
< / select >
< / label >
< / p >
< / form >
< / section >
2022-10-14 22:51:30 +00:00
< section class = "panel box" id = "panel-radio" >
2022-10-11 09:27:55 +00:00
< h3 >
Radio
< / h3 >
< p >
< dfn id = "dfn-radio" > Radios< / dfn > are < i > Input< / i > s which, like a < i > Select< / i > , allow the user to select between < b > one of multiple options< / b > when grouped together.
< / p >
< form class = "panel float-bottom" >
< p >
< label >
< input type = "radio" name = "example-size" >
XL
< / label >
< / p >
< p >
< label >
< input type = "radio" name = "example-size" >
L
< / label >
< / p >
< p >
< label >
< input type = "radio" name = "example-size" >
M
< / label >
< / p >
< p >
< label >
< input type = "radio" name = "example-size" >
S
< / label >
< / p >
< p >
< label >
< input type = "radio" name = "example-size" >
XS
< / label >
< / p >
< / form >
< / section >
2022-10-14 22:51:30 +00:00
< section class = "panel box" id = "panel-checkbox" >
2022-10-11 09:27:55 +00:00
< h3 >
Checkbox
< / h3 >
< p >
< dfn id = "dfn-checkbox" > Checkboxes< / dfn > are < i > Input< / i > s which, like a < i > Multiselect< / i > , allows the user to < b > enable or disable multiple options< / b > when grouped together.
< / p >
< form class = "panel float-bottom" >
< p >
< label >
< input type = "checkbox" >
Monday
< / label >
< / p >
< p >
< label >
< input type = "checkbox" >
Tuesday
< / label >
< / p >
< p >
< label >
< input type = "checkbox" >
Wednesday
< / label >
< / p >
< p >
< label >
< input type = "checkbox" >
Thursday
< / label >
< / p >
< p >
< label >
< input type = "checkbox" >
Friday
< / label >
< / p >
< p >
< label >
< input type = "checkbox" >
Saturday
< / label >
< / p >
< p >
< label >
< input type = "checkbox" >
Sunday
< / label >
< / p >
< / form >
< / section >
2022-10-14 22:51:30 +00:00
< section class = "panel box" id = "panel-color" >
2022-10-11 09:27:55 +00:00
< h3 >
Color
< / h3 >
< p >
2022-10-14 22:51:30 +00:00
A < dfn id = "dfn-color-input" > color input< / dfn > is an < i > Input< / i > which allows the user to select a RGB color.
2022-10-11 09:27:55 +00:00
< / p >
< p >
Since browsers usually delegate the rendering of this element to the operating system, it cannot be styled.
< / p >
< form class = "panel float-bottom" >
< p >
< label >
Favourite color
< input type = "color" >
< / label >
< / p >
< / form >
< / section >
2022-10-14 22:51:30 +00:00
< section class = "panel box" id = "panel-file" >
2022-10-11 09:27:55 +00:00
< h3 >
File
< / h3 >
< p >
2022-10-14 22:51:30 +00:00
A < dfn id = "dfn-file-input" > file input< / dfn > is an < i > Input< / i > which allows the user to < b > upload a file< / b > from their computer.
2022-10-11 09:27:55 +00:00
< / p >
< p >
Since browsers usually delegate the rendering of this element to the operating system, it cannot be styled.
< / p >
< form class = "panel float-bottom" >
< p >
< label >
Attached homework
< input type = "file" >
< / label >
< / p >
< / form >
< / section >
2022-10-14 22:51:30 +00:00
< section class = "panel box todo" id = "panel-range" >
2022-10-11 09:27:55 +00:00
< h3 >
Range
< / h3 >
< p >
A < dfn id = "dfn-range" > Range< / dfn > is an < i > Input< / i > which allows the user to inaccurately < b > select a value from a given range< / b > .
< / p >
< form class = "panel float-bottom" >
< p >
< label >
No sugar
< input type = "range" >
Only sugar
< / label >
< / p >
< / form >
< / section >
2022-10-14 22:51:30 +00:00
< section class = "panel box" id = "panel-button" >
2022-10-11 09:27:55 +00:00
< h3 >
Button
< / h3 >
< p >
A < dfn id = "dfn-button" > Button< / dfn > is an < i > Input< / i > which the user can click to < b > trigger an action< / b > .
< / p >
< form class = "panel float-bottom" >
< p >
< label >
Space Station Controls
< button > Launch< / button >
< / label >
< / p >
< p >
< label >
Food Delivery
< / label >
< button > Lunch< / button >
< / p >
< / form >
< / section >
< / div >
2022-10-14 22:51:30 +00:00
< div class = "chapter-1" id = "chapter-forms" >
2022-10-11 09:27:55 +00:00
< h2 >
Forms
< / h2 >
2022-10-14 12:51:13 +00:00
< section class = "panel box" id = "panel-form" >
2022-10-11 09:27:55 +00:00
< h3 >
Form
< / h3 >
< p >
An < dfn id = "dfn-form" > form< / dfn > is a non-interactive element which < b > positions < i > Inputs< / i > < / b > in commonly used ways.
< / p >
< / section >
2022-10-14 22:51:30 +00:00
< section class = "panel box" id = "panel-form-flex" >
2022-10-11 09:27:55 +00:00
< h3 >
Flex form
< / h3 >
< p >
2022-10-14 22:51:30 +00:00
A < dfn id = "dfn-form-flex" > flex form< / dfn > is a < b > block form< / b > aligning labels and inputs to a pseudo-grid.
2022-10-11 09:27:55 +00:00
< / p >
< form class = "panel form-flex" >
< h4 >
Life University Enrolment Form
< / h4 >
< p >
Please enter your personal details here:
< / p >
< label >
< span > First name< / span >
< input type = "text" placeholder = "Mario" >
< span > < / span >
< / label >
< label >
< span > Last name< / span >
< input type = "text" placeholder = "Rossi" >
< span > < / span >
< / label >
< label >
< span > Second name< / span >
< input type = "text" placeholder = "Luigi" >
< span > < small > Silver medal winning name< / small > < / span >
< / label >
< p >
Now, please enter some information about yourself:
< / p >
< label >
< span > Lazyness 0%< / span >
< input type = "range" >
< span > 100%< / span >
< / label >
< label >
< span > Birthday< / span >
< input type = "date" >
< span > < small > feel old yet?< / small > < / span >
< / label >
< label >
< span > < / span >
< input type = "text" placeholder = "Not at all" >
< span > Right alignment< / span >
< / label >
< p >
Finally, you can submit the form, and see whether you'll be accepted or not:
< / p >
< label >
< span > < / span >
< input type = "button" value = "Submit" >
< span > < / span >
< / label >
< / form >
< / section >
< / div >
< / article >
< / main >
< / div >
< footer >
< p >
© < 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 >
< / p >
< / footer >
< / body >
< / html >
