Create a rotulus component.

Description

Define a "rotulus" component for the scrolling part of a typical Bootstrap-like landing page.

Many pages now have a simple scrolling page with large, billboard-like sections, usually striped. I haven't seen a simple component for making these in other frameworks. Guise Skeleton can provide a "rotulus" component to:

  • Add padding to child sections to make sure they look large and billboard-like.

  • Remove any padding from the component itself.

  • Add stripes if desired.

(A rotulus is like an ancient scroll, but a vertical one, like those ones used for proclamations in cartoons. It took a long time to discover, with other candidates being "roll" and "strip", but the term "rotulus" seems ideal.)

The sections of a rotulus will be represented by <section> elements. The rotulus will have an is-striped setting to turn on stripes only for child <section> elements. (This is no different than striped tables only striping child <tr> elements.)

A rotulus might look like this:

Environment

None

Activity

Show:
Garret Wilson
August 3, 2020, 4:12 PM
Edited

The rotulus component is experimenting with a new approach that will allow stripes to be turned on on an ad-hoc using is-striped, with the stripe color set by --guise-rotulus-stripe-background-color, yet still allow a site to easily turn on a stripe default using --guise-rotulus-stripe-background-color-default. Without this technique there was a quandary of allowing ad-hoc striping or allowing an easy way to set it for the entire site. This new approach seems to meet that need; if it works well, we'll use the same thing with tables (which currently force striping).

The interesting caveat of this approach is that if a --guise-rotulus-stripe-background-color-default is set, using is-striped will still override the default and use the --guise-rotulus-stripe-background-color as the stripe color. This is expected and makes sense, although it might not be obvious that it will happen unless you do it. In practice it shouldn't cause problems, and if it is a problem one can simply set --guise-rotulus-stripe-background-color to the some color as --guise-rotulus-stripe-background-color-default.

Garret Wilson
August 18, 2020, 3:46 PM

Reopening because the selectors were not properly defined for use in Guise Skeleton in the initial implementation.

Assignee

Garret Wilson

Reporter

Garret Wilson

Labels

None

Components

Fix versions

Priority

Critical
Configure