mirror of
https://github.com/Steffo99/bluelib.git
synced 2024-12-22 11:34:21 +00:00
Start making documentation interactive
This commit is contained in:
parent
315581a4a9
commit
ccb6c1966a
GPG key ID:
4AEE18F83AFDEB23
2 changed files with 159 additions and 6 deletions
|
|
@ -4,14 +4,20 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="icon" type="image/x-icon" href="../favicon.ico">
|
||||
<link rel="stylesheet/less" type="text/css" href="../dist/base.root.less" id="css-base">
|
||||
<link rel="stylesheet/less" type="text/css" href="../dist/colors-royalblue.root.less" id="css-colors-royalblue">
|
||||
<link rel="stylesheet/less" type="text/css" href="../dist/fonts-fira-ghpages.root.less" id="css-fonts-fira-ghpages">
|
||||
<link rel="stylesheet/less" type="text/css" href="../dist/classic.root.less" id="css-classic">
|
||||
<link rel="stylesheet/less" type="text/css" href="../dist/glass.root.less" id="css-glass">
|
||||
<link rel="stylesheet/less" type="text/css" href="../dist/fun.root.less" id="css-fun">
|
||||
<link rel="stylesheet/less" type="text/css" href="../dist/base.root.less" id="css:base">
|
||||
<link rel="stylesheet/less" type="text/css" href="../dist/colors-royalblue.root.less" id="css:colors">
|
||||
<link rel="stylesheet/less" type="text/css" href="../dist/fonts-fira-ghpages.root.less" id="css:fonts">
|
||||
<link rel="stylesheet/less" type="text/css" href="../dist/classic.root.less" id="css:classic">
|
||||
<link rel="stylesheet/less" type="text/css" href="../dist/glass.root.less" id="css:glass">
|
||||
<link rel="stylesheet/less" type="text/css" href="../dist/fun.root.less" id="css:fun">
|
||||
<link rel="stylesheet" type="text/css" href="./index.css" id="css-thispage">
|
||||
<script>
|
||||
less = {
|
||||
env: "development",
|
||||
};
|
||||
</script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/less"></script>
|
||||
<script src="./index.js"></script>
|
||||
<title>Bluelib 5</title>
|
||||
</head>
|
||||
<body class="theme-bluelib">
|
||||
|
|
@ -23,6 +29,84 @@
|
|||
<h1>
|
||||
Bluelib 5
|
||||
</h1>
|
||||
<div class="chapter-2" id="chapter-welcome">
|
||||
<h2>
|
||||
Welcome to Bluelib!
|
||||
</h2>
|
||||
<section class="panel box">
|
||||
<h3>
|
||||
What is Bluelib?
|
||||
</h3>
|
||||
<p>
|
||||
<dfn id="dfn-bluelib">Bluelib</dfn> is a modular <i>CSS</i> library for web pages which aims to provide <b>great customization</b> and <b>flexibility</b> while trying to keep <b>HTML as "basic" as possible</b>.
|
||||
</p>
|
||||
<p>
|
||||
This page itself acts both as a <b>documentation</b> of the library and as a <b>live preview</b> of its capabilities.
|
||||
</p>
|
||||
<p>
|
||||
If you're on a browser which supports that, you can right click any element of this page and then click <kbd>Inspect Element</kbd> to see how something is done.
|
||||
</p>
|
||||
<div class="panel parenthesis">
|
||||
<p>
|
||||
This page is also used for development, therefore it uses un-minified sources and imports many development scripts.
|
||||
</p>
|
||||
<p>
|
||||
Do not judge the library efficiency from this page, or perform any benchmarks on it, as they will probably be wrong!
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<section class="panel box">
|
||||
<h3>
|
||||
Rulesets
|
||||
</h3>
|
||||
<p>
|
||||
Bluelib splits its features into rulesets, which can be enabled and disabled in this preview via the following <i>form</i>.
|
||||
</p>
|
||||
<form class="panel form-flex float-bottom">
|
||||
<label class="fade">
|
||||
<span>Base</span>
|
||||
<div>
|
||||
<input type="checkbox" checked name="bluelib-base" onChange="onRulesetChange(this)" disabled>
|
||||
<small>Basic layout and styling</small>
|
||||
</div>
|
||||
<span></span>
|
||||
</label>
|
||||
<label>
|
||||
<span>Classic</span>
|
||||
<div>
|
||||
<input type="checkbox" checked name="bluelib-classic" onChange="onRulesetChange(this)">
|
||||
<small>Round semi-transparent panels</small>
|
||||
</div>
|
||||
<span></span>
|
||||
</label>
|
||||
<label>
|
||||
<span>Glass</span>
|
||||
<div>
|
||||
<input type="checkbox" checked name="bluelib-glass" onChange="onRulesetChange(this)">
|
||||
<small>Tinted blurred glass panels</small>
|
||||
</div>
|
||||
<span></span>
|
||||
</label>
|
||||
<label class="fade">
|
||||
<span>Colors</span>
|
||||
<select name="bluelib-colors" onChange="onRulesetChange(this)" disabled>
|
||||
<option value="">[None]</option>
|
||||
<option value="royalblue">Royal Blue</option>
|
||||
<option value="amber">Gestione Amber</option>
|
||||
</select>
|
||||
<span><small>Color palette</small></span>
|
||||
</label>
|
||||
<label class="fade">
|
||||
<span>Fonts</span>
|
||||
<select name="bluelib-colors" onChange="onRulesetChange(this)" disabled>
|
||||
<option value="">[None]</option>
|
||||
<option value="fira-ghpages">Fira (via GitHub Pages)</option>
|
||||
</select>
|
||||
<span><small>Font set</small></span>
|
||||
</label>
|
||||
</form>
|
||||
</section>
|
||||
</div>
|
||||
<div class="chapter-4">
|
||||
<h2>
|
||||
Panels
|
||||
|
|
|
|||
69
examples/index.js
Normal file
69
examples/index.js
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
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()
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue