diff --git a/examples/index.html b/examples/index.html index 898b161..00e8d45 100644 --- a/examples/index.html +++ b/examples/index.html @@ -4,14 +4,20 @@ - - - - - - + + + + + + + + Bluelib 5 @@ -23,6 +29,84 @@

Bluelib 5

+
+

+ 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. +

+
+

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

+

+ Do not judge the library efficiency from this page, or perform any benchmarks on it, as they will probably be wrong! +

+
+
+
+

+ Rulesets +

+

+ Bluelib splits its features into rulesets, which can be enabled and disabled in this preview via the following form. +

+
+ + + + + +
+
+

Panels diff --git a/examples/index.js b/examples/index.js new file mode 100644 index 0000000..b0bcac5 --- /dev/null +++ b/examples/index.js @@ -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() + } + } +}