steffo/bluelib
steffo/bluelib
1
Fork 0
mirror of https://github.com/Steffo99/bluelib.git synced 2024-12-22 03:24:20 +00:00
Code Activity
bluelib/index.html

725 lines
No EOL
28 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="src/targets/skeleton.root.css">
<link rel="stylesheet" href="src/targets/paper.root.css">
<link rel="stylesheet" href="src/targets/royalblue.root.css">
<title>Bluelib 2</title>
<style>
body {
margin: 4px !important;
}
</style>
</head>
<body class="theme-bluelib">
<hgroup>
<h1>
Bluelib 2
</h1>
<h2>
RYG style, in pure CSS
</h2>
</hgroup>
<div class="layout layout-threecol">
<main class="main layout-threecol-center">
<section>
<h3>
Welcome to Bluelib!
</h3>
<p>
This is an example page containing most of the elements present in Bluelib (layouts are obviously missing).
</p>
<p>
This page uses the <code>royalblue.root.css</code> target; other targets are available and may have a different look and/or selector names.
</p>
<p>
To see how an element is constructed, <kbd>Right Click</kbd> it and then press <kbd>Inspect Element</kbd>.
</p>
<img class="image-limited" src="https://i.imgur.com/M8sFJeO.png" alt="A screenshot showing how to Inspect Element.">
</section>
<h2>
Panels
</h2>
<section>
<h3>
Box
</h3>
<p>
This is a box.
</p>
<p>
It usually represents a section of text about a topic described by the title above.
</p>
</section>
<blockquote>
<h3>
Blockquote
</h3>
<p>
This is a blockquote.
</p>
<p>
Blockquotes are specially formatted panels, useful for quotes!
</p>
</blockquote>
<aside>
<h3>
Aside
</h3>
<p>
This is an aside.
</p>
<p>
Asides are panels with no border and smaller text, useful to describe less important things while inside
a panel.
</p>
</aside>
<section>
<h3>
Nesting panels
</h3>
<p>
Panels can be nested, as you are about to see:
</p>
<section>
<p>
Nested panels are exactly as regular panels, and they can have text as well.
</p>
<section>
<p>
How deep does the rabbit hole go?
</p>
<blockquote>
<b><a href="https://www.youtube.com/watch?v=G2jUhnCU9iA" target="_blank">PANELCEPTION.</a></b>
<aside>
BWOON.
<aside>
BWOON.
<aside>
BWOON.
</aside>
</aside>
</aside>
</blockquote>
</section>
</section>
</section>
<section>
<h3>
Panel margins
</h3>
<p>
In most cases, panels adjust their margins automatically.
</p>
<p>
Here's what three blockquotes next to each other look like:
</p>
<blockquote>
<p>
Snake?
</p>
</blockquote>
<blockquote>
<p>
Snake!
</p>
</blockquote>
<blockquote>
<p>
SNAAAAKE!!!
</p>
</blockquote>
</section>
<h2>
Splits
</h2>
<section>
<h3>
Split
</h3>
<p>
You can split panels into multiple columns.
</p>
<div class="split">
<section>
<h3>Left</h3>
</section>
<section>
<h3>Right</h3>
</section>
</div>
</section>
<section>
<h3>
Split heights
</h3>
<div class="split">
<section>
<h3>
What's happening?
</h3>
<p>
Split panels inherit the height of the tallest.
</p>
</section>
<aside>
<h3>
It's time to waste some space.
</h3>
<p>
Did you ever hear the tragedy of Darth Plagueis The Wise? I thought not. It’s not a story the Jedi would tell you. It’s a Sith legend. Darth Plagueis was a Dark Lord of the Sith, so powerful and so wise he could use the Force to influence the midichlorians to create life… He had such a knowledge of the dark side that he could even keep the ones he cared about from dying. The dark side of the Force is a pathway to many abilities some consider to be unnatural. He became so powerful… the only thing he was afraid of was losing his power, which eventually, of course, he did. Unfortunately, he taught his apprentice everything he knew, then his apprentice killed him in his sleep. Ironic. He could save others from death, but not himself.
</p>
</aside>
<section>
<h3>
Split panel types
</h3>
<p>
As you have just seen, splits can include panels of different types.
</p>
</section>
</div>
</section>
<section>
<h3>
Wrapping
</h3>
<p>
Splits will automatically wrap if one of their contents won't fit on the screen.
</p>
<div class="split">
<section>
<h3>First</h3>
</section>
<section>
<h3>Second</h3>
</section>
<section>
<h3>Third</h3>
</section>
<section>
<h3>Fourth</h3>
</section>
<section>
<h3>Fifth</h3>
</section>
<section>
<h3>Sixth</h3>
</section>
<section>
<h3>Seventh</h3>
</section>
<section>
<h3>Eigth</h3>
</section>
<section>
<h3>Ninth</h3>
</section>
<section>
<h3>Tenth</h3>
</section>
<section>
<h3>Eleventh</h3>
</section>
<section>
<h3>Twelfth</h3>
</section>
<section>
<h3>Thirtheenth</h3>
</section>
</div>
</section>
<section>
<h3>
Force-wrapping
</h3>
<p>
You can manually force a split to wrap, fixing the vertical gap between the panels.
</p>
<div class="split">
<section>
<h3>First</h3>
</section>
<section>
<h3>Second</h3>
</section>
<section>
<h3>Third</h3>
</section>
<section>
<h3>Fourth</h3>
</section>
<div class="split-forcewrap"></div>
<section>
<h3>Fifth</h3>
</section>
<section>
<h3>Sixth</h3>
</section>
<section>
<h3>Seventh</h3>
</section>
<div class="split-forcewrap"></div>
<section>
<h3>Eigth</h3>
</section>
<section>
<h3>Ninth</h3>
</section>
<div class="split-forcewrap"></div>
<section>
<h3>Tenth</h3>
</section>
</div>
</section>
<h2>
Separators
</h2>
<section>
<h3>
Separator
</h3>
<p>
Bluelib provides separators, horizontal lines that can be used to separate elements.
</p>
<hr>
<p>
That was one of them.
</p>
</section>
<div class="split">
<section>
<h3>
Light separator
</h3>
<p>
A lighter separator is available, if the regular color is too much distracting.
</p>
<hr class="separator-light">
<p>
That was one of them.
</p>
</section>
<section>
<h3>
Heavy separator
</h3>
<p>
A heavier separator is available, if the regular color isn't apparent enough.
</p>
<hr class="separator-heavy">
<p>
That was one of them.
</p>
</section>
</div>
<h2>
Images
</h2>
<section>
<h3>
Default images
</h3>
<p>
Bluelib centers and automatically resizes images to fit the panel they are contained in.
</p>
<img src="https://i.imgur.com/tpC5y1N.png" alt="Uno reverse card reverses water"/>
</section>
<section>
<h3>
Limited images
</h3>
<p>
Images can be "limited", so that they never occupy too much screen real estate, especially if they're very tall.
</p>
<div class="split">
<section>
<h3>
Half
</h3>
<p>
The following image has a limit of half the vertical viewport:
</p>
<img class="image-limit-half" src="https://i.redd.it/0b2r669b73f41.jpg" alt="USB key in a bottle"/>
</section>
<section>
<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://i.redd.it/0b2r669b73f41.jpg" alt="USB key in a bottle"/>
</section>
</div>
</section>
<h2>
Status
</h2>
<section>
<h3>
Status
</h3>
<p>
Status are classes that can be applied to elements to mark some special interaction property.
</p>
<div class="split">
<section class="status-disabled">
<h3>
Disabled
</h3>
<p>
Disabled elements appear transparent, non-interactable and display a <code>not-allowed</code> cursor if hovered.
</p>
</section>
</div>
</section>
<h2>
Forms
</h2>
<div class="split">
<section>
<h3>
Inputs
</h3>
<form>
<label for="input-text">Text</label>
<input id="input-text" type="text" placeholder="All fields have a customizable placeholder" required/>
<label for="input-password">Password</label>
<input id="input-password" type="password" placeholder="Field type determines how input is displayed" required/>
<label for="input-phone">Phone</label>
<input id="input-phone" type="tel" placeholder="Optional fields have italic text"/>
<label for="input-fax">Fax</label>
<input id="input-fax" type="text" placeholder="Disabled fields have a dashed underline" disabled required/>
<label for="input-size">Shirt size</label>
<select id="input-size" required>
<optgroup label="Smaller">
<option>XXS</option>
<option>XS</option>
<option>S</option>
</optgroup>
<option>M</option>
<optgroup label="Larger">
<option>L</option>
<option>XL</option>
<option>XXL</option>
</optgroup>
</select>
<label for="input-colors">Colors</label>
<select id="input-colors" multiple required>
<option>Red</option>
<option>Yellow</option>
<option>Green</option>
<optgroup label="Blues">
<option>Blue</option>
<option>Purple</option>
<option>Cyan</option>
</optgroup>
</select>
<div class="form-row">
<input id="input-reset-1" type="reset" value="Reset"/>
<input id="input-submit-1" type="submit" value="Submit"/>
</div>
</form>
</section>
<section>
<h3>
Groups
</h3>
<p>
Form inputs can be grouped together.
</p>
<form>
<label for="input-mood">Mood</label>
<div id="input-mood" class="form-group">
<label>
<input type="radio" name="input-mood" value="happy"/>
Happy
</label>
<label>
<input type="radio" name="input-mood" value="sad"/>
Sad
</label>
<label>
<input type="radio" name="input-mood" value="angry"/>
Angry
</label>
</div>
</form>
<p>
They automatically wrap if the inputs don't fit on a single line.
</p>
<form>
<label for="input-pets">Pets</label>
<div id="input-pets" class="form-group">
<label>
<input type="checkbox" name="input-pets" value="cats"/>
Cats
</label>
<label>
<input type="checkbox" name="input-pets" value="dogs"/>
Dogs
</label>
<label>
<input type="checkbox" name="input-pets" value="sneks"/>
Sneks
</label>
<label>
<input type="checkbox" name="input-pets" value="bunnies"/>
Bunnies
</label>
<label>
<input type="checkbox" name="input-pets" value="frogs"/>
Frogs
</label>
<label>
<input type="checkbox" name="input-pets" value="ants"/>
Ants
</label>
<label>
<input type="checkbox" name="input-pets" value="parrots"/>
Parrots
</label>
</div>
</form>
<p>
Labels can be made to fill the whole line, forcing a wrap.
</p>
<form>
<label for="input-roman">Fav. roman numeral</label>
<div id="input-roman" class="form-group">
<label class="form-group-row">
<input type="radio" name="input-roman" value="i" required/>
I (1)
</label>
<label class="form-group-row">
<input type="radio" name="input-roman" value="v" required/>
V (5)
</label>
<label class="form-group-row">
<input type="radio" name="input-roman" value="x" required/>
X (10)
</label>
<label class="form-group-row">
<input type="radio" name="input-roman" value="i" required/>
I (1)
</label>
</div>
</form>
</section>
</div>
<h2>
Formatting
</h2>
<div class="split">
<section>
<h3>
Colors
</h3>
<p>
You can use colored text:
</p>
<ul>
<li><span class="color-red">Red</span></li>
<li><span class="color-orange">Orange</span></li>
<li><span class="color-yellow">Yellow</span></li>
<li><span class="color-lime">Lime</span></li>
<li><span class="color-cyan">Cyan</span></li>
<li><span class="color-blue">Blue</span></li>
<li><span class="color-magenta">Magenta</span></li>
<li><span class="color-gray">Gray</span></li>
</ul>
</section>
<section>
<h3>
Size
</h3>
<p>
You can set the text size:
</p>
<ul>
<li><span class="size-xxl">XXL</span></li>
<li><span class="size-xl">XL</span></li>
<li><span class="size-l">L</span></li>
<li><span class="size-m">M</span></li>
<li><span class="size-s">S</span></li>
<li><span class="size-xs">XS</span></li>
<li><span class="size-xxs">XXS</span></li>
</ul>
</section>
<section>
<h3>
Alignment
</h3>
<p>
You can set the text alignment (<i>only in block elements</i> such as div):
</p>
<div class="align-left">Left</div>
<div class="align-center">Center</div>
<div class="align-right">Right</div>
</section>
<section>
<h3>
Style
</h3>
<p>
You can use all the usual text styles:
</p>
<ul>
<li>Regular</li>
<li><b>Bold</b></li>
<li><i>Italic</i></li>
<li><u>Underlined</u></li>
<li><s>Struck</s></li>
<li><code>Code</code></li>
<li><b><i><u><s><code>All of them together</code></s></u></i></b></li>
</ul>
</section>
</div>
<h2>
Elements
</h2>
<div class="split">
<section>
<h3>
Buttons
</h3>
<p>
Bluelib supports buttons:
</p>
<p>
<button>
Hi, I'm a inline default button!
</button>
&nbsp;or&nbsp;
<input class="color-lime" type="submit" value="Hi, I'm a lime submit button!"/>
</p>
<p>
<button class="button-fill-width color-orange">
I'm stretched horizontally!
</button>
</p>
<p>
<button disabled class="button-fill-width">
Can't click on this!
</button>
</p>
</section>
<section>
<h3>
Toggle buttons
</h3>
<p>
Bluelib supports buttons that can be toggled on and off:
</p>
<p>
<button class="button-toggle button-toggle-off">
Toggled off
</button>
&nbsp;
<button class="button-toggle button-toggle-on">
Toggled on
</button>
</p>
<p>
<button class="button-toggle button-toggle-off color-red">
Colored off
</button>
&nbsp;
<button class="button-toggle button-toggle-on color-lime">
Colored on
</button>
</p>
<p>
<button disabled class="button-toggle button-toggle-off">
Disabled off
</button>
&nbsp;
<button disabled class="button-toggle button-toggle-on">
Disabled on
</button>
</p>
</section>
</div>
<h2>
Coloring panels
</h2>
<div class="split">
<section class="color-red">
<h3>
Panels can be recolored!
</h3>
<p>
Elements contained inside will be recolored accordingly.
</p>
</section>
<blockquote class="color-lime">
<h3>
It works on all types of panels!
</h3>
<p>
This blockquote should be green!
</p>
<hr/>
<p>
And so should be the separator above.
</p>
</blockquote>
<aside class="color-blue">
<h3>
Smol blue aside
</h3>
<p>
The buttons below should be automatically colored blue.
</p>
<button>
Blue button
</button>
<button class="button-toggle button-toggle-off">
Blue toggle off
</button>
<button class="button-toggle button-toggle-on">
Blue toggle on
</button>
</aside>
</div>
<h2>
Interactivity
</h2>
<div class="split">
<section>
<h3>
Tooltips
</h3>
<p>
Text <abbr title="Hello world!">with a tooltip</abbr> is underlined and has a "help" cursor if
hovered.
</p>
</section>
<section>
<h3>
Disabled
</h3>
<p>
Elements can be <span class="status-disabled">disabled</span> to reduce their opacity and display a
"not allowed" cursor if hovered.
</p>
<p>
It also works with <a disabled class="status-disabled">links</a>!
</p>
<section class="status-disabled">
And panels!
</section>
</section>
</div>
</main>
<nav class="layout-threecol-left">
I'm wrong.
</nav>
<nav class="layout-threecol-right">
I'm right :)
</nav>
</div>
</body>
</html>
View git blame Copy permalink