panel.md

Panel

Panel is a set of guidelines that extend the RSCSS guide for Sass components to create a more flexible "box model" by using layers.

---

RSCSS recommends using a component structure like the one below. If you're not familiar with how RSCSS works, you should read through the RSCSS documentation before continuing on.

.component {
  &.-variant {
    // ...
  }

  > .element {
    // ...
  }
}

._helper {
  // ...
}

---

To briefly introduce what a panel is, below is one way you could set up a simple panel structure.

A panel is just a fancy RSCSS component. It has a name, variants, elements, and can use helpers.

.panel {
  position: relative;

  &.-variant {
    // ...
  }

  > .layer {
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
  }
}

._helper {
  // ...
}

---

What is a panel?

A panel is a collection of RSCSS elements, which in the context of a panel are called layers.

Panels are not meant to replace vanilla components entirely, but rather serve as structure for grouping and styling the wrapper of a collection of components.

Because a panel contains layers, and layers must be positioned absolutely in order to stack, the panel class must be positioned relatively. Because this is a guideline and not a framework, the means of doing this are left to the author.

A panel follows all the same rules of an RSCSS component, except that vanilla RSCSS elements are not allowed inside panels as they could conflict with layers. Only layers are allowed inside panels.

---

What is a layer?

A layer is a single RSCSS element that ideally accomplishes only one or very few tasks. For example, you could have separate layers for backgrounds, borders, outlines, and content.

Layers must stack on top of each other. Because panels are positioned relatively to contain layers, the best way to do stack layers is to position them absolutely and set top, right, bottom, and left properties to 0. As with panels, the means of doing this are left to the author.

There are two types of layers. Style layers and content layers. In the HTML, style layers should not contain any content that don't have to do with the design of the component. Content layers on the other hand are the opposite. Content layers shouldn't contain any design except for layout adjustments like margins and paddings.

A layer follows all of the same rules as an RSCSS element.

---

What about nesting panels?

A panel could be used directly as a layer inside another panel. This is very useful for grouping layers together. RSCSS has a convention to not nest as much as possible and this idea should be applied to panels as well.

---

What's a valid use case?

Using overflow hidden and border radius without clipping overflowing content.

.panel {
  &.-radius {
    border-radius: 2em;
    overflow: hidden;
  }

  > .panel {
    > .overlay { ... }
    > .border { ... }
    > .background { ... }
  }

  > .content { ... }
}

.panel
  .panel.-radius
    .overlay
    .border
    .background
  .content Lorem ipsum dolor sit amet...