steffo/bluelib
steffo/bluelib
1
Fork 0
mirror of https://github.com/Steffo99/bluelib.git synced 2024-12-22 11:34:21 +00:00
Code Activity

Unify docs terminology (fixes #50)

Browse source
This commit is contained in:
Steffo 2022-10-15 00:51:30 +02:00
parent 1c87ca955f
commit 5bd22798b1
Signed by: steffo
GPG key ID: 6965406171929D01
30 changed files with 337 additions and 238 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
LICENSE.txt
View file

@ -319,7 +319,7 @@ requirement to continue to provide support service, warranty, or updates
for a work that has been modified or installed by the recipient, or for for a work that has been modified or installed by the recipient, or for
the User Product in which it has been modified or installed. Access to a the User Product in which it has been modified or installed. Access to a
network may be denied when the modification itself materially and network may be denied when the modification itself materially and
adversely affects the operation of the network or violates the rules and adversely affects the operation of the network or violates the rulesets and
protocols for communication across the network. protocols for communication across the network.
Corresponding Source conveyed, and Installation Information provided, Corresponding Source conveyed, and Installation Information provided,

6
dist/_build.sh vendored
View file

@ -7,14 +7,14 @@ echo "Mixins:"
echo "$mixins" echo "$mixins"
echo echo
echo "Finding rules..." echo "Finding rulesets..."
rules=$(ls ../src/rules/*.less ../src/rules/**/*.less) rules=$(ls ../src/rulesets/*.less ../src/rulesets/**/*.less)
echo "Rules:" echo "Rules:"
echo "$rules" echo "$rules"
echo echo
echo "Finding selectors..." echo "Finding selectors..."
selectors=$(ls ../src/selectors/*.less ../src/selectors/**/*.less) selectors=$(ls ../src/selectorsets/*.less ../src/selectorsets/**/*.less)
echo "Selectors:" echo "Selectors:"
echo "$selectors" echo "$selectors"
echo echo

25
dist/base.module.css vendored
View file

@ -631,10 +631,11 @@
display: flex; display: flex;
gap: 1ex; gap: 1ex;
} }
.bluelib .form-flex > .element-label > .element-span:first-child, .bluelib .form-flex > .element-label > *:first-child,
.bluelib .form-flex > .element-label > .element-span:last-child { .bluelib .form-flex > .element-label > *:last-child {
margin: auto 0; margin: auto 0;
flex-basis: 15%; flex-basis: 15%;
flex-grow: 0;
font-style: var(--bfont-label-style); font-style: var(--bfont-label-style);
font-variant: var(--bfont-label-variant); font-variant: var(--bfont-label-variant);
font-weight: var(--bfont-label-weight); font-weight: var(--bfont-label-weight);
@ -645,14 +646,20 @@
--bhsl-current-saturation: var(--bhsl-primary-saturation); --bhsl-current-saturation: var(--bhsl-primary-saturation);
--bhsl-current-lightness: var(--bhsl-primary-lightness); --bhsl-current-lightness: var(--bhsl-primary-lightness);
} }
.bluelib .form-flex > .element-label > .element-span:first-child { .bluelib .form-flex > .element-label > * {
text-align: right;
}
.bluelib .form-flex > .element-label > .element-span:last-child {
text-align: left;
}
.bluelib .form-flex > .element-label > .input {
flex-grow: 1; flex-grow: 1;
display: flex;
justify-content: start;
align-items: center;
gap: 4px;
}
.bluelib .form-flex > .element-label > *:first-child {
text-align: right;
display: block;
}
.bluelib .form-flex > .element-label > *:last-child {
text-align: left;
display: block;
} }
.bluelib .text-anchor { .bluelib .text-anchor {
--bhsl-current-hue: var(--bhsl-link-hue); --bhsl-current-hue: var(--bhsl-link-hue);

4
dist/base.module.less vendored
View file

@ -3,8 +3,8 @@
@import (less) "../src/mixins/hsl.less"; @import (less) "../src/mixins/hsl.less";
// Selector // Selector
@import (less) "../src/selectors/module.less"; @import (less) "../src/selectorsets/module.less";
// Rule // Rule
@import (less) "../src/rules/base.less"; @import (less) "../src/rulesets/base.less";

64
dist/base.root.css vendored
View file

@ -103,27 +103,27 @@ body .panel {
background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness)); background-color: hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
} }
body .panel.border-top, body .panel.border-top,
body .panel.panel-box { body .panel.box {
border-top-width: 2px; border-top-width: 2px;
padding-top: calc(0.5em - 2px); padding-top: calc(0.5em - 2px);
} }
body .panel.border-right, body .panel.border-right,
body .panel.panel-box { body .panel.box {
border-right-width: 2px; border-right-width: 2px;
padding-right: calc(0.5em - 2px); padding-right: calc(0.5em - 2px);
} }
body .panel.border-left, body .panel.border-left,
body .panel.panel-box, body .panel.box,
body .panel.panel-dialog { body .panel.dialog {
border-left-width: 2px; border-left-width: 2px;
padding-left: calc(0.5em - 2px); padding-left: calc(0.5em - 2px);
} }
body .panel.border-bottom, body .panel.border-bottom,
body .panel.panel-box { body .panel.box {
border-bottom-width: 2px; border-bottom-width: 2px;
padding-bottom: calc(0.5em - 2px); padding-bottom: calc(0.5em - 2px);
} }
body .panel.panel-parenthesis { body .panel.parenthesis {
font-size: smaller; font-size: smaller;
} }
body .chapter-0, body .chapter-0,
@ -321,39 +321,39 @@ body table.panel caption *:first-child {
body table.panel caption *:last-child { body table.panel caption *:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
body table.panel-box tr { body table.box tr {
border-width: 1px; border-width: 1px;
} }
body table.panel-box th, body table.box th,
body table.panel-box td { body table.box td {
border-width: 1px; border-width: 1px;
padding: 7px; padding: 7px;
} }
body table.panel-box caption { body table.box caption {
border-width: 2px; border-width: 2px;
padding: 6px; padding: 6px;
} }
body table.panel-box caption.table-caption-top { body table.box caption.table-caption-top {
border-bottom-width: 0; border-bottom-width: 0;
} }
body table.panel-box caption.table-caption-bottom { body table.box caption.table-caption-bottom {
border-top-width: 0; border-top-width: 0;
} }
body table.panel-dialog thead > tr { body table.dialog thead > tr {
border-bottom-width: 1px; border-bottom-width: 1px;
} }
body table.panel-dialog tbody > tr { body table.dialog tbody > tr {
border-width: 0; border-width: 0;
} }
body table.panel-dialog tfoot > tr { body table.dialog tfoot > tr {
border-top-width: 1px; border-top-width: 1px;
} }
body table.panel-dialog th, body table.dialog th,
body table.panel-dialog td { body table.dialog td {
border-width: 0 0 0 1px; border-width: 0 0 0 1px;
padding: 8px 8px 8px 7px; padding: 8px 8px 8px 7px;
} }
body table.panel-dialog caption { body table.dialog caption {
border-width: 0 0 0 2px; border-width: 0 0 0 2px;
padding: 8px 8px 8px 6px; padding: 8px 8px 8px 6px;
} }
@ -675,10 +675,11 @@ body .form-flex > label {
display: flex; display: flex;
gap: 1ex; gap: 1ex;
} }
body .form-flex > label > span:first-child, body .form-flex > label > *:first-child,
body .form-flex > label > span:last-child { body .form-flex > label > *:last-child {
margin: auto 0; margin: auto 0;
flex-basis: 15%; flex-basis: 15%;
flex-grow: 0;
font-style: var(--bfont-label-style); font-style: var(--bfont-label-style);
font-variant: var(--bfont-label-variant); font-variant: var(--bfont-label-variant);
font-weight: var(--bfont-label-weight); font-weight: var(--bfont-label-weight);
@ -689,17 +690,20 @@ body .form-flex > label > span:last-child {
--bhsl-current-saturation: var(--bhsl-primary-saturation); --bhsl-current-saturation: var(--bhsl-primary-saturation);
--bhsl-current-lightness: var(--bhsl-primary-lightness); --bhsl-current-lightness: var(--bhsl-primary-lightness);
} }
body .form-flex > label > span:first-child { body .form-flex > label > * {
text-align: right;
}
body .form-flex > label > span:last-child {
text-align: left;
}
body .form-flex > label > input,
body .form-flex > label textarea,
body .form-flex > label select,
body .form-flex > label button {
flex-grow: 1; flex-grow: 1;
display: flex;
justify-content: start;
align-items: center;
gap: 4px;
}
body .form-flex > label > *:first-child {
text-align: right;
display: block;
}
body .form-flex > label > *:last-child {
text-align: left;
display: block;
} }
body a { body a {
--bhsl-current-hue: var(--bhsl-link-hue); --bhsl-current-hue: var(--bhsl-link-hue);

4
dist/base.root.less vendored
View file

@ -3,8 +3,8 @@
@import (less) "../src/mixins/hsl.less"; @import (less) "../src/mixins/hsl.less";
// Selector // Selector
@import (less) "../src/selectors/root.less"; @import (less) "../src/selectorsets/root.less";
// Rule // Rule
@import (less) "../src/rules/base.less"; @import (less) "../src/rulesets/base.less";

4
dist/classic.module.less vendored
View file

@ -3,8 +3,8 @@
@import (less) "../src/mixins/hsl.less"; @import (less) "../src/mixins/hsl.less";
// Selector // Selector
@import (less) "../src/selectors/module.less"; @import (less) "../src/selectorsets/module.less";
// Rule // Rule
@import (less) "../src/rules/classic.less"; @import (less) "../src/rulesets/classic.less";

2
dist/classic.root.css vendored
View file

@ -98,7 +98,7 @@ body table.panel > caption {
border-radius: 0; border-radius: 0;
box-shadow: 0.0625em 0 0.25em hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness)); box-shadow: 0.0625em 0 0.25em hsl(var(--bhsl-background-hue) var(--bhsl-background-saturation) var(--bhsl-background-lightness));
} }
body table.panel-dialog > caption { body table.dialog > caption {
border-bottom-width: 2px; border-bottom-width: 2px;
} }
body input, body input,

4
dist/classic.root.less vendored
View file

@ -3,8 +3,8 @@
@import (less) "../src/mixins/hsl.less"; @import (less) "../src/mixins/hsl.less";
// Selector // Selector
@import (less) "../src/selectors/root.less"; @import (less) "../src/selectorsets/root.less";
// Rule // Rule
@import (less) "../src/rules/classic.less"; @import (less) "../src/rulesets/classic.less";

4
dist/colors-amber.module.less vendored
View file

@ -3,8 +3,8 @@
@import (less) "../src/mixins/hsl.less"; @import (less) "../src/mixins/hsl.less";
// Selector // Selector
@import (less) "../src/selectors/module.less"; @import (less) "../src/selectorsets/module.less";
// Rule // Rule
@import (less) "../src/rules/colors/colors-amber.less"; @import (less) "../src/rulesets/colors/colors-amber.less";

4
dist/colors-amber.root.less vendored
View file

@ -3,8 +3,8 @@
@import (less) "../src/mixins/hsl.less"; @import (less) "../src/mixins/hsl.less";
// Selector // Selector
@import (less) "../src/selectors/root.less"; @import (less) "../src/selectorsets/root.less";
// Rule // Rule
@import (less) "../src/rules/colors/colors-amber.less"; @import (less) "../src/rulesets/colors/colors-amber.less";

4
dist/colors-royalblue.module.less vendored
View file

@ -3,8 +3,8 @@
@import (less) "../src/mixins/hsl.less"; @import (less) "../src/mixins/hsl.less";
// Selector // Selector
@import (less) "../src/selectors/module.less"; @import (less) "../src/selectorsets/module.less";
// Rule // Rule
@import (less) "../src/rules/colors/colors-royalblue.less"; @import (less) "../src/rulesets/colors/colors-royalblue.less";

4
dist/colors-royalblue.root.less vendored
View file

@ -3,8 +3,8 @@
@import (less) "../src/mixins/hsl.less"; @import (less) "../src/mixins/hsl.less";
// Selector // Selector
@import (less) "../src/selectors/root.less"; @import (less) "../src/selectorsets/root.less";
// Rule // Rule
@import (less) "../src/rules/colors/colors-royalblue.less"; @import (less) "../src/rulesets/colors/colors-royalblue.less";

4
dist/fonts-fira-ghpages.module.less vendored
View file

@ -3,8 +3,8 @@
@import (less) "../src/mixins/hsl.less"; @import (less) "../src/mixins/hsl.less";
// Selector // Selector
@import (less) "../src/selectors/module.less"; @import (less) "../src/selectorsets/module.less";
// Rule // Rule
@import (less) "../src/rules/fonts/fonts-fira-ghpages.less"; @import (less) "../src/rulesets/fonts/fonts-fira-ghpages.less";

4
dist/fonts-fira-ghpages.root.less vendored
View file

@ -3,8 +3,8 @@
@import (less) "../src/mixins/hsl.less"; @import (less) "../src/mixins/hsl.less";
// Selector // Selector
@import (less) "../src/selectors/root.less"; @import (less) "../src/selectorsets/root.less";
// Rule // Rule
@import (less) "../src/rules/fonts/fonts-fira-ghpages.less"; @import (less) "../src/rulesets/fonts/fonts-fira-ghpages.less";

4
dist/fun.module.less vendored
View file

@ -3,8 +3,8 @@
@import (less) "../src/mixins/hsl.less"; @import (less) "../src/mixins/hsl.less";
// Selector // Selector
@import (less) "../src/selectors/module.less"; @import (less) "../src/selectorsets/module.less";
// Rule // Rule
@import (less) "../src/rules/fun.less"; @import (less) "../src/rulesets/fun.less";

4
dist/fun.root.less vendored
View file

@ -3,8 +3,8 @@
@import (less) "../src/mixins/hsl.less"; @import (less) "../src/mixins/hsl.less";
// Selector // Selector
@import (less) "../src/selectors/root.less"; @import (less) "../src/selectorsets/root.less";
// Rule // Rule
@import (less) "../src/rules/fun.less"; @import (less) "../src/rulesets/fun.less";

4
dist/glass.module.less vendored
View file

@ -3,8 +3,8 @@
@import (less) "../src/mixins/hsl.less"; @import (less) "../src/mixins/hsl.less";
// Selector // Selector
@import (less) "../src/selectors/module.less"; @import (less) "../src/selectorsets/module.less";
// Rule // Rule
@import (less) "../src/rules/glass.less"; @import (less) "../src/rulesets/glass.less";

4
dist/glass.root.less vendored
View file

@ -3,8 +3,8 @@
@import (less) "../src/mixins/hsl.less"; @import (less) "../src/mixins/hsl.less";
// Selector // Selector
@import (less) "../src/selectors/root.less"; @import (less) "../src/selectorsets/root.less";
// Rule // Rule
@import (less) "../src/rules/glass.less"; @import (less) "../src/rulesets/glass.less";

345
examples/index.html
View file

@ -29,11 +29,11 @@
<h1> <h1>
Bluelib Bluelib
</h1> </h1>
<div class="chapter-2" id="chapter-welcome"> <div class="chapter-1" id="chapter-welcome">
<h2> <h2>
Welcome to Bluelib! Welcome to Bluelib!
</h2> </h2>
<section class="panel box"> <section class="panel box" id="panel-what-is-bluelib">
<h3> <h3>
What is Bluelib? What is Bluelib?
</h3> </h3>
@ -48,66 +48,223 @@
</p> </p>
<div class="panel parenthesis float-bottom"> <div class="panel parenthesis float-bottom">
<p> <p>
This page is also used for development, therefore it uses un-minified sources and imports many development scripts. This page is also used for development, therefore it uses un-minified sources and imports some development scripts.
</p> </p>
<p> <p>
Do not judge the library efficiency from this page, or perform any benchmarks on it, as they will probably be wrong! Do not try to determine the performance of Bluelib from this page, as the development features are somewhat heavy on the browser!
</p> </p>
</div> </div>
</section> </section>
<section class="panel box"> </div>
<div class="chapter-2">
<section class="panel box" id="panel-index">
<h3> <h3>
Rulesets Table of contents
</h3> </h3>
<p> <ol>
Bluelib splits its features into rulesets, which can be enabled and disabled in this preview via the following <i>form</i>. <li><a href="#chapter-welcome">Welcome to Bluelib!</a></li>
</p> <li><a href="#chapter-targets">Rulesets, selectorsets, targets</a></li>
<form class="panel form-flex float-bottom"> <li><a href="#chapter-install">Installation and usage</a></li>
<label class="fade"> <li><a href="#chapter-panels">Panels</a></li>
<span>Base</span> <li><a href="#chapter-chapters">Chapters</a></li>
<div> <li><a href="#chapter-modifiers">Modifiers</a></li>
<input type="checkbox" checked name="bluelib-base" onChange="onRulesetChange(this)" disabled> <li><a href="#chapter-separators">Separators</a></li>
<small>Basic layout and styling</small> <li><a href="#chapter-lists">Lists</a></li>
</div> <li><a href="#chapter-glossaries">Glossaries</a></li>
<span></span> <li><a href="#chapter-text">Text elements</a></li>
</label> <li><a href="#chapter-tables">Tables</a></li>
<label> <li><a href="#chapter-images">Images</a></li>
<span>Classic</span> <li><a href="#chapter-inputs">Inputs</a></li>
<div> <li><a href="#chapter-forms">Forms</a></li>
<input type="checkbox" checked name="bluelib-classic" onChange="onRulesetChange(this)"> </ol>
<small>Round semi-transparent panels</small> </section>
</div> <section class="panel box" id="panel-glossary">
<span></span> <h3>
</label> Glossary
<label> </h3>
<span>Glass</span> <ul style="column-width: 12ex;">
<div> <li><a href="#dfn-abbreviation">Abbreviation</a></li>
<input type="checkbox" checked name="bluelib-glass" onChange="onRulesetChange(this)"> <li><a href="#dfn-anchor">Anchor</a></li>
<small>Tinted blurred glass panels</small> <li><a href="#dfn-annotation">Annotation, unarticulated</a></li>
</div> <li><a href="#dfn-area">Area</a></li>
<span></span> <li><a href="#dfn-attention">Bring attention</a></li>
</label> <li><a href="#dfn-bluelib">Bluelib</a></li>
<label class="fade"> <li><a href="#dfn-box">Box</a></li>
<span>Colors</span> <li><a href="#dfn-button">Button</a></li>
<select name="bluelib-colors" onChange="onRulesetChange(this)" disabled> <li><a href="#dfn-chapter">Chapter</a></li>
<option value="">[None]</option> <li><a href="#dfn-checkbox">Checkbox</a></li>
<option value="royalblue">Royal Blue</option> <li><a href="#dfn-citation">Citation</a></li>
<option value="amber">Gestione Amber</option> <li><a href="#dfn-code">Code</a></li>
</select> <li><a href="#dfn-color">Color</a></li>
<span><small>Color palette</small></span> <li><a href="#dfn-color-input">Color input</a></li>
</label> <li><a href="#dfn-definition">Definition</a></li>
<label class="fade"> <li><a href="#dfn-deleted">Deleted text</a></li>
<span>Fonts</span> <li><a href="#dfn-details">Details</a></li>
<select name="bluelib-colors" onChange="onRulesetChange(this)" disabled> <li><a href="#dfn-dialog">Dialog</a></li>
<option value="">[None]</option> <li><a href="#dfn-fade">Fade</a></li>
<option value="fira-ghpages">Fira (via GitHub Pages)</option> <li><a href="#dfn-field">Field</a></li>
</select> <li><a href="#dfn-file-input">File input</a></li>
<span><small>Font set</small></span> <li><a href="#dfn-float">Float</a></li>
</label> <li><a href="#dfn-form">Form</a></li>
</form> <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> </section>
</div> </div>
<div class="chapter-4"> <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" id="panel-rulesets">
<h3>
Available rulesets
</h3>
<dl>
<dt><label><input type="checkbox" disabled checked name="ruleset-base"> Base</label></dt>
<dd>
The base <i>ruleset</i>, providing the layout and basic high contrast theming.
</dd>
<dt><label><input type="checkbox" disabled checked name="ruleset-classic"> Classic</label></dt>
<dd>
Inspired by the older Bluelib versions, with semi-transparent panels and rounded borders.
</dd>
<dt><label><input type="checkbox" disabled checked name="ruleset-glass"> 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><input type="checkbox" disabled checked name="ruleset-fun"> 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><input type="radio" disabled checked name="ruleset-colors"> 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><input type="radio" disabled name="ruleset-colors"> 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><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><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><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>&lt;link rel=&quot;stylesheet&quot; href=&quot;https://unpkg.com/@steffo/bluelib@<var>VERSION</var>/dist/<var>RULESET</var>.<var>SELECTORSET</var>.css&quot; type=&quot;text/css&quot;/&gt;</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> <h2>
Panels Panels
</h2> </h2>
@ -302,7 +459,7 @@
To have a constant height, one has to be set manually. To have a constant height, one has to be set manually.
</p> </p>
</section> </section>
<section class="panel box"> <section class="panel box" id="panel-autosizing">
<h3> <h3>
Auto-sizing Auto-sizing
</h3> </h3>
@ -346,7 +503,7 @@
</p> </p>
</section> </section>
</div> </div>
<div class="chapter-3" id="chapter-status"> <div class="chapter-3" id="chapter-modifiers">
<h2> <h2>
Modifiers Modifiers
</h2> </h2>
@ -373,7 +530,7 @@
</div> </div>
</div> </div>
</section> </section>
<section class="panel box" id="paenl-mark"> <section class="panel box" id="panel-mark">
<h3> <h3>
Mark Mark
</h3> </h3>
@ -617,9 +774,9 @@
</div> </div>
<div class="chapter-1" id="chapter-text"> <div class="chapter-1" id="chapter-text">
<h2> <h2>
Text Text elements
</h2> </h2>
<section class="panel box"> <section class="panel box" id="panel-anchor">
<h3> <h3>
<u>A</u>nchors <u>A</u>nchors
</h3> </h3>
@ -640,7 +797,7 @@
</section> </section>
</div> </div>
<div class="chapter-4"> <div class="chapter-4">
<section class="panel box"> <section class="panel box" id="panel-idiomatic">
<h3> <h3>
<u>I</u>diomatic expressions <u>I</u>diomatic expressions
</h3> </h3>
@ -653,7 +810,7 @@
</p> </p>
</div> </div>
</section> </section>
<section class="panel box"> <section class="panel box" id="panel-emphasis">
<h3> <h3>
<u>Em</u>phasis <u>Em</u>phasis
</h3> </h3>
@ -666,7 +823,7 @@
</p> </p>
</div> </div>
</section> </section>
<section class="panel box"> <section class="panel box" id="panel-attention">
<h3> <h3>
<u>B</u>ring attention <u>B</u>ring attention
</h3> </h3>
@ -679,7 +836,7 @@
</p> </p>
</div> </div>
</section> </section>
<section class="panel box"> <section class="panel box" id="panel-strong">
<h3> <h3>
<u>Strong</u> importance <u>Strong</u> importance
</h3> </h3>
@ -692,7 +849,7 @@
</p> </p>
</div> </div>
</section> </section>
<section class="panel box"> <section class="panel box" id="panel-annotation">
<h3> <h3>
<u>U</u>narticulated annotations <u>U</u>narticulated annotations
</h3> </h3>
@ -705,7 +862,7 @@
</p> </p>
</div> </div>
</section> </section>
<section class="panel box"> <section class="panel box" id="panel-strike">
<h3> <h3>
<u>S</u>trike <u>S</u>trike
</h3> </h3>
@ -718,12 +875,12 @@
</p> </p>
</div> </div>
</section> </section>
<section class="panel box"> <section class="panel box" id="panel-insdel">
<h3> <h3>
<u>Ins</u>erted and <u>del</u>eted text <u>Ins</u>erted and <u>del</u>eted text
</h3> </h3>
<p> <p>
When comparing changes to a text, parts of it can be marked as <dfn id="dfn-inserted">inserted</dfn> or <dfn id="dfn-removed">removed</dfn>. 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> </p>
<div class="panel float-bottom"> <div class="panel float-bottom">
<h4 style="text-align: left;"> <h4 style="text-align: left;">
@ -735,7 +892,7 @@
</ul> </ul>
</div> </div>
</section> </section>
<section class="panel box"> <section class="panel box" id="panel-small">
<h3> <h3>
<u>Small</u> comment <u>Small</u> comment
</h3> </h3>
@ -751,9 +908,9 @@
</p> </p>
</div> </div>
</section> </section>
<section class="panel box"> <section class="panel box" id="panel-preformatted">
<h3> <h3>
Preformatted text <u>Pre</u>formatted text
</h3> </h3>
<p> <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. 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.
@ -769,9 +926,9 @@
# # "mmm#" "mmm" mm#mm mm#mm</pre> # # "mmm#" "mmm" mm#mm mm#mm</pre>
</div> </div>
</section> </section>
<section class="panel box"> <section class="panel box" id="panel-code">
<h3> <h3>
Code snippets Code
</h3> </h3>
<p> <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). 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).
@ -790,7 +947,7 @@
&lt;/div&gt;</code></pre> &lt;/div&gt;</code></pre>
</div> </div>
</section> </section>
<section class="panel box"> <section class="panel box" id="panel-sample">
<h3> <h3>
Sample input and output Sample input and output
</h3> </h3>
@ -809,7 +966,7 @@
</p> </p>
</div> </div>
</section> </section>
<section class="panel box"> <section class="panel box" id="panel-variable">
<h3> <h3>
Variables Variables
</h3> </h3>
@ -822,7 +979,7 @@
</p> </p>
</div> </div>
</section> </section>
<section class="panel box"> <section class="panel box" id="panel-quote">
<h3> <h3>
Quotes and citations Quotes and citations
</h3> </h3>
@ -836,7 +993,7 @@
</p> </p>
</div> </div>
</section> </section>
<section class="panel box"> <section class="panel box" id="panel-definition">
<h3> <h3>
Definitions Definitions
</h3> </h3>
@ -849,7 +1006,7 @@
</p> </p>
</div> </div>
</section> </section>
<section class="panel box"> <section class="panel box" id="panel-abbreviation">
<h3> <h3>
Abbreviations Abbreviations
</h3> </h3>
@ -865,12 +1022,12 @@
</p> </p>
</div> </div>
</section> </section>
<section class="panel box"> <section class="panel box" id="panel-ruby">
<h3> <h3>
Ruby Ruby
</h3> </h3>
<p> <p>
A <dfn id="dnf-ruby">ruby text</dfn> element is <b>text with small annotations above</b>, commonly used in East Asian texts. A <dfn id="dfn-ruby">ruby text</dfn> element is <b>text with small annotations above</b>, commonly used in East Asian texts.
</p> </p>
<div class="panel float-bottom"> <div class="panel float-bottom">
<p style="font-size: xx-large;"> <p style="font-size: xx-large;">
@ -1133,7 +1290,7 @@
<img class="image-limit-quarter" src="https://images.unsplash.com/photo-1593415553970-bd0145efc369" alt="Neon ice cream"/> <img class="image-limit-quarter" src="https://images.unsplash.com/photo-1593415553970-bd0145efc369" alt="Neon ice cream"/>
</section> </section>
</div> </div>
<div class="chapter-1" id="chapter-inputs-forms"> <div class="chapter-1" id="chapter-inputs">
<h2> <h2>
Inputs Inputs
</h2> </h2>
@ -1147,7 +1304,7 @@
</section> </section>
</div> </div>
<div class="chapter-2"> <div class="chapter-2">
<section class="panel box"> <section class="panel box" id="panel-field">
<h3> <h3>
Field Field
</h3> </h3>
@ -1232,7 +1389,7 @@
</p> </p>
</form> </form>
</section> </section>
<section class="panel box"> <section class="panel box" id="panel-area">
<h3> <h3>
Area Area
</h3> </h3>
@ -1248,7 +1405,7 @@
</p> </p>
</form> </form>
</section> </section>
<section class="panel box"> <section class="panel box" id="panel-select">
<h3> <h3>
Select Select
</h3> </h3>
@ -1275,7 +1432,7 @@
</p> </p>
</form> </form>
</section> </section>
<section class="panel box"> <section class="panel box" id="panel-multiselect">
<h3> <h3>
Multiselect Multiselect
</h3> </h3>
@ -1315,7 +1472,7 @@
</p> </p>
</form> </form>
</section> </section>
<section class="panel box"> <section class="panel box" id="panel-radio">
<h3> <h3>
Radio Radio
</h3> </h3>
@ -1355,7 +1512,7 @@
</p> </p>
</form> </form>
</section> </section>
<section class="panel box"> <section class="panel box" id="panel-checkbox">
<h3> <h3>
Checkbox Checkbox
</h3> </h3>
@ -1407,12 +1564,12 @@
</p> </p>
</form> </form>
</section> </section>
<section class="panel box"> <section class="panel box" id="panel-color">
<h3> <h3>
Color Color
</h3> </h3>
<p> <p>
A <dfn id="dfn-color-input">Color (Input)</dfn> is an <i>Input</i> which allows the user to select a RGB color. 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>
<p> <p>
Since browsers usually delegate the rendering of this element to the operating system, it cannot be styled. Since browsers usually delegate the rendering of this element to the operating system, it cannot be styled.
@ -1426,12 +1583,12 @@
</p> </p>
</form> </form>
</section> </section>
<section class="panel box"> <section class="panel box" id="panel-file">
<h3> <h3>
File File
</h3> </h3>
<p> <p>
A <dfn id="dfn-file-input">File</dfn> is an <i>Input</i> which allows the user to <b>upload a file</b> from their computer. 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>
<p> <p>
Since browsers usually delegate the rendering of this element to the operating system, it cannot be styled. Since browsers usually delegate the rendering of this element to the operating system, it cannot be styled.
@ -1445,7 +1602,7 @@
</p> </p>
</form> </form>
</section> </section>
<section class="panel box todo"> <section class="panel box todo" id="panel-range">
<h3> <h3>
Range Range
</h3> </h3>
@ -1462,7 +1619,7 @@
</p> </p>
</form> </form>
</section> </section>
<section class="panel box"> <section class="panel box" id="panel-button">
<h3> <h3>
Button Button
</h3> </h3>
@ -1485,7 +1642,7 @@
</form> </form>
</section> </section>
</div> </div>
<div class="chapter-1"> <div class="chapter-1" id="chapter-forms">
<h2> <h2>
Forms Forms
</h2> </h2>
@ -1497,12 +1654,12 @@
An <dfn id="dfn-form">form</dfn> is a non-interactive element which <b>positions <i>Inputs</i></b> in commonly used ways. An <dfn id="dfn-form">form</dfn> is a non-interactive element which <b>positions <i>Inputs</i></b> in commonly used ways.
</p> </p>
</section> </section>
<section class="panel box"> <section class="panel box" id="panel-form-flex">
<h3> <h3>
Flex form Flex form
</h3> </h3>
<p> <p>
A <dfn>flex form</dfn> is a <b>block form</b> aligning labels and inputs to a pseudo-grid. A <dfn id="dfn-form-flex">flex form</dfn> is a <b>block form</b> aligning labels and inputs to a pseudo-grid.
</p> </p>
<form class="panel form-flex"> <form class="panel form-flex">
<h4> <h4>

