Skip to content

Grounded Wren
Demo Controls
Personalization

Personalization Control Demo

Page Notes

To make sure a site works for everyone, it is good practice to offer some kind of customization of its appearance so that each user can engage on their own terms.

Some users are sensitive to bright screens while some prefer them, and people commonly disagree about what fonts are most legible. These two things are fairly simple to control on a webpage, so affording users the ability to change them helps usability efficiently.

Font size is also easy to change if a webpage is using relative units. This can be tweaked at the broswer level, but it is also helpful to offer this to users directly in the page.

This control applies css classes to a defined <scope> element to achieve this personalization. For font size and family it simply sets css properties, and for the theme it defines css variables which can be referenced across the site to give things color. You can see these classes in the personalizationVariables css file listed below.

This control is defined as a custom HTML element. It accepts two unique attributes, scope and identifier.

scope: Scope sets the element ID for which the personalization css classes will be applied. If not defined, the classes will be set on the page's root element.
identifier: Identifier is used to differentiate personalization settings from each other. Two controls using the same identifier will read from and set shared settings, while those with distinct identifiers will be kept separate.

To make the personalization decisions stick between pages and sessions, the control leverages the localStorage Web Storage API.

See also: the CSS Palette Builder tool.

Files

Add these files (other than the *Demo.* files) to your page to get started!

Markup

personalizationDemo.html

Scripts

personalizationControl.js
personalizationDemo.js

Styles

personalizationVariables.css
personalizationDemo.css