From ac65c603ad517f1e18f737047bad347308e60399 Mon Sep 17 00:00:00 2001 From: Stefano Pigozzi Date: Fri, 28 Oct 2022 16:30:13 +0200 Subject: [PATCH] Remove unused layout div --- examples/index.css | 2 +- examples/index.html | 3248 +++++++++++++++++++++---------------------- 2 files changed, 1624 insertions(+), 1626 deletions(-) diff --git a/examples/index.css b/examples/index.css index 9e4bab6..b6e49dd 100644 --- a/examples/index.css +++ b/examples/index.css @@ -27,7 +27,7 @@ #body .chapter-7 > .panel, #body .chapter-8 > .panel, #body .chapter-9 > .panel { - min-width: 200px; + min-width: 360px; } #body .panel .chapter-1 > .panel, diff --git a/examples/index.html b/examples/index.html index 9595e62..55eee88 100644 --- a/examples/index.html +++ b/examples/index.html @@ -28,364 +28,367 @@ Bluelib -
-
-
-

- Bluelib -

-
-

- Welcome to Bluelib! -

-
-

- What is Bluelib? -

+
+
+

+ Bluelib +

+
+

+ Welcome to Bluelib! +

+
+

+ What is Bluelib? +

+

+ Bluelib is a modular CSS library for web pages which aims to provide great customization and flexibility while trying to keep HTML as "basic" as possible. +

+

+ This page itself acts both as a documentation of the library and as a live preview of its capabilities. +

+

+ If you're on a browser which supports that, you can right click any element of this page and then click Inspect Element to see how something is done. +

+

- Bluelib is a modular CSS library for web pages which aims to provide great customization and flexibility while trying to keep HTML as "basic" as possible. + This page is also used for development, therefore it uses un-minified sources and imports some development scripts.

- This page itself acts both as a documentation of the library and as a live preview of its capabilities. + Do not try to determine the performance of Bluelib from this page, as the development features are somewhat heavy on the browser!

+
+
+
+
+
+

+ Table of contents +

+
    +
  1. Welcome to Bluelib!
    2. +
  2. Rulesets, selectorsets, targets
    3. +
  3. Installation and usage
    4. +
  4. Panels
    5. +
  5. Chapters
    6. +
  6. Modifiers
    7. +
  7. Separators
    8. +
  8. Lists
    9. +
  9. Glossaries
    10. +
  10. Text elements
    11. +
  11. Tables
    12. +
  12. Images
    13. +
  13. Inputs
    14. +
  14. Forms
    15. +
+
+
+

+ Glossary +

+ +
+
+
+

+ Rulesets, selectorsets, targets +

+
+

+ Targets +

+

+ A Bluelib target is a CSS document where CSS rulesets of a certain type are grouped together. +

+

+ It is composed by two parts: the ruleset, determining the CSS rules to use, and the selectorset, determining the elements to apply the CSS rules on. +

+
+

+ Targets always have a predictable name, which is: +

+

- If you're on a browser which supports that, you can right click any element of this page and then click Inspect Element to see how something is done. + dist/RULESET.SELECTORSET.css

-
-

- This page is also used for development, therefore it uses un-minified sources and imports some development scripts. -

-

- Do not try to determine the performance of Bluelib from this page, as the development features are somewhat heavy on the browser! -

-
-
-
-
-
-

- Table of contents -

-
    -
  1. Welcome to Bluelib!
    2. -
  2. Rulesets, selectorsets, targets
    3. -
  3. Installation and usage
    4. -
  4. Panels
    5. -
  5. Chapters
    6. -
  6. Modifiers
    7. -
  7. Separators
    8. -
  8. Lists
    9. -
  9. Glossaries
    10. -
  10. Text elements
    11. -
  11. Tables
    12. -
  12. Images
    13. -
  13. Inputs
    14. -
  14. Forms
    15. -
-
-
-

- Glossary -

- -
-
-
-

- Rulesets, selectorsets, targets -

-
-

- Targets -

+
+

+ Be sure to choose the ones matching your needs! +

+
+

+ By running dist/_build.sh, new targets are generated and compiled from Less to CSS. +

+

+ The cartesian product is applied between all rulesets in src/rulesets and all selectorsets in src/selectorsets, compiling a new target for each pair. +

+
+
+

+ Available rulesets +

+
+
+
+ The base ruleset, providing the layout and basic high contrast theming. +
+
+
+ Inspired by the older Bluelib versions, with semi-transparent panels and rounded borders. +
+
+
+ Made to celebrate the addition of backdrop-filter to Firefox, makes panels have a stained glass background. +
+
+
+ Experimental ruleset with bizzare or buggy but fun rules. Unsupported, do not use in production! +
+
Colors
+
+
+
+
+ Steffo's signature color theme, based upon RYG⁵'s logo colors. +
+
+
+ Nemesis' own color theme, with a "coffee-like" look. +
+
+
+
Fonts
+
+
+
+
+ Font theme based upon Mozilla's Fira font. +
+
+
+
+
+
+

