Create new "box flap" component.


We need some sort of overlay component for e.g. adding controls, like e.g. Bootstrap carousel controls. But it would be nice to overlay them on anything, and not just for controls.

Since these things usually cover some side of a block (e.g. right, top, etc.), they are placed sort of like a flap on a box, and since we have a box layout, a "box flap" seems like a natural way to describe it.

However since the implementation seems like we'll probably need to use absolute positioning, with some relative-positioned parent, and since we don't want to make all box elements with relative positioning, we'll probably need to introduce some intermediate structure, unfortunately, But we can name it "lid", and it will all seem natural; in fact, should be able to even use something like this:

That would position the flap (in LTR Western writing systems) at the bottom, with small footer-like size (whatever the CSS set up that size to be—like 20% or something).

The position would come from the CSS writing modes spec. We need to come up with a list of sizes that could be applied in various contexts; the one used here is marginal, which would mean the size of something like a header or footer. By default the flap would be 50% of the lid.

We'll also need to add an overlay style that makes the thing partially transparent. And of course all this should be configured by CSS "variables".

In light of frameworks like Bulma, there is an ambiguity of whether lid means has-lid or is-lid, but as it is a sort of additive property needed as a parent, it probably doesn't matter. One could think of it as lidded.




Garret Wilson
September 6, 2020, 6:18 PM

The CSS variable names for sizes have been improved as part of to use the --guise-skeleton- prefix.

Garret Wilson
January 20, 2019, 11:39 PM

Through the work on this feature, I'm starting to come to some initial conclusions about layout-related Guise Skeleton styles.

For border/side positions (which will also work when we add floats), we have (along with Western writing equivalents):

  • side-block-start: top

  • side-block-end: bottom

  • side-inline-start: left

  • side-inline-end: right

For relative sizes (which will also work when we add floats in ), we have (along with default percentages):

  • size-marginal: 11%

  • size-subordinate: 22%

  • size-significant: 33%

  • size-partial: 50%

  • size-substantial: 66%

  • size-full: 100%

Lastly for something that is an overlay, we have a new style overlay, e.g. with a transparent background.



Garret Wilson


Garret Wilson




Fix versions