Commentary
The WidgetBar component contains widgets that are used to support users and allows them to control their own viewing experience. The WidgetBar is usually a sibling of the NavBar component and is either above or below. In our case, its position is controlled by the page grid layout through a named region.
Currently there are five widgets available:
- Setting font-size for users that have vision accessibility needs. Sets base font size to 1, 1.5 or 2.25 times the base value (typically 16px or viewport size adjusted value).
- Theme switch for normal / dark mode. Toggles site theme colours.
- Download link to simplify getting a file
- GitHub project link
- Heading scale factor adjuster for increments of 1.067, 1.125 or 1.250 text height size increase. A useful tool to see the impact is Type Scale.
Note that dark mode themed pages are a challenge to build. These need to be carefully planned out. Dark mode is usually not appropriate for pages with lots of text, dashboards and other situations where colour control is important. Some resources that go into to more details include: Dark UI Design Best Practices, Dark Mode UI Best Practices, The Principles of Dark UI Design
CSS variables of parents (ie :root) can not be changed by children elements. The variables in :root must,
unfortunately be changed through javascript. A simple, plain vanilla script has been included for each widget the needs to
change a ket CSS variable.
Since the WidgetBar component is general purpose, you can add your own widgets to improve the use of your application.
Usage
| Classes: | |
|---|---|
.widgetbar |
Defines parent element; fixed height fullwidth flex container. |
.widgetbar-bordered |
Optionally adds a border around a child; typically a link. |
.widgetbar-item-border |
Defines main container for breadcrumb, typically nav HTML tag is used at top level. |
.widgetbar-radios |
Optional child containing a set of radio button. |
.widgetbar-link |
Optional child containing a link. |
| Dependencies: | |
|---|---|
| File: | widgetbar.css |
| Variables: | --bg-component, --bg-main, --gap-col, --gap-row, --pad-horz, --radius-comp, --secondary, --text, --text-btn-invert, --weight-semibold, --widgetbar-height |
Examples
Text Size Adjust
<div class="widgetbar-bordered">
<form class="widgetbar-radios" name="siteTextSizes">
<fieldset>
<legend>Choose Text Size</legend>
<label>
<input type="radio" name="textSizes" checked onchange="setTextSize('100%')" title="Select normal text size">
<span>T1</span>
</label>
<label>
<input type="radio" name="textSizes" onchange="setTextSize('150%')" title="Select 1.5 times text size">
<span>T2</span>
</label>
<label>
<input type="radio" name="textSizes" onchange="setTextSize('225%')" title="Select 2.25 times text size">
<span>T3</span>
</label>
</fieldset>
</form>
<script>
//*** fix text size across page refreshes
const textSizesValues = ["100%", "150%", "225%"];
let sizeInitial = localStorage.getItem("site-size-setting") || "100%";
setTextSize(sizeInitial)
function setTextSize(size){
document.querySelector(':root').style.setProperty("--base-html-factor", size);
localStorage.setItem("site-size-setting", size);
let idx = textSizesValues.findIndex( elem => elem === size);
document.siteTextSizes.textSizes[idx].checked = true;
}
</script>
</div>
Heading Size Adjust
Base Font = 1rem; Normal Scale Factor = 1.125
H1 Heading One (base * factor5 )
H1 Sub Title
H2 Heading Two (base * factor4 )
H2 Sub Title
H3 Heading Three (base * factor3 )
H3 Sub Title
H4 Heading Four (base * factor2 )
H4 Sub Title
H5 Heading Five (base)
H6 Heading Six (base / factor)
<div class="widgetbar-bordered">
<form class="widgetbar-radios">
<fieldset>
<legend>Choose Heading Size</legend>
<label>
<input type="radio" name="heading-sizes" onchange="setHeadingSize('1.067')" title="Select heading size small">
<span>Hsm</span>
</label>
<label>
<input type="radio" name="heading-sizes" onchange="setHeadingSize('1.125')" checked title="Select heading size normal">
<span>Hnm</span>
</label>
<label>
<input type="radio" name="heading-sizes" onchange="setHeadingSize('1.250')" title="Select heading size large">
<span>Hlg</span>
</label>
</fieldset>
</form>
<script>
function setHeadingSize(size){
document.querySelector(':root').style.setProperty("--size-factor", size);
}
</script>
</div>
Light / Dark Mode Switch
<div class="widgetbar-bordered">
<form class="widgetbar-radios">
<span>Theme</span>
<fieldset>
<legend>Choose Light or Dark Theme</legend>
<label>
<input type="radio" name="theme-setting" checked onchange="setTheme('Light')">
<span class="icon-bg-day"></span>
<span class="sr-only">Light / day mode</span>
</label>
<label>
<input type="radio" name="theme-setting" onchange="setTheme('Dark')">
<span class="icon-bg-night"></span>
<span class="sr-only">Dark / night mode</span>
</label>
</fieldset>
</form>
<script>
//*** check local storage for any light / dark theme mode setting
let theme = localStorage.getItem("site-theme-mode") || "Light";
setTheme(theme);
function setTheme(theme){
if(theme === "Dark"){
document.body.classList.add('main-theme-dark');
localStorage.setItem("site-theme-mode", "Dark");
let radiobtn = document.getElementById("theme-mode-dark");
radiobtn.checked = true;
}else{
document.body.classList.remove('main-theme-dark');
localStorage.setItem("site-theme-mode", "Light");
let radiobtn = document.getElementById("theme-mode-light");
radiobtn.checked = true;
}
}
</script>
</div>
Button Link
<div class="widgetbar-bordered">
<div class="widgetbar-link">
<a class="widgetbar-item-border" href="https://github.com/zaphodbb-pm/goldilocks-css/archive/refs/heads/master.zip" rel="nofollow" aria-label="link to download">
<span class="icon-bg-cloud-download"></span>
<span>DownLoad</span>
</a>
</div>
</div>
Icon Link
<div class="widgetbar-link">
<a href="https://github.com/zaphodbb-pm/goldilocks-css" rel="nofollow" aria-label="link to gtihub">
<span class="icon-bg-github"></span>
</a>
</div>