+ Available selectorsets +

+
+
+
+ Simple selectors for usage in plain HTML pages, with short and human-friendly class names. +
+
+
+ All selectors use class names, allowing the usage of the target with CSS Modules. Useful for React or similar web app projects. +
+
+
+
+
+

+ Installation and usage +

+
+

+ Via UNPKG +

+

+ The easiest way to use Bluelib on your website is by using UNPKG. +

+

+ Simply link the stylesheets in the header of your project like this: +

+
+ <link rel="stylesheet" href="https://unpkg.com/@steffo/bluelib@VERSION/dist/RULESET.SELECTORSET.css" type="text/css"/> +
+
+
+

+ Coming soon +

+

+ More installation methods coming soon! +

+
+
+
+

+ Panels +

+
+

+ Panel +

+

+ A Panel is a container styled with a slight background color and no borders. +

+
+ Hello world! I am a Panel! +
+
+
+

+ Box +

+

+ A Box is a container adding borders of all four sides to the base appearence of a Panel. +

+
+ This Box contains a hidden Snake. 🐍 +
+
+
+

+ Dialog +

+

+ A Dialog is a container adding a left border to the base appearence of a Panel. +

+
+ Snake? Snake??? SNAKEEEEEEE! +
+
+
+

+ Parenthesis +

+

+ A Parenthesis is a container styled as a Panel and with smaller text. +

+
+ I think we lost the Snake... +
+
+
+

+ Panel usage +

+

+ When using Bluelib, text should always be either an header or inside a Panel. +

+

+ Since Panels often denote "sections" of text, they should usually be <section> elements. +

+

+ When they are only used cosmetically, <div> elements should be used instead. +

+

+ When used to create forms, they may also be <form> elements. +

+
+
+

+ Box usage +

+

+ A Box creates a visible separation between the content inside it and the content outside it, and should be used when this separation is desired, like when describing a topic (like here). +

+

+ To achieve the best visual style, Boxes should always be the outmost panels: you should never place a Box inside a Panel or a Dialog, but you can place one inside another Box. +

+
+
+

+ Dialog usage +

+

+ A Dialog creates a visible indentation of the content inside it, and should be used when this indentation is desired, like in quotes or examples. +

+

+ When containing a quote, they should use <blockquote> elements. +

+

+ Like Boxes, Dialogs should never be placed into containers with less borders than them, such as Panels. +

+
+
+

+ Parenthesis usage +

+

+ A Parenthesis removes importance from its contents, and therefore makes for a great container for notes or additional information about a topic. +

+

+ Having no borders, they should be considered as Panels when placing them: never add Boxes or Dialogs inside them. +

+
+
+
+
+

+ Nesting +

+

+ As you have seen in the sections before, panels can be nested many times (until the text becomes undistinguishable)! +

+

- A Bluelib target is a CSS document where CSS rulesets of a certain type are grouped together. -

-

- It is composed by two parts: the ruleset, determining the CSS rules to use, and the selectorset, determining the elements to apply the CSS rules on. -

-
-

- Targets always have a predictable name, which is: -

-
-

- dist/RULESET.SELECTORSET.css -

-
-

- Be sure to choose the ones matching your needs! -

-
-

- By running dist/_build.sh, new targets are generated and compiled from Less to CSS. -

-

- The cartesian product is applied between all rulesets in src/rulesets and all selectorsets in src/selectorsets, compiling a new target for each pair. -

-
-
-

- Available rulesets -

-
-
-
- The base ruleset, providing the layout and basic high contrast theming. -
-
-
- Inspired by the older Bluelib versions, with semi-transparent panels and rounded borders. -
-
-
- Made to celebrate the addition of backdrop-filter to Firefox, makes panels have a stained glass background. -
-
-
- Experimental ruleset with bizzare or buggy but fun rules. Unsupported, do not use in production! -
-
Colors
-
-
-
-
- Steffo's signature color theme, based upon RYG⁵'s logo colors. -
-
-
- Nemesis' own color theme, with a "coffee-like" look. -
-
-
-
Fonts
-
-
-
-
- Font theme based upon Mozilla's Fira font. -
-
-
-
-
-
-

- Available selectorsets -

-
-
-
- Simple selectors for usage in plain HTML pages, with short and human-friendly class names. -
-
-
- All selectors use class names, allowing the usage of the target with CSS Modules. Useful for React or similar web app projects. -
-
-
-
-
-

- Installation and usage -

-
-

- Via UNPKG -

-

- The easiest way to use Bluelib on your website is by using UNPKG. -

-

- Simply link the stylesheets in the header of your project like this: -

-
- <link rel="stylesheet" href="https://unpkg.com/@steffo/bluelib@VERSION/dist/RULESET.SELECTORSET.css" type="text/css"/> -
-
-
-

- Coming soon -

-

- More installation methods coming soon! -

-
-
-
-

- Panels -

-
-

- Panel -

-

- A Panel is a container styled with a slight background color and no borders. -