69
examples/index.js
View file

@ -1,69 +0,0 @@
let retrievedElements = false
let pageHead = null
let styleBase = null
let styleClassic = null
let styleGlass = null
let styleColors = null
let styleFonts = null
let checkboxBase = null
let checkboxClassic = null
let checkboxGlass = null
let selectColors = null
let selectFonts = null
function retrieveElements() {
if(retrievedElements) return
console.debug("Finding elements in the DOM...")
pageHead = document.querySelector("head")
styleBase = document.querySelector("#less\\:dist-base\\:root")
styleClassic = document.querySelector("#less\\:dist-classic\\:root")
styleGlass = document.querySelector("#less\\:dist-glass\\:root")
styleColors = document.querySelector("#less\\:dist-colors\\:root")
styleFonts = document.querySelector("#less\\:dist-fonts\\:root")
checkboxBase = document.querySelector("input[name='bluelib-base']")
checkboxClassic = document.querySelector("input[name='bluelib-classic']")
checkboxGlass = document.querySelector("input[name='bluelib-glass']")
selectColors = document.querySelector("select[name='bluelib-colors']")
selectFonts = document.querySelector("select[name='bluelib-fonts']")
retrievedElements = true
console.debug("Found all elements!")
}
function onRulesetChange(target) {
retrieveElements()
if(target === checkboxGlass) {
if(target.checked) {
pageHead.appendChild(styleGlass)
}
else {
styleGlass.remove()
}
}
if(target === checkboxClassic) {
if(target.checked) {
pageHead.appendChild(styleClassic)
}
else {
styleClassic.remove()
}
}
if(target === checkboxBase) {
if(target.checked) {
pageHead.appendChild(styleBase)
}
else {
styleBase.remove()
}
}
}

