Skip to content
FrameBaseCSS
Repository Light theme Quick start

CSS documentation / zero runtime dependencies

HTML contracts ready for real websites.

This page documents the structure required by every FrameBaseCSS component and shows its rendering in application, editorial, and technical contexts.

Explore components Browse contracts
1 canonical CSS file
0 external dependencies
3 documented breakpoints
100% offline documentation
This popover uses the native HTML API exclusively.

Operational workspace

A dashboard ready for real data

Metrics, activity, statuses, and actions form a complete application interface without relying on a framework.

24 deployments this month
99.98% uptime over the last 30 days
184 ms median API response
7 active collaborators

Production / eu-west

Recent activity

operational
Event Author Status Duration Time
deploy/web-184 A. Ferri successful 42 s
test/css-992 M. Riva in progress 1 m 18 s
audit/a11y-71 L. Conti warning 16 s

Deployment console

$ framebase deploy --environment production
✓ CSS validated
✓ Offline demo verified
✓ 0 external dependencies
→ release ready: framebase@1.1.0

Quick catalog

Components for real interfaces

Grids move from side-by-side columns to a stacked composition without introducing rigid widths.

Layout

Fluid containers

Containers, auto-fit grids, stacks, clusters, and sidebar layouts.

View example
Accessible

Semantic HTML

Visible focus, skip links, and native interactions without scripts.

View controls
Responsive

Local overflow

Tables and code scroll inside their own container, not the page.

View table

Information

Semantic variants share structure and tokens.

Operation completed

The package was validated successfully.

Warning

Review changes before publishing.

Error

The identifier field cannot be empty.

Actions and navigation

Content and communication

From landing pages to editorial content

Typography, plans, profiles, and micro-patterns preserve the same visual hierarchy as application components.

Starter

Prototype

Free for personal projects.

  • Complete CSS
  • Demo offline
  • Customizable tokens
Start now

Recommended

Production

Ready for complete websites.

  • Public and technical layouts
  • Forms and tables
  • Built-in responsive behavior
Read the guide

Custom

Custom theme

Flexible through a small set of tokens.

  • Replaceable palette
  • Configurable density
  • No lock-in
Explore tokens

Semantic typography

FrameBaseCSS supports HTML semantic markup, highlighted text, abbreviations, links, and keyboard commands such as Ctrl + K.

Secondary text remains readable without competing with the main content. Very long words can use release-candidate-with-an-exceptionally-long-identifier.

  1. Write semantic structure.
  2. Apply the required component.
  3. Customize tokens only.

A consistent voice

The page remains technical and compact, while every state preserves an immediately recognizable hierarchy.

— FrameBaseCSS team
● stable ● warning ● critical

Native interaction

Accordions, static tabs, and procedures

Does FrameBaseCSS require JavaScript?

No. Accordions, popovers, and basic controls use HTML primitives.

How do I customize the theme?

Override tokens --fb-color-*, --fb-space-* and --fb-radius-*.

  1. Link the CSS
    Use a local file or a style tag.
  2. Write semantic HTML
    Add classes only for layout.
  3. Customize tokens
    Keep components unchanged.

Form system

Consistent, readable controls

Use letters, numbers, and hyphens.
Enter only URL-safe characters.
Preferences
The invitation will be associated with the selected environment.
Preview: the project will be created in the development channel.

Data and technical content

Tables and code with local overflow

FrameBaseCSS release support
Version Theme Components Last verified Coverage
1.1.0 dark Layout, forms, documentation, media 100%
1.1.0 light Same contracts, dedicated visual tokens 100%
theme.css CSS 
:root {
  --fb-color-primary: #35c6d4;
  --fb-radius-md: 7px;
  --fb-container-max: 1200px;
}

A good design system reduces repetitive decisions without hiding browser behavior.

— FrameBaseCSS principle

Media

The illustrations are inline SVGs: the demo makes no network requests.

Adaptive layout Grids and semantic regions.
SEMANTIC TOKENS
Centralized palette Identity and states through custom properties.
Technical content Readable code and manual syntax highlighting.

Public reference / version 1.1

Component contracts

Canonical HTML structures to copy and adapt. Layout classes control composition; components do not depend on IDs, demonstration text, or an accidental position on the page.

