Style Manual

All classes in this CMS start with the as- prefix (short for AveStream).

• Block:.as-layout (The standalone entity)

• Element:.as-layout__header (Part of a block, denoted by __)

• Modifier:.as-layout__header--invisible (A state or flag, denoted by --)

When modifying a component, follow this hierarchy in your SCSS:

1. Locate the Block: Find the corresponding .md file in the Obsidian vault (e.g., as-page.md).

2. Check Available Modifiers: Before creating new CSS, check if a modifier already exists (e.g., --media-stream).

3. Scoped Styling: Always nest your styles within the Block class to prevent global CSS leakage:

// Correct way to target elements
.as-layout {
  &__brand-section { ... }
}

To make the manual useful during active coding, we recommend:

• Graph View: Use Obsidian’s Graph View to see how Blocks relate to one another (e.g., how as-layout contains as-page).

• Search (Ctrl+Shift+F): Search for a specific HTML class name in the vault to instantly see its purpose and available elements.

• Canvas Mode: Create a "Layout Map" in Obsidian using a Canvas, where you place screenshots of the website and link the BEM documentation notes directly to the image sections.