module

Sunstone::Docs::C_THEMING::ZeroInlineStyles

Zero Inline Styles Architecture

Executive Summary & Key Topics

Topic	Method / Anchor	Description
How Zero-Inline-Styles Works	`.topic_01_architecture`	Mapping semantic attributes to CSS grid and flex rules.
Chrome via CSS Pseudo-Elements	`.topic_02_pseudo_elements`	Rendering window controls and arrows without extra HTML.

Class methods

topic_01_architecture

How Zero-Inline-Styles Works: Mapping semantic attributes to CSS grid and flex rules.

Rather than injecting style="grid-template-columns: 3fr 2fr;" into HTML tags, Sunstone emits semantic data attributes:

<div class="slide-body" data-ratio="3:2" data-density="compact">

In sunstone-base.css, attribute selectors map directly to CSS grid definitions:

[data-ratio="3:2"] {
  grid-template-columns: 3fr 2fr;
}

Source

topic_02_pseudo_elements

Chrome via CSS Pseudo-Elements: Rendering window controls and arrows without extra HTML.

Terminal dots and window controls are rendered purely with ::before and box shadows:

.window-header::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff5f56;
  box-shadow: 15px 0 0 #ffbd2e, 30px 0 0 #27c93f;
  margin-right: 40px;
}

Flow arrows between architectural tiers use .arch-tier + .arch-tier::before { content: "▼"; }.

Source