plug and use CSS zero runtime dependencies

1. Installation and usage rules

Link the stylesheet after the viewport meta tag. Use HTML elements for their meaning and apply a FrameBaseCSS class only when a visual or layout contract is required.

index.html HTML 
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="framebase.css">

Use framebase.css while inspecting or customizing the source. Use framebase.min.css for the equivalent production distribution. Both expose the same public contract; never edit the generated minified file directly.

Composition rule

Use .fb-stack, .fb-cluster, .fb-grid, or a dedicated section to control spacing between components. Do not add external margins to components to correct a single page.

Primary namespace
--fb-*, .fb-*, and .u-*
Public components
All components and layouts use the .fb-* namespace; utilities use .u-*.
JavaScript
Not required by the CSS; it remains necessary for application behavior such as opening a dialog programmatically. Optional integrations such as Highlight.js remain user-provided.

2. Tokens and customization

Override tokens after the selected readable or minified theme entry point and any optional addon. Do not modify internal or generated rules to create a theme.

theme.css CSS 
:root {
  --fb-color-primary: #7dd3fc;
  --fb-color-background: #111827;
  --fb-container-max: 72rem;
  --fb-content-max: 90rem;
  --fb-control-height: 2.75rem;
  --fb-stack-gap: var(--fb-space-5);
}

Public groups include colors, typography, spacing, radii, shadows, widths, transitions, and control sizes.

2.1 Official light theme

framebase-light.css imports the canonical CSS and overrides visual tokens only. HTML contracts, components, responsive behavior, and utilities remain unchanged. Its production counterpart, framebase-light.min.css, imports framebase.min.css instead.

index.html HTML 
<link rel="stylesheet" href="framebase-light.css">
framebase-light.css CSS 
@import url("./framebase.css");

:root {
  --fb-color-scheme: light;
  --fb-color-background: #f4f6f8;
  --fb-color-surface: #ffffff;
  --fb-color-text: #171a1d;
  --fb-color-primary: #08747f;
}

One link only

Link the light file instead of framebase.css, not alongside it. The import loads the matching base automatically. Keep readable files together or keep minified files together; do not mix the two distribution sets.

Open the light verification

2.2 Custom theme starter

Copy framebase-theme-template.css, rename the copy, and replace only the global tokens the project needs to change. The template imports framebase.css, so the renamed file becomes the page’s single theme entry point.

my-theme.css CSS 
@import url("./framebase.css");

:root {
  --fb-color-scheme: dark;
  --fb-color-background: #1f2330;
  --fb-color-surface: #292e3d;
  --fb-color-text: #f4f6fb;
  --fb-color-primary: #a8b5ff;
  --fb-color-on-primary: #171a24;
}

Editable source

The starter deliberately has no generated minified copy. Delete unchanged declarations to inherit their canonical values, and verify contrast pairs after changing the palette.

Download the theme template

3. Page, containers, and layouts

.fb-page
Shell with a minimum height equal to the viewport.
.fb-container
Centered container; add --wide for the wider limit.
.fb-main and .fb-section
Vertical spacing for content and sections.
.fb-grid
Automatic grid; the --2, --3, and --4 variants set fixed column counts.
.fb-sidebar-layout
Main content with a responsive sidebar.
.fb-stack, .fb-flow, .fb-cluster, .fb-split-grid
Vertical compositions, typographic flow, flexible groups, and two-column splits.
layout.html HTML 
<div class="fb-page">
  <main class="fb-main">
    <section class="fb-section fb-section--muted">
      <div class="fb-container fb-container--wide">
        <header class="fb-section-header">...</header>
        <div class="fb-grid fb-grid--3">...</div>
      </div>
    </section>
  </main>
</div>

<div class="fb-sidebar-layout">
  <div class="fb-stack">...</div>
  <aside class="fb-stack">...</aside>
</div>

<div class="fb-split-grid">
  <div>Main column</div>
  <div>Secondary column</div>
</div>

4. Hero and metrics

.fb-hero-section defines the composition boundary and spacing. Heroes and metrics remain independent components and can be omitted or reordered.

