2021-01-09 01:35:03 +00:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
2021-03-20 03:10:00 +00:00
|
|
|
<link rel="stylesheet" href="src/targets/skeleton.root.css">
|
|
|
|
|
<link rel="stylesheet" href="src/targets/rygblue.root.css">
|
2021-01-09 01:35:03 +00:00
|
|
|
<title>Bluelib 2</title>
|
|
|
|
|
</head>
|
2021-01-09 22:16:07 +00:00
|
|
|
<body class="theme-bluelib">
|
2021-01-16 15:44:24 +00:00
|
|
|
<main class="main">
|
2021-01-09 22:16:07 +00:00
|
|
|
<hgroup>
|
|
|
|
|
<h1>
|
|
|
|
|
Bluelib 2
|
|
|
|
|
</h1>
|
|
|
|
|
<h2>
|
|
|
|
|
RYG style, in pure CSS
|
|
|
|
|
</h2>
|
|
|
|
|
</hgroup>
|
2021-03-20 03:10:00 +00:00
|
|
|
<section>
|
2021-01-09 22:16:07 +00:00
|
|
|
<h3>
|
|
|
|
|
Welcome to bluelib!
|
|
|
|
|
</h3>
|
|
|
|
|
<p>
|
|
|
|
|
Following are some examples on the things you can do with bluelib.
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
To see how something is done, <kbd>Right Click</kbd> on it and then press <kbd>Inspect Element</kbd>.
|
|
|
|
|
</p>
|
|
|
|
|
<img src="https://i.imgur.com/M8sFJeO.png" alt="How to Inspect Element">
|
|
|
|
|
</section>
|
2021-01-09 01:35:03 +00:00
|
|
|
<h2>
|
2021-01-09 22:16:07 +00:00
|
|
|
Panels
|
2021-01-09 01:35:03 +00:00
|
|
|
</h2>
|
2021-03-20 03:10:00 +00:00
|
|
|
<section>
|
2021-01-09 22:16:07 +00:00
|
|
|
<h3>
|
|
|
|
|
Panel
|
|
|
|
|
</h3>
|
|
|
|
|
<p>
|
|
|
|
|
This is a panel.
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
It usually represents a section of text about a topic described by the title above.
|
|
|
|
|
</p>
|
|
|
|
|
</section>
|
2021-03-20 03:10:00 +00:00
|
|
|
<blockquote>
|
2021-01-09 22:16:07 +00:00
|
|
|
<h3>
|
|
|
|
|
Blockquote
|
|
|
|
|
</h3>
|
|
|
|
|
<p>
|
|
|
|
|
This is a blockquote.
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
Blockquotes are specially formatted panels, useful for quotes!
|
|
|
|
|
</p>
|
|
|
|
|
</blockquote>
|
2021-03-20 03:10:00 +00:00
|
|
|
<aside>
|
2021-01-09 22:16:07 +00:00
|
|
|
<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>
|
2021-01-29 03:01:08 +00:00
|
|
|
<h2>
|
|
|
|
|
Close containers
|
|
|
|
|
</h2>
|
2021-03-20 03:10:00 +00:00
|
|
|
<section>
|
2021-01-29 03:01:08 +00:00
|
|
|
<p>
|
|
|
|
|
Here's what two panels next to each other look like:
|
|
|
|
|
</p>
|
2021-03-20 03:10:00 +00:00
|
|
|
<aside>
|
2021-01-29 03:01:08 +00:00
|
|
|
<p>
|
|
|
|
|
STONKS
|
|
|
|
|
</p>
|
|
|
|
|
</aside>
|
2021-03-20 03:10:00 +00:00
|
|
|
<aside>
|
2021-01-29 03:01:08 +00:00
|
|
|
<p>
|
|
|
|
|
STINKS
|
|
|
|
|
</p>
|
|
|
|
|
</aside>
|
|
|
|
|
</section>
|
2021-01-09 22:16:07 +00:00
|
|
|
<h2>
|
|
|
|
|
Nesting containers
|
|
|
|
|
</h2>
|
2021-03-20 03:10:00 +00:00
|
|
|
<section>
|
2021-01-09 22:16:07 +00:00
|
|
|
<h3>
|
|
|
|
|
Level one
|
|
|
|
|
</h3>
|
|
|
|
|
<p>
|
|
|
|
|
Containers can be nested effortlessly!
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
Drop one outside of any paragraphs and they will nest automatically.
|
|
|
|
|
</p>
|
2021-03-20 03:10:00 +00:00
|
|
|
<section>
|
2021-01-09 22:16:07 +00:00
|
|
|
<h3>
|
|
|
|
|
Level two
|
|
|
|
|
</h3>
|
|
|
|
|
<p>
|
|
|
|
|
You can add text above...
|
|
|
|
|
</p>
|
2021-03-20 03:10:00 +00:00
|
|
|
<section>
|
2021-01-09 22:16:07 +00:00
|
|
|
<h3>
|
|
|
|
|
Level three
|
|
|
|
|
</h3>
|
|
|
|
|
<p>
|
|
|
|
|
How deep does the rabbit hole go?
|
|
|
|
|
</p>
|
2021-03-20 03:10:00 +00:00
|
|
|
<blockquote>
|
2021-01-09 22:16:07 +00:00
|
|
|
<b><a href="https://www.youtube.com/watch?v=G2jUhnCU9iA" target="_blank">PANELCEPTION.</a></b>
|
2021-03-20 03:10:00 +00:00
|
|
|
<aside>
|
2021-01-09 22:16:07 +00:00
|
|
|
BWOON.
|
2021-03-20 03:10:00 +00:00
|
|
|
<aside>
|
2021-01-09 22:16:07 +00:00
|
|
|
BWOON.
|
2021-03-20 03:10:00 +00:00
|
|
|
<aside>
|
2021-01-09 22:16:07 +00:00
|
|
|
BWOON.
|
|
|
|
|
</aside>
|
|
|
|
|
</aside>
|
|
|
|
|
</aside>
|
|
|
|
|
</blockquote>
|
|
|
|
|
</section>
|
|
|
|
|
<p>
|
|
|
|
|
...or below!
|
|
|
|
|
</p>
|
|
|
|
|
</section>
|
|
|
|
|
</section>
|
|
|
|
|
<h2>
|
|
|
|
|
Layout
|
|
|
|
|
</h2>
|
2021-03-20 03:10:00 +00:00
|
|
|
<section>
|
2021-01-09 22:16:07 +00:00
|
|
|
<h3>
|
|
|
|
|
Splitter and splitted
|
|
|
|
|
</h3>
|
|
|
|
|
<p>
|
|
|
|
|
You can split elements into multiple columns.
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
The columns will grow automatically to on the height of the tallest.
|
|
|
|
|
</p>
|
2021-01-24 03:50:18 +00:00
|
|
|
<div class="panel panel-split">
|
2021-03-20 03:10:00 +00:00
|
|
|
<section>
|
2021-01-09 22:16:07 +00:00
|
|
|
<h3>
|
|
|
|
|
Shorter panel
|
|
|
|
|
</h3>
|
|
|
|
|
<p>
|
|
|
|
|
That's it.
|
|
|
|
|
</p>
|
|
|
|
|
</section>
|
2021-03-20 03:10:00 +00:00
|
|
|
<section>
|
2021-01-09 22:16:07 +00:00
|
|
|
<h3>
|
|
|
|
|
Taller panel
|
|
|
|
|
</h3>
|
|
|
|
|
<p><a href="https://bit.ly/3ou3jzG">
|
|
|
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Giro in barca ma teme che le diverse e
|
|
|
|
|
grandi prestazioni morbide. Per essere sempre un letto posuere posuere velit, ac lacinia ai
|
|
|
|
|
bordi di un lago. Vestibulum vehicles, metus blandit fringilla of life, volutpat arcu lorem mi,
|
|
|
|
|
eget porttitor augue turpis vitae libero. Laghi che ora hanno bisogno solo di proteine presenti
|
|
|
|
|
membri del calcio. Nessuna temperatura libera UE. Attualmente le forze dell'ordine sono libere.
|
|
|
|
|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Calcio scommesse chili ricette
|
|
|
|
|
calcio taccuino, con un morbido banane.
|
|
|
|
|
</a></p>
|
|
|
|
|
</section>
|
|
|
|
|
</div>
|
|
|
|
|
</section>
|
2021-03-20 03:10:00 +00:00
|
|
|
<section>
|
2021-01-09 22:16:07 +00:00
|
|
|
<h3>
|
|
|
|
|
Horizonal rows
|
|
|
|
|
</h3>
|
|
|
|
|
<p>
|
|
|
|
|
You can add horizontal rows to the page:
|
|
|
|
|
</p>
|
|
|
|
|
<hr>
|
|
|
|
|
<p>
|
|
|
|
|
They are very useful as separators!
|
|
|
|
|
</p>
|
|
|
|
|
</section>
|
|
|
|
|
<h2>
|
|
|
|
|
Formatting
|
|
|
|
|
</h2>
|
2021-01-24 03:50:18 +00:00
|
|
|
<div class="panel panel-split">
|
2021-03-20 03:10:00 +00:00
|
|
|
<section>
|
2021-01-09 22:16:07 +00:00
|
|
|
<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>
|
2021-03-20 03:10:00 +00:00
|
|
|
<li><span class="color-gray">Gray</span></li>
|
2021-01-09 22:16:07 +00:00
|
|
|
</ul>
|
|
|
|
|
</section>
|
2021-03-20 03:10:00 +00:00
|
|
|
<section>
|
2021-01-09 22:16:07 +00:00
|
|
|
<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>
|
2021-03-20 03:10:00 +00:00
|
|
|
<section>
|
2021-01-09 22:16:07 +00:00
|
|
|
<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>
|
2021-03-20 03:10:00 +00:00
|
|
|
<section>
|
2021-01-16 15:44:24 +00:00
|
|
|
<h3>
|
|
|
|
|
Spoilers
|
|
|
|
|
</h3>
|
|
|
|
|
<p>
|
|
|
|
|
You can define <span class="spoiler">spoilers</span>.
|
|
|
|
|
</p>
|
2021-03-20 03:10:00 +00:00
|
|
|
<section class="spoiler">
|
2021-01-16 15:44:24 +00:00
|
|
|
<h3>
|
|
|
|
|
Spoiler panels
|
|
|
|
|
</h3>
|
|
|
|
|
<p>
|
2021-01-29 00:50:03 +00:00
|
|
|
Entire panels can be spoilered as well!
|
2021-01-16 15:44:24 +00:00
|
|
|
</p>
|
|
|
|
|
</section>
|
|
|
|
|
</section>
|
2021-01-09 22:16:07 +00:00
|
|
|
</div>
|
2021-03-22 15:28:15 +00:00
|
|
|
<h2>
|
|
|
|
|
Elements
|
|
|
|
|
</h2>
|
|
|
|
|
<div class="panel panel-split">
|
|
|
|
|
<section>
|
|
|
|
|
<h3>
|
|
|
|
|
Buttons
|
|
|
|
|
</h3>
|
|
|
|
|
<p>
|
|
|
|
|
Bluelib supports buttons:
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
<button>
|
|
|
|
|
Hi, I'm a inline default button!
|
|
|
|
|
</button>
|
|
|
|
|
or
|
|
|
|
|
<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>
|
|
|
|
|
</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>
|
|
|
|
|
|
|
|
|
|
<button class="button-toggle button-toggle-on">
|
|
|
|
|
Toggled on
|
|
|
|
|
</button>
|
|
|
|
|
</p>
|
|
|
|
|
<p>
|
|
|
|
|
<button class="button-toggle button-toggle-off color-red">
|
|
|
|
|
Colored off
|
|
|
|
|
</button>
|
|
|
|
|
|
|
|
|
|
<button class="button-toggle button-toggle-on color-lime">
|
|
|
|
|
Colored on
|
|
|
|
|
</button>
|
|
|
|
|
</p>
|
|
|
|
|
</section>
|
|
|
|
|
</div>
|
|
|
|
|
<h2>
|
|
|
|
|
Coloring panels
|
|
|
|
|
</h2>
|
|
|
|
|
<div class="panel panel-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>
|
2021-01-09 22:16:07 +00:00
|
|
|
<h2>
|
2021-01-29 00:50:03 +00:00
|
|
|
Interactivity
|
2021-01-09 22:16:07 +00:00
|
|
|
</h2>
|
2021-01-29 00:50:03 +00:00
|
|
|
<div class="panel panel-split">
|
2021-03-20 03:10:00 +00:00
|
|
|
<section>
|
2021-01-29 00:50:03 +00:00
|
|
|
<h3>
|
|
|
|
|
Tooltips
|
|
|
|
|
</h3>
|
|
|
|
|
<p>
|
|
|
|
|
Text <abbr title="Hello world!">with a tooltip</abbr> is underlined and has a "help" cursor if
|
|
|
|
|
hovered.
|
|
|
|
|
</p>
|
|
|
|
|
</section>
|
2021-03-20 03:10:00 +00:00
|
|
|
<section>
|
2021-01-29 00:50:03 +00:00
|
|
|
<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 class="status-disabled">links</a>!
|
|
|
|
|
</p>
|
2021-03-20 03:10:00 +00:00
|
|
|
<section class="status-disabled">
|
2021-01-29 00:50:03 +00:00
|
|
|
And panels!
|
|
|
|
|
</section>
|
|
|
|
|
</section>
|
|
|
|
|
</div>
|
2021-01-09 22:16:07 +00:00
|
|
|
</main>
|
2021-01-09 01:35:03 +00:00
|
|
|
</body>
|
|
|
|
|
</html>
|
