Native HTML elements
See Boobstrap’s baseline styles for lists, descriptions, quotations, code, disclosure, media, figures, addresses, and separators.
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.
<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
<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.
<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.
<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 coverage
Boobstrap normalizes fieldset, legend, [hidden], lists, description lists, blockquote, cite, hr, pre, kbd, samp, var, mark, abbr, details, summary, figure, figcaption, img, audio, and address. Use .bs-details for the bordered disclosure pattern.