hero.html HTML 
<section class="fb-hero-section fb-container fb-container--wide">
  <div class="fb-hero">
    <div class="fb-hero-copy">
      <p class="fb-eyebrow">Category</p>
      <h1 class="fb-display">Page title</h1>
      <p class="fb-lead">Introductory description.</p>
    </div>
    <aside class="fb-hero-panel">Complementary content</aside>
  </div>

  <div class="fb-metrics" aria-label="Key metrics">
    <div class="fb-metric">
      <span class="fb-metric-value">42</span>
      <span class="fb-metric-label">active projects</span>
    </div>
  </div>
</section>

5. Header, navigation, and breadcrumbs

The skip link is the first interactive element. Use aria-current="page" for a distinct page and aria-current="location" for an anchor on the current page.

navigation.html HTML 
<a class="fb-skip-link" href="#main-content">Skip to content</a>
<header class="fb-site-header fb-site-header--sticky">
  <div class="fb-container fb-navbar">
    <a class="fb-brand" href="/">
      <span class="fb-brand-mark" aria-hidden="true">FB</span>
      Project
    </a>
    <ul class="fb-nav" aria-label="Main navigation">
      <li><a href="/" aria-current="page">Home</a></li>
      <li><a href="/docs">Documentation</a></li>
    </ul>
    <div class="fb-navbar-actions">...</div>
  </div>
</header>

<nav class="fb-breadcrumbs" aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li aria-current="page">Page</li>
  </ol>
</nav>

<footer class="fb-site-footer">
  <div class="fb-container">...</div>
</footer>

6. Documentation layout

The three-column structure becomes two columns below 1180px and one column below 860px. Sidebars remain sticky only when the viewport allows it.

documentation.html HTML 
<div class="fb-doc-shell">
  <aside class="fb-doc-sidebar">
    <nav class="fb-doc-nav-panel" aria-label="Documentation">
      <p class="fb-doc-nav-title">Sections</p>
      <ul class="fb-doc-nav-list">
        <li class="fb-doc-nav-group">
          <p class="fb-doc-nav-group-label">Foundations</p>
          <ul><li><a href="#start">Introduction</a></li></ul>
        </li>
      </ul>
    </nav>
  </aside>

  <main class="fb-doc-main">
    <article class="fb-doc-content">
      <header class="fb-doc-header">
        <p class="fb-doc-eyebrow">Guide</p>
        <h1 class="fb-doc-title">Title</h1>
        <p class="fb-doc-subtitle">Summary</p>
        <div class="fb-doc-meta">...</div>
      </header>
      <section class="fb-doc-section">...</section>
    </article>
  </main>

  <aside class="fb-doc-toc">
    <nav class="fb-doc-toc-panel" aria-label="On this page">
      <p class="fb-doc-toc-title">Contents</p>
      <ul class="fb-doc-toc-list">...</ul>
    </nav>
  </aside>
</div>

7. Cards, badges, and content

A card accepts any semantic content. Use .fb-card-grid for uniform groups and .fb-card-title for the internal title.

content.html HTML 
<div class="fb-card-grid">
  <article class="fb-card fb-card--interactive">
    <div class="fb-cluster">
      <h2 class="fb-card-title">Title</h2>
      <span class="fb-badge fb-badge--success">active</span>
    </div>
    <p>Card content.</p>
  </article>
  <article class="fb-card fb-card--subtle">...</article>
</div>

<span class="fb-badge fb-badge--primary">primary</span>
<span class="fb-badge fb-badge--info">information</span>
<span class="fb-badge fb-badge--warning">warning</span>
<span class="fb-badge fb-badge--danger">error</span>

<blockquote>
  <p>Quotation.</p>
  <cite>Author</cite>
</blockquote>

<dl>
  <dt>Term</dt>
  <dd>Definition</dd>
</dl>

8. Buttons and action groups

Use a <button> for an action and an <a> for navigation. Variants change presentation, not semantics.

actions.html HTML 
<button class="fb-button" type="button">Confirm</button>
<a class="fb-button fb-button--secondary" href="/docs">Open guide</a>
<button class="fb-button fb-button--ghost fb-button--sm" type="button">Cancel</button>
<button class="fb-button fb-button--danger" type="button">Delete</button>
<button class="fb-button fb-button--block" type="button">Full width</button>
<button class="fb-button" type="button" disabled>Unavailable</button>

