Create general semantic size designations.

Description

Following and GUISE-18, we need general semantic size and max-size designation classes. Here they are with the default values:

  • (max-)size-marginal: 11%

  • (max-)size-subordinate: 22%

  • (max-)size-significant: 33%

  • (max-)size-partial: 50%

  • (max-)size-substantial: 66%

  • (max-)size-full: 100%

These can be overridden using CSS variable, already implemented in and renamed in GUISE-86.

These definitions need to be moved to the base module.

Individual components (and other classes such as floats in ) can use these sizes to specify width or height using inline-size and block-size as per CSS Logical Properties and Values Level and CSS Writing Modes Level 3. See also MDN web docs: block-size and Can I use block-size.

In order to use these designations in calculations as factors rather then as percent units (e.g. calc(100vh * var(--guise-skeleton-size-subordinate))), we need to also create *-factor variables as well. The percent unit variables above can be defined in terms of the factors. Thus to modify the actual value of both the factor and the percent, one need merely override the *-factor version.

Environment

None

Activity

Show:
Garret Wilson
September 10, 2020, 4:13 PM
Edited

There is a typo in the value for --guise-skeleton-size-substantial-factor (0.66% instead of 0.66) which I just noticed; it needs to be fixed.

Garret Wilson
September 7, 2020, 9:24 PM

We should probably add general min-inline-size-*, min-block-size-*, max-inline-size-*, and max-block-size-* designations as considered above, and as done in GUISE-161.

Garret Wilson
September 7, 2020, 6:12 PM
Edited

It turns out that the actual percentage definition e.g. 50% will not be sufficient, as in some instances I need to use the value as a multiplier such as in calc(100vh * var(--guise-skeleton-size-subordinate)). So we'll probably need to define two sets of values: one with the actual multipliers in literal units, and another multiplying those values to form percentage units.

Garret Wilson
September 7, 2020, 3:28 PM

created general semantic size designations, later renamed in to:

However these were defined in the layout module. I'm reopening this ticket to move the definitions to the base module, and to close this ticket as fixed to serve as a general description of the semantic size definitions.

Garret Wilson
December 15, 2019, 6:34 PM

Reopening to remove fix version.

Fixed

Assignee

Garret Wilson

Reporter

Garret Wilson

Labels

None

Components

Fix versions

Priority

Critical