Add CSS variables throughout Guise Skeleton.


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.




Garret Wilson
September 5, 2020, 9:53 PM

Although the original Skeleton CSS framework seems to have been abandoned, there is a Barebones fork as well as Skelet.

Garret Wilson
September 5, 2020, 9:57 PM

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.

Garret Wilson
September 5, 2020, 10:08 PM

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.

Garret Wilson
September 5, 2020, 10:32 PM

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.

Garret Wilson
September 5, 2020, 11:30 PM

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.


Garret Wilson


Garret Wilson




Fix versions