Foundations

Native HTML elements

See Boobstrap’s baseline styles for lists, descriptions, quotations, code, disclosure, media, figures, addresses, and separators.

Foundations

Native HTML elements

Semantic HTML should remain readable before component classes are added. These defaults normalize spacing, preserve browser behavior, and resolve through the active theme.

Lists and descriptions

Ordered steps

Install the package
Import the stylesheet
Compose semantic markup

CSS first: No runtime is required.
Optional behavior: Initialize only the controllers you use.

HTML · Lists and descriptions

<ol><li>Install</li><li>Import</li></ol>
<dl><dt>CSS first</dt><dd>No runtime is required.</dd></dl>

Quotation, citation, separator, and address

Start with the element that best describes the content.
Boobstrap accessibility guidance

Boobstrap project
hello@example.com

HTML · Quotation and address

<blockquote><p>Start with semantics.</p><cite>Design guidance</cite></blockquote>
<hr>
<address><a href="mailto:hello@example.com">hello@example.com</a></address>

Inline technical text

Press ⌘ K, inspect data-bs-state, compare ready, set open, read ARIA, and note the important result.

HTML · Inline technical text

<kbd>⌘</kbd> <kbd>K</kbd> <code>data-bs-state</code> <samp>ready</samp> <var>open</var> <mark>important</mark>

Disclosure and figure

Why use details?

It provides disclosure semantics and keyboard behavior without JavaScript.

CSS, core behavior, and framework adapters remain separate layers.

HTML · Disclosure and figure

<details class="bs-details"><summary>Why use details?</summary><p>Native disclosure.</p></details>
<figure><img src="diagram.png" alt=""><figcaption>Framework layers.</figcaption></figure>

Keep semantics

Default styling does not change element meaning, keyboard behavior, or accessible relationships.

Use classes for patterns

Add a component class such as .bs-details when the element needs a reusable surface rather than a one-off override.

Describe media

Use meaningful alternative text, or an empty alt for truly decorative images.

Baseline & Native Elements API

Boobstrap normalizes native semantic HTML elements with active theme tokens and provides dedicated utility classes for disclosures.

Class / Element	Purpose
`.bs-details`	Styles native `<details>` and `<summary>` with a bordered disclosure surface and smooth caret animation.
`<ol>` / `<ul>`	Normalized ordered and unordered lists with consistent indentation and marker spacing.
`<dl>`, `<dt>`, `<dd>`	Description list styling with bold terms and indented definitions.
`<blockquote>`, `<cite>`	Quotation blocks with vertical accent borders and muted citation attribution.
`<kbd>`	Keyboard shortcut tag styled with subtle keycap border and elevation.
`<samp>` / `<var>`	Sample terminal output and mathematical variable formatting.
`<mark>`	Highlighted search matches and highlighted text snippets.
`<figure>` / `<figcaption>`	Media container with centered captions and responsive margin handling.
`<hr>`	Semantic divider rule matching theme border color tokens.
`<address>`	Contact address block with normalized line height and italic reset.