6
src/rules/base.less → src/rulesets/base.less
View file

@ -6,7 +6,7 @@
@{bluelib} { @{bluelib} {
/// ===== Body ===== /// ===== Body =====
/// The body element has some rules. /// The body element has some rulesets.
//<editor-fold desc="Rules: Body"> //<editor-fold desc="Rules: Body">
@ -31,7 +31,7 @@
//</editor-fold> //</editor-fold>
/// ===== All ===== /// ===== All =====
/// By default, browsers style elements with some weird rules. /// By default, browsers style elements with some weird rulesets.
/// This is an attempt to correct them, and to implement some Bluelib magic. /// This is an attempt to correct them, and to implement some Bluelib magic.
//<editor-fold desc="Rules: All"> //<editor-fold desc="Rules: All">
@ -70,7 +70,7 @@
//</editor-fold> //</editor-fold>
/// ===== Page ===== /// ===== Page =====
/// These rules apply to the four page areas: main, aside, header and footer /// These rulesets apply to the four page areas: main, aside, header and footer
//<editor-fold desc="Rules: Page"> //<editor-fold desc="Rules: Page">

0
src/rules/classic.less → src/rulesets/classic.less
View file

0
src/rules/colors/colors-amber.less → src/rulesets/colors/colors-amber.less
View file

0
src/rules/colors/colors-royalblue.less → src/rulesets/colors/colors-royalblue.less
View file

0
src/rules/fonts/fonts-fira-ghpages.less → src/rulesets/fonts/fonts-fira-ghpages.less
View file

0
src/rules/fun.less → src/rulesets/fun.less
View file

0
src/rules/glass.less → src/rulesets/glass.less
View file

0
src/selectors/module.less → src/selectorsets/module.less
View file

0
src/selectors/root.less → src/selectorsets/root.less
View file