-
- Hello world! I am a Panel! -
-
-
-

- Box -

-

- A Box is a container adding borders of all four sides to the base appearence of a Panel. -

-
- This Box contains a hidden Snake. 🐍 -
-
-
-

- Dialog -

-

- A Dialog is a container adding a left border to the base appearence of a Panel. -

-
- Snake? Snake??? SNAKEEEEEEE! -
-
-
-

- Parenthesis -

-

- A Parenthesis is a container styled as a Panel and with smaller text. -

-
- I think we lost the Snake... -
-
-
-

- Panel usage -

-

- When using Bluelib, text should always be either an header or inside a Panel. -

-

- Since Panels often denote "sections" of text, they should usually be <section> elements. -

-

- When they are only used cosmetically, <div> elements should be used instead. -

-

- When used to create forms, they may also be <form> elements. -

-
-
-

- Box usage -

-

- A Box creates a visible separation between the content inside it and the content outside it, and should be used when this separation is desired, like when describing a topic (like here). -

-

- To achieve the best visual style, Boxes should always be the outmost panels: you should never place a Box inside a Panel or a Dialog, but you can place one inside another Box. -

-
-
-

- Dialog usage -

-

- A Dialog creates a visible indentation of the content inside it, and should be used when this indentation is desired, like in quotes or examples. -

-

- When containing a quote, they should use <blockquote> elements. -

-

- Like Boxes, Dialogs should never be placed into containers with less borders than them, such as Panels. -

-
-
-

- Parenthesis usage -

-

- A Parenthesis removes importance from its contents, and therefore makes for a great container for notes or additional information about a topic. -

-

- Having no borders, they should be considered as Panels when placing them: never add Boxes or Dialogs inside them. -

-
-
-
-
-

- Nesting -

-

- As you have seen in the sections before, panels can be nested many times (until the text becomes undistinguishable)! + Like this!

- Like this! + How deep does this Panel hole go?

- How deep does this Panel hole go? + BWOON.

@@ -396,1330 +399,1325 @@ BWOON.

-

- BWOON. -

-
- - - PANELCEPTION. - - -
+ + + PANELCEPTION. + +
- -
-
-

- Chapters -

-
-

- Chapter -

-

- A chapter is a grouping of an heading and multiple panels containing tightly related information. -

-

- They split their children into a preset amount of columns: this one, for example, splits panels into two columns. -

-

- The maximum number of columns in a chapter is 9; beyond that, you'll need to write your own chapter code. -

-
-
-

- Panel heights -

-

- In a chapter, all panels on a row inherit the height of the tallest panel in it, so that no empty space is left. -

-
-
-

- Element floats -

-

- A float is a utility class to align items in panels without having to write CSS. -

-

- For example, if a panel has some empty space, elements can be made to float to the bottom, which can be useful for example for buttons in sibling panels. -

-
-
-

- Auto-wrapping -

-

- Panels in a numbered chapter will automatically wrap if their contents won't fit horizontally. -

-

- Wrapped panels' heights ignore the height of panels in other rows. -

-

- To have a constant height, one has to be set manually. -

-
-
-

- Auto-sizing -

-

- Panels in a "zero" chapter will instead automatically resize to fit everything in a single row. -

-
-
- 1 -
-
- 2 -
-
- 3 -
-
- 4 -
-
- 5 -
-
- 6 -
-
- 7 -
-
- 8 -
-
- 9 -
-
- 10 -
+
+
+
+
+

+ Chapters +

+
+

+ Chapter +

+

+ A chapter is a grouping of an heading and multiple panels containing tightly related information. +

+

+ They split their children into a preset amount of columns: this one, for example, splits panels into two columns. +

+

+ The maximum number of columns in a chapter is 9; beyond that, you'll need to write your own chapter code. +

+
+
+

+ Panel heights +

+

+ In a chapter, all panels on a row inherit the height of the tallest panel in it, so that no empty space is left. +

+
+
+

+ Element floats +

+

+ A float is a utility class to align items in panels without having to write CSS. +

+

+ For example, if a panel has some empty space, elements can be made to float to the bottom, which can be useful for example for buttons in sibling panels. +

+
+
+

+ Auto-wrapping +

+

+ Panels in a numbered chapter will automatically wrap if their contents won't fit horizontally. +

+

+ Wrapped panels' heights ignore the height of panels in other rows. +

+

+ To have a constant height, one has to be set manually. +

+
+
+

+ Auto-sizing +

+

+ Panels in a "zero" chapter will instead automatically resize to fit everything in a single row. +

+
+
+ 1
-

- To set a constant width, one has to be set manually. -

-
-
-
-

- Modifiers -

-
-

- Fade -

+
+ 2 +
+
+ 3 +
+
+ 4 +
+
+ 5 +
+
+ 6 +
+
+ 7 +
+
+ 8 +
+
+ 9 +
+
+ 10 +
+
+

+ To set a constant width, one has to be set manually. +

+ + +
+

+ Modifiers +

+
+

+ Fade +

