Rotulus

A vertical roll of sections, typically found on landing pages.

A rotulus is a scroll (perhaps of parchment) turned vertically, like those used for "hear ye!" proclamations that appear so often in cartoons. The Guise Skeleton rotulus component extends this idea to the modern age, enabling quick-and-easy landing pages.

Structure

• <nav class="rotulus">
  • <section > … </section>: A minimum-sized, optionally striped section of the rotulus.

Examples

<div class="rotulus">
  <section class="layout-marquee">
      <p><em>Landing pages are now quick and simple!</em></p>
    </section>
    <section class="layout-tile">
      <div class="card">foo</div>
      <div class="card">bar</div>
    </section>
      <section class="layout-marquee">
      <p>Brought to you by Guise™ Skeleton.</p>
    </section>
</div>

<div class="rotulus is-striped">
  <section class="layout-marquee">
      <p><em>Landing pages are now quick and simple!</em></p>
    </section>
    <section class="layout-tile">
      <div class="card">foo</div>
      <div class="card">bar</div>
    </section>
      <section class="layout-marquee">
      <p>Brought to you by Guise™ Skeleton.</p>
    </section>
</div>

Modifiers

is-striped

Turns on striping of the child <section> elements.

Properties

--skelt-rotulus-padding-left

--skelt-rotulus-padding-right

--skelt-rotulus-section-padding-top

--skelt-rotulus-section-padding-right

--skelt-rotulus-section-padding-bottom

--skelt-rotulus-section-padding-left

--skelt-rotulus-stripe-background-color

The background color if the is-striped modifier is present. Defaults to --skelt-component-background-color.

--skelt-rotulus-stripe-background-color-default

The default stripe color if the is-striped modifier is not present. Defaults to initial.