Add CSS variables throughout Guise Skeleton.
Description
A central idea of Guise Skeleton going forward is easy customization based on semantic custom properties tied to Guise Skeleton styles. Some components have this somewhat already, such as --table-header-font-family and --table-stripe-background-color for a <table>. Similar CSS variables need to be added throughout.
This ticket will not initially add variables for every configurable aspect. It will just set a baseline to build on later.
Environment
Activity
We also need to decide whether "attributes" of components are also prefixed if they aren't scoped. So for example would we use class="skelt-rotulus is-striped" or class="skelt-rotulus skelt-is-striped"?
The easiest and least ambiguous rule would be to simply say that all Guise Skeleton classes are prefixed if they aren't in the guise-skeleton scope.
It looks like several layout constructs (e.g. marquee layout and floats) were added as normal styles, not with .guise-skeleton scoping and skelt- prefixes. I'll fix those in this ticket as well as I go through and update the naming.
Let's use different approaches for variables and for class names.
Let's use --guise-skeleton- for CSS variables. This is analogous to a full namespace.
As we already do, we'll use .guise-skeleton for the scoping mechanism. This is analogous to setting a default namespace.
If there is no scoping used, we'll use skelt- as the CSS class prefix. That is analogous to the mummy: (X)HTML prefix, and has the same number of characters. I couldn't immediately find any other CSS framework that used that prefix. As an added benefit, it give the feeling of "helter-skelter", for better or for worse.
I was leaning towards using a CSS name/variable prefix of skltn. This would be analogous to the mummy: prefix we use in (X)HTML, and is the same number of letters (5).
But there seems to be an ngx-skltn project for Angular that uses a skltn- prefix. Drat. There are other projects that use this obvious abbreviation as well.