+

+ The fade modifier reduces the opacity of the elements it is applied to. +

+

- The fade modifier reduces the opacity of the elements it is applied to. + I'm a faded box!

-
+

- I'm a faded box! + I'm faded too!

-
+

- I'm faded too! + But they can be faded more.

-
-

- But they can be faded more. -

-
-
-
-

- Mark -

+
+ +
+

+ Mark +

+

+ The mark modifier distinguishes the elements it is applied to from the surrounding ones by applying a strong color contrast. +

+

- The mark modifier distinguishes the elements it is applied to from the surrounding ones by applying a strong color contrast. + Think of it like an highlighter, but for anything!

-
+

- Think of it like an highlighter, but for anything! + Which can be nested to negate its effect.

- Which can be nested to negate its effect. + Up to 3 times and not any more.

-
-

- Up to 3 times and not any more. -

-
-
-
-

- To do -

+ +
+
+

+ To do +

+

+ The todo modifier emphasises that the contents of the elements it is applied to are not correct or final. +

+

- The todo modifier emphasises that the contents of the elements it is applied to are not correct or final. + Like this!

-
+

- Like this! + As with other modifiers, it is inherited.

-
+

- As with other modifiers, it is inherited. -

-
-

- And it does nothing if reapplied. -

-
-
-
-
-
-

- Color modifiers -

-

- The color modifiers change the colors of the elements they are applied to. -

-
-
-

- Red -

-

- * warns angrily! -

-
-
-

- Yellow -

-

- * warns. -

-
-
-

- Green -

-

- * is a success! -

-
-
-

- Cyan -

-

- * informs... -

-
-
-

- Blue -

-

- * annotates -

-
-
-

- Magenta -

-

- * asks a question? + And it does nothing if reapplied.

-
- -
-

- Separators -

-
-

- Separator -

-

- A separator is a horizontal line that fills all the horizontal space available on a panel, forcing a line wrap. -

-
-
- Top Text -
-
-
-

- Light separator -

-

- A light separator is a less eye-catching separator, to be used if the regular separator distracts too much from the flow of the text. -

-
-
- Bottom Text -
-
-
-

- Heavy separator -

-

- A heavy separator is a very eye-catching separator, to be used if the regular separator isn't apparent enough. -

-
-
- Bottom Text 2: Electric Boogaloo -
-
-
-
-

- Lists -

-
-

- Ordered list -

-

- A ordered list displays a series of items whose order is relevant. -

-
    -
  1. First
    2. -
  2. Second
    3. -
  3. Third
    4. -
  4. Fourth
    5. -
  5. Fifth
    6. -
  6. Sixth
    7. -
  7. Seventh
    8. -
  8. Eight
    9. -
  9. Ninth
    10. -
  10. Tenth
    11. -
  11. Eleventh
    12. -
  12. Twelfth
    13. -
-
-
-

- Unordered list -

-

- An unordered list displays a series of items whose order is irrelevant. -

-
    -
  • First
    • -
  • Second
    • -
  • Third
    • -
  • Fourth
    • -
  • Fifth
    • -
  • Sixth
    • -
  • Seventh
    • -
  • Eight
    • -
  • Ninth
    • -
  • Tenth
    • -
  • Eleventh
    • -
  • Twelfth
    • -
-
-
-
-

- Glossaries -

-
-

- Definition list -

-

- A definition list displays a series of term-description pairs. -

-
-
- Term -
-
- Description -
-
- Other term -
-
- Other description -
-
-
-
-

- Collapsible details -

-

- A details element hides its contents, displaying only a summary until either the marker or the summary itself is activated. -

-
- Something -

- Something else -

-
-
- Something more -

- Something different -

-
-
-
-
-

- Text elements -

-
-

- Anchors -

-

- An anchor is an interactable element which can be clicked to go to a different page, or a different part of the same page, or to perform an action with a different application! -

-
-

- Do you want to go to example.org? -

-

- Or perhaps to the chapter about glossaries? -

-

- Or perhaps to download Big Buck Bunny with a torrent client? -

-
-
-
-
-
-

- Idiomatic expressions -

-

- An idiomatic expression should be used when a domain-specific term is used. -

-
-

- This is an idiomatic expression. -

-
-
-
-

- Emphasis -

-

- An emphasis should be used when a certain word should be stressed more than the others in a text. -

-
-

- You're doing what?! -

-
-
-
-

- Bring attention -

-

- An attention-bringer element denotes parts of text as more important than the others. -

-
-

- I used attention-bringers basically everywhere in this page. -

-
-
-
-

- Strong importance -

-

- A strong importance element denotes parts of text that are even more important than the ones denoted by attention-bringers. -

-
-

- Pls notice me senpai!!1! -

-
-
-
-

- Unarticulated annotations -

-

- An unarticulated annotation denotes parts of text that were given an annotation without any comment. -

-
-

- Just look at the headers of level 3 of these panels! -

-
-
-
-

- Strike -

-

- A strike marks a part of text as incorrect. -