<div class="fb-button-group" role="group" aria-label="View">
  <button class="fb-button" type="button">Grid</button>
  <button class="fb-button fb-button--secondary" type="button">List</button>
</div>

9. Forms and native controls

Every control has an associated label. The .fb-select wrapper provides a consistent arrow; an invalid state uses aria-invalid="true" and a separate message.

form.html HTML 
<form class="fb-stack">
  <div class="fb-form-grid">
    <div class="fb-field">
      <label for="name">Name</label>
      <input id="name" name="name" type="text" aria-describedby="name-help">
      <span id="name-help" class="fb-field-help">Supporting text.</span>
    </div>

    <div class="fb-field">
      <label for="environment">Environment</label>
      <div class="fb-select">
        <select id="environment" name="environment">
          <option>Development</option>
          <option>Production</option>
        </select>
      </div>
    </div>

    <div class="fb-field">
      <label for="slug">Slug</label>
      <input id="slug" name="slug" aria-invalid="true"
        aria-describedby="slug-error">
      <span id="slug-error" class="fb-field-error">Invalid value.</span>
    </div>
  </div>

  <label class="fb-check">
    <input type="checkbox" name="terms">
    <span>I accept the terms</span>
  </label>

  <div class="fb-input-group">
    <input type="search" aria-label="Search">
    <button class="fb-button" type="submit">Search</button>
  </div>

  <output class="fb-output">Operation result.</output>
</form>

textarea, fieldset, radio, checkbox, color, date, file, range, progress, and meter are also styled.

10. Callouts, status, and progress

feedback.html HTML 
<aside class="fb-callout fb-callout--info">
  <p class="fb-callout-title">Information</p>
  <p>Contextual message.</p>
</aside>

<p class="fb-status fb-status--success">Operational</p>
<p class="fb-status fb-status--warning">Needs review</p>
<p class="fb-status fb-status--danger">Error</p>

<label for="upload-progress">Upload</label>
<progress id="upload-progress" value="72" max="100">72%</progress>

<label for="quality">Quality</label>
<meter id="quality" min="0" max="100" low="60"
  high="85" optimum="100" value="94">94%</meter>

Callouts support --info, --success, --warning, and --danger.

11. Accordions, dialogs, and popovers

Accordions and popovers work with native HTML. For a modal dialog, connect an event to showModal() and close(); FrameBaseCSS handles rendering only.

native.html HTML 
<details>
  <summary>Accordion title</summary>
  <div class="fb-details-body">Expandable content.</div>
</details>

<button class="fb-button" type="button" popovertarget="help">Help</button>
<div id="help" class="fb-tooltip" popover>Popover text.</div>

<dialog id="confirm-dialog">
  <form method="dialog" class="fb-stack">
    <h2>Confirm operation</h2>
    <button class="fb-button" value="confirm">Confirm</button>
    <button class="fb-button fb-button--secondary" value="cancel">Cancel</button>
  </form>
</dialog>

12. Tables and data

Always place the table inside .fb-table-wrap to contain horizontal scrolling. Make the wrapper focusable when it contains data wider than the viewport.

table.html HTML 
<div class="fb-table-wrap" tabindex="0"
  aria-label="Project data, horizontally scrollable">
  <table class="fb-table--compact fb-table--striped">
    <caption>Project summary</caption>
    <thead>
      <tr>
        <th scope="col">Project</th>
        <th scope="col" class="fb-cell-right">Requests</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Portal</td>
        <td class="fb-cell-number">1,240</td>
      </tr>
    </tbody>
  </table>
</div>

13. Code and terminal

.fb-code-block keeps its header and content in the same frame. Add .fb-code-block--wrap only when wrapping is preferable to scrolling.

example.html HTML 
<div class="fb-code-block">
  <div class="fb-code-header">
    <span class="fb-code-file">config.yml</span>
    <span class="fb-code-language">YAML</span>
  </div>
  <pre><code class="language-yaml">enabled: true</code></pre>
</div>

<pre class="fb-terminal" aria-label="Terminal output">$ command --flag
✓ operation completed</pre>

Automatic syntax highlighting is optional. Load framebase-highlight.css after the selected readable theme, or use framebase-highlight.min.css after the matching minified theme. Provide your own Highlight.js build and declare each language with a language-* class.

