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>.
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.
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.
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>
<sectionclass="panel panel-box"id="panel-float">
<h3>
Element floats
</h3>
<p>
A <dfnid="dfn-float">float</dfn> is a utility class to align items in panels without having to write CSS.
</p>
<pclass="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.
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>
<pclass="float-bottom">
To have a constant height, one has to be set manually.
</p>
</section>
<sectionclass="panel panel-box">
<h3>
Auto-sizing
</h3>
<p>
Panels in a "zero" chapter will instead <b>automatically resize</b> to fit everything in a single row.
</p>
<divclass="chapter-0">
<divclass="panel">
1
</div>
<divclass="panel">
2
</div>
<divclass="panel">
3
</div>
<divclass="panel">
4
</div>
<divclass="panel">
5
</div>
<divclass="panel">
6
</div>
<divclass="panel">
7
</div>
<divclass="panel">
8
</div>
<divclass="panel">
9
</div>
<divclass="panel">
10
</div>
</div>
<pclass="float-bottom">
To set a constant width, one has to be set manually.
</p>
</section>
</div>
<divclass="chapter-3"id="chapter-status">
<h2>
Modifiers
</h2>
<sectionclass="panel panel-box"id="panel-fade">
<h3>
Fade
</h3>
<p>
The <dfnid="dfn-fade">fade</dfn> modifier <b>reduces the opacity</b> of the elements it is applied to.
</p>
<divclass="panel panel-box fade float-bottom">
<p>
I'm a faded box!
</p>
<divclass="panel panel-box">
<p>
I'm faded too!
</p>
<divclass="panel panel-box fade">
<p>
But they can be faded <b>more</b>.
</p>
</div>
</div>
</div>
</section>
<sectionclass="panel panel-box"id="paenl-mark">
<h3>
Mark
</h3>
<p>
The <dfnid="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>
<divclass="panel panel-box mark float-bottom">
<p>
Think of it like an <b>highlighter</b>, but for <mark>anything</mark>!
</p>
<divclass="panel panel-box mark">
<p>
Which can be nested to <mark>negate</mark> its effect.
</p>
<divclass="panel panel-box mark">
<p>
Up to 3 times and <mark>not any more</mark>.
</p>
</div>
</div>
</div>
</section>
<sectionclass="panel panel-box"id="panel-todo">
<h3>
To do
</h3>
<p>
The <dfnid="dfn-todo">todo</dfn> modifier emphasises that the contents of the elements it is applied to are not correct or final.
</p>
<divclass="panel panel-box todo float-bottom">
<p>
Like this!
</p>
<divclass="panel panel-box">
<p>
As with other modifiers, it is inherited.
</p>
<divclass="panel panel-box todo">
<p>
And it does nothing if reapplied.
</p>
</div>
</div>
</div>
</section>
<sectionclass="panel panel-box"id="panel-colors">
<h3>
Color modifiers
</h3>
<p>
The <dfnid="dfn-color">color</dfn> modifiers change the colors of the elements they are applied to.
A <dfnid="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.
A <dfnid="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.
A <dfnid="dfn-details">details</dfn> element <b>hides its contents</b>, displaying only a <dfnid="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>
<divclass="chapter-1"id="chapter-text">
<h2>
Text
</h2>
<sectionclass="panel panel-box">
<h3>
<u>A</u>nchors
</h3>
<p>
An <dfnid="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>
<divclass="panel">
<p>
Do you want to <ahref="https://example.org/">go to example.org</a>?
</p>
<p>
Or perhaps to <ahref="#chapter-glossaries">the chapter about glossaries</a>?
</p>
<p>
Or perhaps to <ahref="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>
<divclass="chapter-4">
<sectionclass="panel panel-box">
<h3>
<u>I</u>diomatic expressions
</h3>
<p>
An <dfnid="dfn-idiomatic">idiomatic expression</dfn> should be used when a <b>domain-specific term</b> is used.
</p>
<divclass="panel float-bottom">
<p>
This is an <i>idiomatic expression</i>.
</p>
</div>
</section>
<sectionclass="panel panel-box">
<h3>
<u>Em</u>phasis
</h3>
<p>
An <dfnid="dfn-emphasis">emphasis</dfn> should be used when a certain word should be <b>stressed more</b> than the others in a text.
</p>
<divclass="panel float-bottom">
<p>
You're doing <em>what</em>?!
</p>
</div>
</section>
<sectionclass="panel panel-box">
<h3>
<u>B</u>ring attention
</h3>
<p>
An <dfnid="dfn-attention">attention-bringer</dfn> element denotes parts of text as <b>more important</b> than the others.
</p>
<divclass="panel float-bottom">
<p>
I used attention-bringers basically <b>everywhere in this page</b>.
</p>
</div>
</section>
<sectionclass="panel panel-box">
<h3>
<u>Strong</u> importance
</h3>
<p>
A <dfnid="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>
<divclass="panel float-bottom">
<p>
Pls <strong>notice me</strong> senpai!!1!
</p>
</div>
</section>
<sectionclass="panel panel-box">
<h3>
<u>U</u>narticulated annotations
</h3>
<p>
An <dfnid="dfn-annotation">unarticulated annotation</dfn> denotes parts of text that were given an <b>annotation</b> without any comment.
</p>
<divclass="panel float-bottom">
<p>
Just look at the <u>h</u>eaders of level <u>3</u> of these panels!
</p>
</div>
</section>
<sectionclass="panel panel-box">
<h3>
<u>S</u>trike
</h3>
<p>
A <dfnid="dfn-strike">strike</dfn> marks a part of text as <b>incorrect</b>.
</p>
<divclass="panel float-bottom">
<p>
I'm <s>plotting to conquer the world</s> completely innocent and not an evil villain!
</p>
</div>
</section>
<sectionclass="panel panel-box">
<h3>
<u>Ins</u>erted and <u>del</u>eted text
</h3>
<p>
When comparing changes to a text, parts of it can be marked as <dfnid="dfn-inserted">inserted</dfn> or <dfnid="dfn-removed">removed</dfn>.
</p>
<divclass="panel float-bottom">
<h4style="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>
<sectionclass="panel panel-box">
<h3>
<u>Small</u> comment
</h3>
<p>
A <dfnid="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>
<divclass="panel float-bottom">
<p>
Bluelib is great! <small>I'm joking, of course.</small>
</p>
</div>
</section>
<sectionclass="panel panel-box">
<h3>
Preformatted text
</h3>
<p>
A <dfnid="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>
<divclass="panel float-bottom">
<pre> mm mmmm mmm mmmmm mmmmm
## #" " m" " # #
# # "#mmm # # #
#mm# "# # # #
# # "mmm#" "mmm" mm#mm mm#mm</pre>
</div>
</section>
<sectionclass="panel panel-box">
<h3>
Code snippets
</h3>
<p>
A <dfnid="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>
<divclass="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>
<sectionclass="panel panel-box">
<h3>
Sample input and output
</h3>
<p>
<dfnid="dfn-sample-input">Input samples</dfn> and <dfnid="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>
<divclass="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>
<sectionclass="panel panel-box">
<h3>
Variables
</h3>
<p>
A <dfnid="dfn-variable">variable</dfn> denotes a placeholder for something in a formula or algorithm.
A <dfnid="dfn-quote">quote</dfn> element indicates an <b>inline quote</b>, and may be optionally include a <dfnid="dfn-citation">citation</dfn> element indicating the <b>source of the quote</b>.
</p>
<divclass="panel panel-dialog float-bottom">
<p>
<q>Objection!</q><br/>
—<cite>Phoenix Wright</cite>, Ace Attorney
</p>
</div>
</section>
<sectionclass="panel panel-box">
<h3>
Definitions
</h3>
<p>
A <dfnid="dfn-definition">definition</dfn> element indicates the <b>term that is being defined</b> in the contained paragraph.
</p>
<divclass="panel float-bottom">
<p>
This <dfn>definition example</dfn> is getting a bit too <i>meta</i> for my tastes.
</p>
</div>
</section>
<sectionclass="panel panel-box">
<h3>
Abbreviations
</h3>
<p>
An <dfnid="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>
<divclass="panel float-bottom">
<p>
Two companies against each other: <abbrclass="blue"title="Builders League United">BLU</abbr> vs. <abbrclass="red"title="Reliable Excavation Demolition">RED</abbr>!
</p>
</div>
</section>
<sectionclass="panel panel-box">
<h3>
Ruby
</h3>
<p>
A <dfnid="dnf-ruby">ruby text</dfn> element is <b>text with small annotations above</b>, commonly used in East Asian texts.
</p>
<divclass="panel float-bottom">
<pstyle="font-size: xx-large;">
<ruby>
Mo <rp>/</rp><rt>ˈmɒ</rt><rp>/</rp>
de <rp>/</rp><rt>dɪ</rt><rp>/</rp>
na <rp>/</rp><rt>nə</rt><rp>/</rp>
</ruby>
</p>
<pstyle="font-size: xx-large;">
<ruby>
漢 <rp>(</rp><rt>kan</rt><rp>)</rp>
字 <rp>(</rp><rt>ji</rt><rp>)</rp>
</ruby>
</p>
<pstyle="font-size: xx-large;">
<ruby>
明日 <rp>(</rp><rt>ashita</rt><rp>)</rp>
</ruby>
</p>
</div>
</section>
</div>
<divclass="chapter-2"id="chapter-tables">
<h2>
Tables
</h2>
<sectionclass="panel panel-box"id="panel-table">
<h3>
Table
</h3>
<p>
A <dfnid="dfn-table">table</dfn> is an element whose children are aligned in a grid.
An <dfnid="dfn-input">Input</dfn> is an interactive element which allows the user to interact with the web page.
</p>
</section>
</div>
<divclass="chapter-2">
<sectionclass="panel panel-box">
<h3>
Field
</h3>
<p>
A <dfnid="dfn-field">Field</dfn> is an <i>Input</i> which allows the user to enter <b>single-line</b> free-form text.
</p>
<formclass="panel">
<p>
<label>
First name
<inputtype="text"placeholder="Text">
</label>
</p>
<p>
<label>
Last name
<inputtype="text"placeholder="Text">
</label>
</p>
<p>
<label>
Nickname
<inputtype="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 <ahref="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#type">type</a> of data, such as an email or a phone number.
An <dfnid="dfn-area">Area</dfn> is a resizable <i>Input</i> which allows the user to enter <b>multi-line</b> free-form text.
</p>
<formclass="panel">
<p>
<label>
Interests
<textareaplaceholder="Text"></textarea>
</label>
</p>
</form>
</section>
<sectionclass="panel panel-box">
<h3>
Select
</h3>
<p>
A <dfnid="dfn-select">Select</dfn> is an <i>Input</i> which allow the user to select between <b>one of multiple options</b>.
</p>
<formclass="panel float-bottom">
<p>
<label>
Favourite primary color
<select>
<optgrouplabel="RGB">
<option>Red</option>
<option>Green</option>
<option>Blue</option>
</optgroup>
<optgrouplabel="CYM">
<option>Cyan</option>
<option>Yellow</option>
<option>Magenta</option>
</optgroup>
</select>
</label>
</p>
</form>
</section>
<sectionclass="panel panel-box">
<h3>
Multiselect
</h3>
<p>
A <dfnid="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>
<formclass="panel float-bottom">
<p>
<label>
Defeated rivals
<selectmultiple>
<optgrouplabel="1st generation">
<option>Blue</option>
</optgroup>
<optgrouplabel="2nd generation">
<option>Silver</option>
</optgroup>
<optgrouplabel="3rd generation">
<option>Brendan</option>
<option>May</option>
</optgroup>
<optgrouplabel="4th generation">
<option>Barry</option>
<option>Silver</option>
</optgroup>
<optgrouplabel="5th generation">
<option>Cheren</option>
<option>Bianca</option>
<option>Hugh</option>
</optgroup>
<option>Other</option>
</select>
</label>
</p>
</form>
</section>
<sectionclass="panel panel-box">
<h3>
Radio
</h3>
<p>
<dfnid="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>
<formclass="panel float-bottom">
<p>
<label>
<inputtype="radio"name="example-size">
XL
</label>
</p>
<p>
<label>
<inputtype="radio"name="example-size">
L
</label>
</p>
<p>
<label>
<inputtype="radio"name="example-size">
M
</label>
</p>
<p>
<label>
<inputtype="radio"name="example-size">
S
</label>
</p>
<p>
<label>
<inputtype="radio"name="example-size">
XS
</label>
</p>
</form>
</section>
<sectionclass="panel panel-box">
<h3>
Checkbox
</h3>
<p>
<dfnid="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>
<formclass="panel float-bottom">
<p>
<label>
<inputtype="checkbox">
Monday
</label>
</p>
<p>
<label>
<inputtype="checkbox">
Tuesday
</label>
</p>
<p>
<label>
<inputtype="checkbox">
Wednesday
</label>
</p>
<p>
<label>
<inputtype="checkbox">
Thursday
</label>
</p>
<p>
<label>
<inputtype="checkbox">
Friday
</label>
</p>
<p>
<label>
<inputtype="checkbox">
Saturday
</label>
</p>
<p>
<label>
<inputtype="checkbox">
Sunday
</label>
</p>
</form>
</section>
<sectionclass="panel panel-box">
<h3>
Color
</h3>
<p>
A <dfnid="dfn-color-input">Color (Input)</dfn> is an <i>Input</i> which allows the user to select a RGB color.
</p>
<p>
Since browsers usually delegate the rendering of this element to the operating system, it cannot be styled.
</p>
<formclass="panel float-bottom">
<p>
<label>
Favourite color
<inputtype="color">
</label>
</p>
</form>
</section>
<sectionclass="panel panel-box">
<h3>
File
</h3>
<p>
A <dfnid="dfn-file-input">File</dfn> is an <i>Input</i> which allows the user to <b>upload a file</b> from their computer.
</p>
<p>
Since browsers usually delegate the rendering of this element to the operating system, it cannot be styled.
</p>
<formclass="panel float-bottom">
<p>
<label>
Attached homework
<inputtype="file">
</label>
</p>
</form>
</section>
<sectionclass="panel panel-box todo">
<h3>
Range
</h3>
<p>
A <dfnid="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>
<formclass="panel float-bottom">
<p>
<label>
No sugar
<inputtype="range">
Only sugar
</label>
</p>
</form>
</section>
<sectionclass="panel panel-box">
<h3>
Button
</h3>
<p>
A <dfnid="dfn-button">Button</dfn> is an <i>Input</i> which the user can click to <b>trigger an action</b>.
</p>
<formclass="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>
<divclass="chapter-1">
<h2>
Forms
</h2>
<sectionclass="panel panel-box"id="panel-form">
<h3>
Form
</h3>
<p>
An <dfnid="dfn-form">form</dfn> is a non-interactive element which <b>positions <i>Inputs</i></b> in commonly used ways.
</p>
</section>
<sectionclass="panel panel-box">
<h3>
Flex form
</h3>
<p>
A <dfn>flex form</dfn> is a <b>block form</b> aligning labels and inputs to a pseudo-grid.
</p>
<formclass="panel form-flex">
<h4>
Life University Enrolment Form
</h4>
<p>
Please enter your personal details here:
</p>
<label>
<span>First name</span>
<inputtype="text"placeholder="Mario">
<span></span>
</label>
<label>
<span>Last name</span>
<inputtype="text"placeholder="Rossi">
<span></span>
</label>
<label>
<span>Second name</span>
<inputtype="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>
<inputtype="range">
<span>100%</span>
</label>
<label>
<span>Birthday</span>
<inputtype="date">
<span><small>feel old yet?</small></span>
</label>
<label>
<span></span>
<inputtype="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:
