CSS Model

CSS Models provide a [declariative] method of creating applications using CSS custom properties and minimal javascript.

Note that the "user", in this document, referres to developer who creates an application by importing and instantiating the CSSModel class (or one of its descendants). This is distinct from the "developer", who creates the model; or the "end user" who does not interact with code.

List of CSS Models:

• CSS Model Audio Node
• CSS Model Cycle Click
• CSS Model Date
• CSS Model Gamepad
• CSS Model Input
• CSS Model Keyboard
• CSS Model Mouse
• CSS Model Output
• CSS Model Presentation
• CSS Model Random
• CSS Model Scroll
• CSS Model Window

Model-View-Controller

Although implementations vary slightly, a CSS Model can be though of as the "M" in the MVC (Model-View-Controller) design pattern. It is a collection of data represented as CSS custom properties (variables) attached to the DOM.

The "V", or "view", is the stylesheet that uses the CSS custom properties to style the DOM.

The "C", or "controller", is a instance of the CSSModel class that creates and manipulates the model. Ideally the controllers is exposed to the user of the CSSModel as little as possible. Once attached to the DOM, it should "get out of the way".

Usage

This is a base class. You will not likely use it directly, but rather an ancestor from which to inherit.

Desecenants should be constructed to work in the following manner:

1. Use javascript to import (and minimally configure) how an appilcation sets specific css custom properties on the DOM.

• These properties are updated as a result of mouse movement, keyboard input, or whatever the programmer wants.

2. Apply custom properties to DOM elements via stylesheets.

CSS Models should, when possible, provide a global file that the user can import withouth having to configure the model. This file should provide smart defaults to the Model's constructor.

<script type="module" src"../global.mjs" ></script>

or

import "../global.mjs";

API

The API is described for those creating CSS models of their own.

CSSClass.constructor(target, prefix)

• target -- the DOM element to which the CSS custom properties will be attached.
• properties attached to some models will depend on attributes attached to the target as well as children of the target
• previx -- prefix attached to CSS custom properties to avoid name collisions.

CSSClass.#set(name, value)

Sets a value for a css property. Note, this also sets a string representation of the value with the suffix "-str"

const css = new CSSClass(document.body, "css-model");

css.model.set("color", "red"); // sets the css custom property '--css-model-color' to 'red' on the document's body
// Also sets the css custom property '--css-model-color-str' to '"red"

body {
  background-color: var(--css-model-color); /* background-color is red */
}
body::before {
  content: var(--css-model-color-str); /* content is "red";*/
}

CSSClass.#get(name)

Returns the value for a given set key, ignoring the prefix.

const css = new CSSClass(document.body, "css-model");
css.model.set("color", "red");
css.mode.get("color"); // returns the value of the css custom property '--css-model-color', "red"

CSSClass.#remove(name)

Removes the value for a given set key, ignoring the prefix.

const css = new CSSClass(document.body, "css-model");
css.model.set("color", "red");
css.mode.remove("color");
css.mode.get("color"); // returns undefined