Both examples below contain exactly the same CSS. The first uses Highlight.js’ nohighlight class and keeps the neutral FrameBaseCSS code presentation; the second is parsed as CSS and receives token colors from the optional addon.

Without Highlight.js Plain CSS 
:root {
  --brand-color: #35c6d4;
}

.button:hover {
  color: var(--brand-color);
  transform: translateY(-2px);
}
With Highlight.js CSS 
:root {
  --brand-color: #35c6d4;
}

.button:hover {
  color: var(--brand-color);
  transform: translateY(-2px);
}
optional-highlight.html HTML 
<link rel="stylesheet" href="framebase.min.css">
<link rel="stylesheet" href="framebase-highlight.min.css">

<div class="fb-code-block">
  <div class="fb-code-header">
    <span class="fb-code-file">theme.css</span>
    <span class="fb-code-language">CSS</span>
  </div>
  <pre><code class="language-css">:root { color-scheme: dark; }</code></pre>
</div>

<script src="/assets/highlight.min.js"></script>
<script>hljs.highlightAll();</script>

Light pages replace framebase.min.css with framebase-light.min.css. The addon contains only styles for Highlight.js output; it does not bundle or download JavaScript. These demos pin Highlight.js 11.11.1 and remain readable when the script is unavailable. Do not load a separate Highlight.js visual theme unless it should override the FrameBaseCSS addon.

14. Figures, galleries, and avatars

Always provide useful alternative text for informative images. Decorative images must use alt="".

media.html HTML 
<figure class="fb-media-wide fb-media-contain">
  <img src="diagram.png" alt="Deployment flow">
  <figcaption>Deployment architecture.</figcaption>
</figure>

<div class="fb-gallery fb-gallery--compact">
  <figure class="fb-gallery-item fb-gallery-item--square fb-gallery-item--contain">
    <a class="fb-gallery-link" href="image.png">
      <div class="fb-gallery-media">
        <img src="thumb.png" alt="Project preview">
      </div>
      <figcaption><strong>Project</strong> Description.</figcaption>
    </a>
  </figure>
</div>

<img class="fb-avatar" src="avatar.jpg" alt="Ada Ferri">

Gallery variants are .fb-gallery--compact, .fb-gallery-item--wide, .fb-gallery-item--portrait, .fb-gallery-item--square, and .fb-gallery-item--contain. For simple responsive collections, .fb-image-grid is also available.

15. Tabs, pagination, steps, and empty states

Links used as static tabs are navigation and do not require role="tab". Use the ARIA tabs pattern only when complete keyboard behavior is implemented in JavaScript.

secondary-navigation.html HTML 
<nav class="fb-tabs" aria-label="Related sections">
  <a class="fb-tab" href="#overview" aria-current="location">Overview</a>
  <a class="fb-tab" href="#settings">Settings</a>
</nav>

<nav aria-label="Result pages">
  <ul class="fb-pagination">
    <li><a href="?page=1">1</a></li>
    <li><span aria-current="page">2</span></li>
  </ul>
</nav>

<ol class="fb-steps">
  <li class="fb-step"><strong>Configure</strong><br>Choose the options.</li>
  <li class="fb-step"><strong>Verify</strong><br>Review the data.</li>
</ol>

<div class="fb-empty">
  <h2>No results</h2>
  <p>Change the filters and try again.</p>
</div>

16. Anchors and utilities

Utilities are intentional, single-purpose exceptions. Prefer components and layout primitives when they describe the structure more clearly.

Class Contract
.fb-anchor-heading The heading contains a link to its own section.
.u-sr-only Content available to assistive technologies.
.u-no-margin, .u-full-width Removes the margin or sets full width.
.u-text-primary, --info, --success, --warning, --danger Applies a semantic color to text.
.u-text-left, .u-text-center, .u-text-right Sets text alignment.
.u-nowrap, .u-break-anywhere Controls how long strings are handled.
.u-overflow-auto Contains scrolling within the component.

Included global behavior

Responsive breakpoints, visible focus, target highlighting, scrollbars, print styles, high contrast, and reduced motion are provided by the stylesheet without additional classes.