-
-

- I'm plotting to conquer the world completely innocent and not an evil villain! -

-
-
-
-

- Inserted and deleted text -

-

- When comparing changes to a text, parts of it can be marked as inserted or deleted. -

-
-

- Bluelib 5.0.0 -

-
    -
  • Added: more bugs
    • -
  • Removed: cool features
    • -
-
-
-
-

- Small comment -

-

- A small comment element denotes a part of a text as less important than the others. -

-

- It can be considered the opposite of attention-bringers, and similar to the parenthesis panel. -

-
-

- Bluelib is great! I'm joking, of course. -

-
-
-
-

- Preformatted text -

-

- A preformatted text element denotes text where lines and positioning are significant; this prevents them from being rearranged by the browser. -

-

- It should be used for poetry, code, ASCII art, kaomoji, etc. -

-
- 
   mm    mmmm    mmm  mmmmm  mmmmm
-   ##   #"   " m"   "   #      #
-  #  #  "#mmm  #        #      #
-  #mm#      "# #        #      #
- #    # "mmm#"  "mmm" mm#mm  mm#mm
-
-
-
-

- Code -

-

- A code element denotes that its contents are some kind of code (probably belonging to a programming language). -

-

- If displayed as a block instead of inline, it should be used with a preformatted text element. -

-
-

- How to create a section.panel with Bluelib: -

- 
<div class="panel">
-    <p>
-        Contents
-    </p>
-</div>
-
-
-
-

- Sample input and output -

-

- Input samples and output samples from a computer have elements which denote them, and are formatted appropriately. -

-

- A sample inside another creates emphasises the individual element, creating a combination. -

-
-

- If you press Ctrl+Alt+Del, something will happen! -

-

- If you're on Windows, a menu will appear, and one of the options will say Task Manager. -

-
-
-
-

- Variables -

-

- A variable denotes a placeholder for something in a formula or algorithm. -

-
-

- Sum: Whatever + Anything = Something -

-
-
-
-

- Quotes and citations -

-

- A quote element indicates an inline quote, and may be optionally include a citation element indicating the source of the quote. -

-
-

- Objection!
- —Phoenix Wright, Ace Attorney -

-
-
-
-

- Definitions -

-

- A definition element indicates the term that is being defined in the contained paragraph. -

-
-

- This definition example is getting a bit too meta for my tastes. -

-
-
-
-

- Abbreviations -

-

- An abbreviation element marks its contents as an acronym or abbreviation and allows the user to view the expanded abbreviation by hovering it with the mouse. -

-

- Note that no mobile browsers currently support this feature, so you'll have to manually provide an alternative for mobile users to see the full abbreviation. -

-
-

- Two companies against each other: BLU vs. RED! -

-
-
-
-

- Ruby -

-

- A ruby text element is text with small annotations above, commonly used in East Asian texts. -

-
-

- - Mo /ˈmɒ/ - de /dɪ/ - na /nə/ - -

-

- - 漢 (kan) - 字 (ji) - -

-

- - 明日 (ashita) - -

-
-
-
-
-

- Tables -

-
-

- Table -

-

- A table is an element whose children are aligned in a grid. -

- - - - - - - - - - - - - - - - - - - - - -
EmojiMeaning
🙂Slightly Smiling Face
🌑New Moon
🌚New Moon with Face
-
-
-

- Table caption -

-

- Tables can have captions attached to their top. -

- - - - - - - - - - - - - - - - - - - - - - -
- Apple emoji meanings -
EmojiMeaning
🍎Red Apple
🍏Green Apple
Hopefully a square with F8FF written inside it
-

- Tables can also have headings and captions attached to their bottom. -

- - - - - - - - - - - - - - -
- Pear emoji meanings -
🍐Pear
EmojiMeaning
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

- Table panels -

-

- A table panel is a special table which is rendered as a panel. -

-

- This table in particular is rendered as a box panel, and is about what two brothers think of the following objects: -

-
MarioLuigi
TablesThey're cool and allow you to do cool stuffThey need chairs to be useful
FlexboxesThey're very usefulNot enough flexible for me
GridsI love themBleargh
Overall<30/10
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-

- Table dialogs -

-

- Panel tables can also be dialogs and parentheses. -

-

- This table in particular is a dialog panel, and is about example features for a robot: -

-
FeatureDescription
BaseAll the base features of your home robot!
ExtraEverything a robot should be able to do, plus an infinite bubblewrap dispenser!
SuperThe robot is now armed with a non-free printer, and is ready to conquer the world!
UltimateA time machine has been embedded into the robot, and it is free to use it at will.
- - - - - - - - - - - - - - - - - - - -
-

- Cell modifiers -

-

- Cells in tables have modifiers applied like all elements. -

-

- This table in particular is for a game of tic-tac-toe. -

-
OX
XXO
XO
-
-
-

- Images -

-
-

- Default -

-

- Images are automatically centered and resized to fit the panel they are in. -

- Neon Ice Cream -
-
-

- Limited -

-

- Images can be limited to prevent them from taking up too much screen space, like the previous one did. -

-
-

- Half -

-

- The following image has a limit of half the vertical viewport: -

- Neon ice cream -
-

- Quarter -

-

- The following image has a limit of a quarter of the vertical viewport: -

- Neon ice cream -
-
-
-

- Inputs -

-
-

- Input -

-

- An Input is an interactive element which allows the user to interact with the web page. -

-
-
-
-
-

- Field -

-

- A Field is an Input which allows the user to enter single-line free-form text. -

-
-

- -

-

- -

-

- -

-
-
-

- Special types of Fields -

-

- A Field may require a particular type of data, such as an email or a phone number. -

-
-

- -

-

- -

-

- -

-

- -

-

- -

-

- -

-

- -

-

- -

-
-
-
-

- Area -

-

- An Area is a resizable Input which allows the user to enter multi-line free-form text. -

-
-

- -

-
-
-
-

- Select -

-

- A Select is an Input which allow the user to select between one of multiple options. -

-
-

- -

-
-
-
-

- Multiselect -

-

- A Multiselect is an Input which allows the user to enable or disable multiple options. -

-

- Be aware that the average user will probably not know how to interact with the Multiselect: to select options not adjacent to each other on a desktop browser, it requires holding the Ctrl key. -

-
-

- -

-
-
-
-

- Radio -

-

- Radios are Inputs which, like a Select, allow the user to select between one of multiple options when grouped together. -

-
-

- -

-

- -

-

- -

-

- -

-

- -

-
-
-
-

- Checkbox -

-

- Checkboxes are Inputs which, like a Multiselect, allows the user to enable or disable multiple options when grouped together. -

-
-

- -

-

- -

-

- -

-

- -

-

- -

-

- -

-

- -

-
-
-
-

- Color -

-

- A color input is an Input which allows the user to select a RGB color. -

-

- Since browsers usually delegate the rendering of this element to the operating system, it cannot be styled. -

-
-

- -

-
-
-
-

- File -

-

- A file input is an Input which allows the user to upload a file from their computer. -

-

- Since browsers usually delegate the rendering of this element to the operating system, it cannot be styled. -

-
-

- -

-
-
-
-

- Range -

-

- A Range is an Input which allows the user to inaccurately select a value from a given range. -

-
-

- -

-
-
-
-

- Button -

-

- A Button is an Input which the user can click to trigger an action. -

-
-

- -

-

- - -

-
-
-
-
-

- Forms -

-
-

- Form -

-

- An form is a non-interactive element which positions Inputs in commonly used ways. -

-
-
-

- Flex form -

-

- A flex form is a block form aligning labels and inputs to a pseudo-grid. -

-
+
+ +
+

+ Color modifiers +

+

+ The color modifiers change the colors of the elements they are applied to. +

+
+

- Life University Enrolment Form + Red

- Please enter your personal details here: + * warns angrily!

- - - +
+
+

+ Yellow +

- Now, please enter some information about yourself: + * warns.

+
+
+

+ Green +

+

+ * is a success! +

+
+
+

+ Cyan +

+

+ * informs... +

+
+
+

+ Blue +

+

+ * annotates +

+
+
+

+ Magenta +

+

+ * asks a question? +

+
+
+
+ +
+

+ Separators +

+
+

+ Separator +

+

+ A separator is a horizontal line that fills all the horizontal space available on a panel, forcing a line wrap. +

+
+
+ Top Text +
+
+
+

+ Light separator +

+

+ A light separator is a less eye-catching separator, to be used if the regular separator distracts too much from the flow of the text. +

+
+
+ Bottom Text +
+
+
+

+ Heavy separator +

+

+ A heavy separator is a very eye-catching separator, to be used if the regular separator isn't apparent enough. +

+
+
+ Bottom Text 2: Electric Boogaloo +
+
+
+
+

+ Lists +

+
+

+ Ordered list +

+

+ A ordered list displays a series of items whose order is relevant. +

+
    +
  1. First
    2. +
  2. Second
    3. +
  3. Third
    4. +
  4. Fourth
    5. +
  5. Fifth
    6. +
  6. Sixth
    7. +
  7. Seventh
    8. +
  8. Eight
    9. +
  9. Ninth
    10. +
  10. Tenth
    11. +
  11. Eleventh
    12. +
  12. Twelfth
    13. +
+
+
+

+ Unordered list +

+

+ An unordered list displays a series of items whose order is irrelevant. +

+
    +
  • First
    • +
  • Second
    • +
  • Third
    • +
  • Fourth
    • +
  • Fifth
    • +
  • Sixth
    • +
  • Seventh
    • +
  • Eight
    • +
  • Ninth
    • +
  • Tenth
    • +
  • Eleventh
    • +
  • Twelfth
    • +
+
+
+
+

+ Glossaries +

+
+

+ Definition list +

+

+ A definition list displays a series of term-description pairs. +

+
+
+ Term +
+
+ Description +
+
+ Other term +
+
+ Other description +
+
+
+
+

+ Collapsible details +

+

+ A details element hides its contents, displaying only a summary until either the marker or the summary itself is activated. +

+
+ Something +

+ Something else +

+
+
+ Something more +

+ Something different +

+
+
+
+
+

+ Text elements +

+
+

+ Anchors +

+

+ An anchor is an interactable element which can be clicked to go to a different page, or a different part of the same page, or to perform an action with a different application! +

+
+

+ Do you want to go to example.org? +

+

+ Or perhaps to the chapter about glossaries? +

+

+ Or perhaps to download Big Buck Bunny with a torrent client? +

+
+
+
+
+
+

+ Idiomatic expressions +

+

+ An idiomatic expression should be used when a domain-specific term is used. +

+
+

+ This is an idiomatic expression. +

+
+
+
+

+ Emphasis +

+

+ An emphasis should be used when a certain word should be stressed more than the others in a text. +

+
+

+ You're doing what?! +

+
+
+
+

+ Bring attention +

+

+ An attention-bringer element denotes parts of text as more important than the others. +

+
+

+ I used attention-bringers basically everywhere in this page. +

+
+
+
+

+ Strong importance +

+

+ A strong importance element denotes parts of text that are even more important than the ones denoted by attention-bringers. +

+
+

+ Pls notice me senpai!!1! +

+
+
+
+

+ Unarticulated annotations +

+

+ An unarticulated annotation denotes parts of text that were given an annotation without any comment. +

+
+

+ Just look at the headers of level 3 of these panels! +

+
+
+
+

+ Strike +

+

+ A strike marks a part of text as incorrect. +

+
+

+ I'm plotting to conquer the world completely innocent and not an evil villain! +

+
+
+
+

+ Inserted and deleted text +

+

+ When comparing changes to a text, parts of it can be marked as inserted or deleted. +

+
+

+ Bluelib 5.0.0 +

+
    +
  • Added: more bugs
    • +
  • Removed: cool features
    • +
+
+
+
+

+ Small comment +

+

+ A small comment element denotes a part of a text as less important than the others. +

+

+ It can be considered the opposite of attention-bringers, and similar to the parenthesis panel. +

+
+

+ Bluelib is great! I'm joking, of course. +

+
+
+
+

+ Preformatted text +

+

+ A preformatted text element denotes text where lines and positioning are significant; this prevents them from being rearranged by the browser. +

+

+ It should be used for poetry, code, ASCII art, kaomoji, etc. +

+
+ 
   mm    mmmm    mmm  mmmmm  mmmmm
+##   #"   " m"   "   #      #
+#  #  "#mmm  #        #      #
+#mm#      "# #        #      #
+#    # "mmm#"  "mmm" mm#mm  mm#mm
+
+
+
+

+ Code +

+

+ A code element denotes that its contents are some kind of code (probably belonging to a programming language). +

+

+ If displayed as a block instead of inline, it should be used with a preformatted text element. +

+
+

+ How to create a section.panel with Bluelib: +

+ 
<div class="panel">
+<p>
+    Contents
+</p>
+</div>
+
+
+
+

+ Sample input and output +

+

+ Input samples and output samples from a computer have elements which denote them, and are formatted appropriately. +

+

+ A sample inside another creates emphasises the individual element, creating a combination. +

+
+

+ If you press Ctrl+Alt+Del, something will happen! +

+

+ If you're on Windows, a menu will appear, and one of the options will say Task Manager. +

+
+
+
+

+ Variables +

+

+ A variable denotes a placeholder for something in a formula or algorithm. +

+
+

+ Sum: Whatever + Anything = Something +

+
+
+
+

+ Quotes and citations +

+

+ A quote element indicates an inline quote, and may be optionally include a citation element indicating the source of the quote. +

+
+

+ Objection!
+ —Phoenix Wright, Ace Attorney +

+
+
+
+

+ Definitions +

+

+ A definition element indicates the term that is being defined in the contained paragraph. +

+
+

+ This definition example is getting a bit too meta for my tastes. +

+
+
+
+

+ Abbreviations +

+

+ An abbreviation element marks its contents as an acronym or abbreviation and allows the user to view the expanded abbreviation by hovering it with the mouse. +

+

+ Note that no mobile browsers currently support this feature, so you'll have to manually provide an alternative for mobile users to see the full abbreviation. +

+
+

+ Two companies against each other: BLU vs. RED! +

+
+
+
+

+ Ruby +

+

+ A ruby text element is text with small annotations above, commonly used in East Asian texts. +

+
+

+ + Mo /ˈmɒ/ + de /dɪ/ + na /nə/ + +

+

+ + 漢 (kan) + 字 (ji) + +

+

+ + 明日 (ashita) + +

+
+
+
+
+

+ Tables +

+
+

+ Table +

+

+ A table is an element whose children are aligned in a grid. +

+ + + + + + + + + + + + + + + + + + + + + +
EmojiMeaning
🙂Slightly Smiling Face
🌑New Moon
🌚New Moon with Face
+
+
+

+ Table caption +

+

+ Tables can have captions attached to their top. +

+ + + + + + + + + + + + + + + + + + + + + + +
+ Apple emoji meanings +
EmojiMeaning
🍎Red Apple
🍏Green Apple
Hopefully a square with F8FF written inside it
+

+ Tables can also have headings and captions attached to their bottom. +

+ + + + + + + + + + + + + + +
+ Pear emoji meanings +
🍐Pear
EmojiMeaning
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

+ Table panels +

+

+ A table panel is a special table which is rendered as a panel. +

+

+ This table in particular is rendered as a box panel, and is about what two brothers think of the following objects: +

+
MarioLuigi
TablesThey're cool and allow you to do cool stuffThey need chairs to be useful
FlexboxesThey're very usefulNot enough flexible for me
GridsI love themBleargh
Overall<30/10
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+

+ Table dialogs +

+

+ Panel tables can also be dialogs and parentheses. +

+

+ This table in particular is a dialog panel, and is about example features for a robot: +

+
FeatureDescription
BaseAll the base features of your home robot!
ExtraEverything a robot should be able to do, plus an infinite bubblewrap dispenser!
SuperThe robot is now armed with a non-free printer, and is ready to conquer the world!
UltimateA time machine has been embedded into the robot, and it is free to use it at will.
+ + + + + + + + + + + + + + + + + + + +
+

+ Cell modifiers +

+

+ Cells in tables have modifiers applied like all elements. +

+

+ This table in particular is for a game of tic-tac-toe. +

+
OX
XXO
XO
+
+
+

+ Images +

+
+

+ Default +

+

+ Images are automatically centered and resized to fit the panel they are in. +

+ Neon Ice Cream +
+
+

+ Limited +

+

+ Images can be limited to prevent them from taking up too much screen space, like the previous one did. +

+
+

+ Half +

+

+ The following image has a limit of half the vertical viewport: +

+ Neon ice cream +
+

+ Quarter +

+

+ The following image has a limit of a quarter of the vertical viewport: +

+ Neon ice cream +
+
+
+

+ Inputs +

+
+

+ Input +

+

+ An Input is an interactive element which allows the user to interact with the web page. +

+
+
+
+
+

+ Field +

+

+ A Field is an Input which allows the user to enter single-line free-form text. +

+ +

+

+

+ +

+

+ +

+ +
+

+ Special types of Fields +

+

+ A Field may require a particular type of data, such as an email or a phone number. +

+
+

+ +

+

+ +

+

+ +

+

+ +

+

+ +

+

+ +

+

+ +

+

+ +

+
+
+
+

+ Area +

+

+ An Area is a resizable Input which allows the user to enter multi-line free-form text. +

+
+

+ +

+
+
+
+

+ Select +

+

+ A Select is an Input which allow the user to select between one of multiple options. +

+
+

+ +

+
+
+
+

+ Multiselect +

+

+ A Multiselect is an Input which allows the user to enable or disable multiple options. +

+

+ Be aware that the average user will probably not know how to interact with the Multiselect: to select options not adjacent to each other on a desktop browser, it requires holding the Ctrl key. +

+
+

+ +

+
+
+
+

+ Radio +

+

+ Radios are Inputs which, like a Select, allow the user to select between one of multiple options when grouped together. +

+
+

+ +

+

+ +

+

+ +

+

+ +

+

+ +

+
+
+
+

+ Checkbox +

+

+ Checkboxes are Inputs which, like a Multiselect, allows the user to enable or disable multiple options when grouped together. +

+
+

+ +

+

+ +

+

+ +

+

+ +

+

+ +

+

+ +

+

+ +

+
+
+
+

+ Color +

+

+ A color input is an Input which allows the user to select a RGB color. +

+

+ Since browsers usually delegate the rendering of this element to the operating system, it cannot be styled. +

+
+

+ +

+
+
+
+

+ File +

+

+ A file input is an Input which allows the user to upload a file from their computer. +

+

+ Since browsers usually delegate the rendering of this element to the operating system, it cannot be styled. +

+
+

+ +

+
+
+
+

+ Range +

+

+ A Range is an Input which allows the user to inaccurately select a value from a given range. +

+
+

+ +

+
+
+
+

+ Button +

+

+ A Button is an Input which the user can click to trigger an action. +

+
+

+

+

-

- Finally, you can submit the form, and see whether you'll be accepted or not: -

- -
-
-
- - - + +

+ + + +
+

+ Forms +

+
+

+ Form +

+

+ An form is a non-interactive element which positions Inputs in commonly used ways. +

+
+
+

+ Flex form +

+

+ A flex form is a block form aligning labels and inputs to a pseudo-grid. +

+
+

+ Life University Enrolment Form +

+

+ Please enter your personal details here: +

+ + + +

+ Now, please enter some information about yourself: +

+ + + +

+ Finally, you can submit the form, and see whether you'll be accepted or not: +

+ +
+
+
+ +