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

Garret Wilson 
October 14, 2022 at 3:54 PM
(edited)

There appears to be a typo in the rotulus padding definitions. The right section padding is set at 2em, while the left section padding is set at 4em, which doesn't make sense (not to mention showing a huge space on the left side), as there would be no reason to have the left and right sides have different padding values. The values were there since the beginning, so it's unclear if the intention was to only have the top and bottom (rather than the left) paddings different, or to only have the top padding different than the rest (as is usually done with headings so that there won't be double spaces when they are "stacked").

I think the idea was probably to make the top and bottom margins bigger, because the point of the rotulus sections is to space things out and if they are striped (as is common), then you would definitely want the top and bottom spacing to be equal.

Garret Wilson 
August 18, 2020 at 3:46 PM

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

Garret Wilson 
August 3, 2020 at 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.

Fixed

Details

Assignee

Reporter

Components

Priority

Created August 3, 2020 at 3:47 PM
Updated October 14, 2022 at 4:15 PM
Resolved October 14, 2022 at 4:15 PM