<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Bluelib</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <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" /> <link rel="icon" type="image/x-icon" href="../favicon.ico"> <link rel="stylesheet/less" type="text/css" href="../dist/base.root.less"> <link rel="stylesheet/less" type="text/css" href="../dist/colors-royalblue.root.less"> <link rel="stylesheet/less" type="text/css" href="../dist/colors-amber.root.less"> <link rel="stylesheet/less" type="text/css" href="../dist/fonts-fira-ghpages.root.less"> <link rel="stylesheet/less" type="text/css" href="../dist/classic.root.less"> <link rel="stylesheet/less" type="text/css" href="../dist/glass.root.less"> <link rel="stylesheet/less" type="text/css" href="../dist/fun.root.less"> <link rel="stylesheet" type="text/css" href="./index.css"> <script src="index.js"></script> <script> less = { env: "development", }; </script> <script src="https://cdn.jsdelivr.net/npm/less"></script> <title>Bluelib</title> </head> <body id="body" class="theme-bluelib"> <img id="background" alt="" src="Space_Default.jpg"> <main> <article> <h1> Bluelib </h1> <div class="chapter-1" id="chapter-welcome"> <h2 style="margin-top: 0;"> Welcome to Bluelib! </h2> <section class="panel box" id="panel-what-is-bluelib"> <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> <div class="panel parenthesis float-bottom"> <p> This page is also used for development, therefore it uses un-minified sources and imports some development scripts. </p> <p> Do not try to determine the performance of Bluelib from this page, as the development features are somewhat heavy on the browser! </p> </div> </section> </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"> <h3> Targets </h3> <p> 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. </p> </section> <section class="panel box rainbow" id="panel-rulesets todo"> <h3> Available rulesets </h3> <dl> <dt><label class="fade"><input type="checkbox" disabled checked class="ruleset-toggle" name="ruleset-base" onclick="toggleStyle('less:bluelib-dist-base:root')"> Base</label></dt> <dd> The base <i>ruleset</i>, providing the layout and basic high contrast theming. </dd> <dt><label class="fade"><input type="checkbox" disabled checked class="ruleset-toggle" name="ruleset-classic" onclick="toggleStyle('less:bluelib-dist-classic:root')"> Classic</label></dt> <dd> Inspired by the older Bluelib versions, with semi-transparent panels and rounded borders. </dd> <dt><label class="fade"><input type="checkbox" disabled checked class="ruleset-toggle" name="ruleset-glass" onclick="toggleStyle('less:bluelib-dist-glass:root')"> Glass</label></dt> <dd> Made to celebrate the addition of <code>backdrop-filter</code> to Firefox, makes panels have a <q>stained glass</q> background. </dd> <dt><label class="fade"><input type="checkbox" disabled class="ruleset-toggle" name="ruleset-fun" onclick="toggleStyle('less:bluelib-dist-fun:root')"> Fun</label></dt> <dd> Experimental <i>ruleset</i> with bizzare or buggy but fun rules. Unsupported, do not use in production! </dd> <dt>Colors</dt> <dd> <dl> <dt><label class="fade"><input type="radio" disabled checked class="ruleset-toggle" name="ruleset-colors" onclick="selectColor('less:bluelib-dist-colors-royalblue:root')"> Royal Blue</label></dt> <dd> <a href="https://github.com/Steffo99">Steffo</a>'s signature color theme, based upon RYG⁵'s logo colors. </dd> <dt><label class="fade"><input type="radio" disabled class="ruleset-toggle" name="ruleset-colors" onclick="selectColor('less:bluelib-dist-colors-amber:root')"> Gestione Amber</label></dt> <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> <dt><label class="fade"><input type="radio" disabled checked name="ruleset-fonts"> Fira</label></dt> <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> <dt><label class="fade"><input type="radio" disabled checked name="selectorset"> Root</label></dt> <dd> Simple selectors for usage in plain HTML pages, with short and human-friendly class names. </dd> <dt><label class="fade"><input type="radio" disabled name="selectorset"> Module</label></dt> <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> </section> </div> <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"> <h2> Panels </h2> <section class="panel box" id="panel-panel"> <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> <section class="panel box" id="panel-box"> <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> <div class="panel box float-bottom"> This Box contains a hidden Snake. <span style="display: none;">🐍</span> </div> </section> <section class="panel box" id="panel-dialog"> <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> <blockquote class="panel dialog float-bottom"> <q>Snake? Snake??? SNAKEEEEEEE!</q> </blockquote> </section> <section class="panel box" id="panel-parenthesis"> <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> <div class="panel parenthesis float-bottom"> I think we lost the Snake... </div> </section> <section class="panel box" id="panel-when-panel"> <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> <section class="panel box" id="panel-when-box"> <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> <section class="panel box" id="panel-when-dialog"> <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> <section class="panel box" id="panel-when-parenthesis"> <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"> <section class="panel box" id="panel-nesting"> <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> <div class="panel parenthesis"> <p> Like this! </p> <div class="panel parenthesis"> <p> How deep does this Panel hole go? </p> <div class="panel parenthesis"> <p> BWOON. </p> <div class="panel parenthesis"> <p> BWOON. </p> <div class="panel parenthesis"> <p> BWOON. </p> <div class="panel parenthesis"> <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> <section class="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> <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> <section class="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> </section> <section class="panel box" id="panel-float"> <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> <section class="panel box" id="panel-autowrap"> <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> <section class="panel box" id="panel-autosizing"> <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> <div class="chapter-3" id="chapter-modifiers"> <h2> Modifiers </h2> <section class="panel box" id="panel-fade"> <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> <div class="panel box fade float-bottom"> <p> I'm a faded box! </p> <div class="panel box"> <p> I'm faded too! </p> <div class="panel box fade"> <p> But they can be faded <b>more</b>. </p> </div> </div> </div> </section> <section class="panel box" id="panel-mark"> <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> <div class="panel box mark float-bottom"> <p> Think of it like an <b>highlighter</b>, but for <mark>anything</mark>! </p> <div class="panel box mark"> <p> Which can be nested to <mark>negate</mark> its effect. </p> <div class="panel box mark"> <p> Up to 3 times and <mark>not any more</mark>. </p> </div> </div> </div> </section> <section class="panel box" id="panel-todo"> <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> <div class="panel box todo float-bottom"> <p> Like this! </p> <div class="panel box"> <p> As with other modifiers, it is inherited. </p> <div class="panel box todo"> <p> And it does nothing if reapplied. </p> </div> </div> </div> </section> <section class="panel box" id="panel-colors"> <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"> <div class="panel box red"> <h4> Red </h4> <p> * warns angrily! </p> </div> <div class="panel box yellow"> <h4> Yellow </h4> <p> * warns. </p> </div> <div class="panel box green"> <h4> Green </h4> <p> * is a success! </p> </div> <div class="panel box cyan"> <h4> Cyan </h4> <p> * informs... </p> </div> <div class="panel box blue"> <h4> Blue </h4> <p> * annotates </p> </div> <div class="panel box magenta"> <h4> Magenta </h4> <p> * asks a question? </p> </div> </div> </section> </div> <div class="chapter-3" id="chapter-separators"> <h2> Separators </h2> <section class="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 class="float-bottom"> <blockquote class="panel dialog"> Top Text </blockquote> </section> <section class="panel box" id="panel-separator-light"> <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"> <blockquote class="panel dialog"> Bottom Text </blockquote> </section> <section class="panel box" id="panel-separator-heavy"> <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"> <blockquote class="panel dialog"> Bottom Text 2: Electric Boogaloo </blockquote> </section> </div> <div class="chapter-2" id="chapter-lists"> <h2> Lists </h2> <section class="panel box" id="panel-list-ordered"> <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> <section class="panel box" id="panel-list-unordered"> <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> <section class="panel box" id="panel-list-definition"> <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> <section class="panel box" id="panel-details"> <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> Text elements </h2> <section class="panel box" id="panel-anchor"> <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"> <section class="panel box" id="panel-idiomatic"> <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> <section class="panel box" id="panel-emphasis"> <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> <section class="panel box" id="panel-attention"> <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> <section class="panel box" id="panel-strong"> <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> <section class="panel box" id="panel-annotation"> <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> <section class="panel box" id="panel-strike"> <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> <section class="panel box" id="panel-insdel"> <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 <dfn id="dfn-inserted">inserted</dfn> or <dfn id="dfn-deleted">deleted</dfn>. </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> <section class="panel box" id="panel-small"> <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> <section class="panel box" id="panel-preformatted"> <h3> <u>Pre</u>formatted text </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> <section class="panel box" id="panel-code"> <h3> Code </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> <section class="panel box" id="panel-sample"> <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> <section class="panel box" id="panel-variable"> <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> <section class="panel box" id="panel-quote"> <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> <div class="panel dialog float-bottom"> <p> <q>Objection!</q><br/> —<cite>Phoenix Wright</cite>, Ace Attorney </p> </div> </section> <section class="panel box" id="panel-definition"> <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> <section class="panel box" id="panel-abbreviation"> <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> <section class="panel box" id="panel-ruby"> <h3> Ruby </h3> <p> A <dfn id="dfn-ruby">ruby text</dfn> element is <b>text with small annotations above</b>, commonly used in East Asian texts. </p> <div class="panel float-bottom"> <p style="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> <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> <section class="panel box" id="panel-table"> <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> <section class="panel box" id="panel-tablecaption"> <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> <table class="panel box" id="panel-tablepanel"> <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> <table class="panel dialog" id="panel-tabledialogs"> <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> <table class="panel box" id="panel-cellmodifiers"> <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> <section class="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> <img class="float-bottom" src="https://images.unsplash.com/photo-1593415553970-bd0145efc369" alt="Neon Ice Cream"/> </section> <section class="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>, 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> <div class="chapter-1" id="chapter-inputs"> <h2> Inputs </h2> <section class="panel box" id="panel-input"> <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"> <section class="panel box" id="panel-field"> <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> <section class="panel box" id="panel-area"> <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> <section class="panel box" id="panel-select"> <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> <section class="panel box" id="panel-multiselect"> <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> <section class="panel box" id="panel-radio"> <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> <section class="panel box" id="panel-checkbox"> <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> <section class="panel box" id="panel-color"> <h3> Color </h3> <p> A <dfn id="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> <form class="panel float-bottom"> <p> <label> Favourite color <input type="color"> </label> </p> </form> </section> <section class="panel box" id="panel-file"> <h3> File </h3> <p> 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. </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> <section class="panel box todo" id="panel-range"> <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> <section class="panel box" id="panel-button"> <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> <div class="chapter-1" id="chapter-forms"> <h2> Forms </h2> <section class="panel box" id="panel-form"> <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> <section class="panel box" id="panel-form-flex"> <h3> Flex form </h3> <p> A <dfn id="dfn-form-flex">flex form</dfn> is a <b>block form</b> aligning labels and inputs to a pseudo-grid. </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> <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>