bullframe.css 6.0.0 → 6.1.0

package/CHANGELOG.md

@@ -7,6 +7,29 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [6.1.0] - 2026-09-14
+
+### Added
+
+- CSS variables `--bf-focus-ring-color`, `--bf-focus-ring-width`, `--bf-focus-ring-offset`.
+- `.bf-skip-link`, `.bf-focusable`, `.bf-scheme-*`, `.bf-target-size`, `.bf-accent-native`.
+- `@supports` for `text-wrap: balance` and `scrollbar-gutter: stable`.
+
+### Changed
+
+- README: install, CDN, examples; unversioned CDN (docs stay pinned + SRI).
+- README, hero, OG, and social preview images regenerated from one source (`npm run brand:images`).
+
+### Fixed
+
+- `caption` and `progress` in classless always-dark.
+- Accessibility markup in the kitchen sink and examples.
+- Docs site cache headers, so a new release reaches returning visitors.
+
+### Removed
+
+- Dead UA+ rules that never applied inside `@layer`.
+
 ## [6.0.0] - 2026-07-31 - BREAKING CHANGES
 
 ### Changed
@@ -489,5 +512,6 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Initial commit on 19 November 2012
 - Framework aimed to kickstart cross-browser responsive HTML/CSS development
 
-[Unreleased]: https://github.com/marcop135/bullframe.css/compare/v6.0.0...HEAD
+[Unreleased]: https://github.com/marcop135/bullframe.css/compare/v6.1.0...HEAD
+[6.1.0]: https://github.com/marcop135/bullframe.css/compare/v6.0.0...v6.1.0
 [6.0.0]: https://github.com/marcop135/bullframe.css/compare/v5.1.0...v6.0.0

package/README.md

@@ -1,38 +1,67 @@
 <div align="center">
 
-![Bullframe CSS](https://raw.githubusercontent.com/marcop135/bullframe.css/main/src/docs/github-readme/bf-readme-hero-light-16x9.png#gh-light-mode-only)
-![Bullframe CSS](https://raw.githubusercontent.com/marcop135/bullframe.css/main/src/docs/github-readme/bf-readme-hero-dark-16x9.png#gh-dark-mode-only)
+![Bullframe CSS](src/docs/github-readme/bf-readme-hero-light-16x9.png#gh-light-mode-only)
+![Bullframe CSS](src/docs/github-readme/bf-readme-hero-dark-16x9.png#gh-dark-mode-only)
 
 # Bullframe CSS
 
-Semantic by default. Any stack.<br>
-<em>Classless when you want it. System dark built in.</em>
+Semantic by default. Any stack.
 
 </div>
 
 <p align="center">
   <a href="https://www.npmjs.com/package/bullframe.css"><img src="https://img.shields.io/npm/v/bullframe.css.svg?style=flat-square" alt="npm version"></a>
-  <a href="https://bullframecss.marcopontili.com/"><img src="https://img.shields.io/badge/docs-online-0056b3?style=flat-square" alt="Docs"></a>
-  <img src="https://img.shields.io/badge/dependencies-0-brightgreen?style=flat-square" alt="Zero dependencies">
-  <img src="https://img.shields.io/badge/any%20stack-555555?style=flat-square" alt="Any stack">
+  <a href="https://github.com/marcop135/bullframe.css/actions/workflows/ci.yml"><img src="https://img.shields.io/github/actions/workflow/status/marcop135/bullframe.css/ci.yml?branch=main&style=flat-square" alt="CI status"></a>
   <a href="LICENSE"><img src="https://img.shields.io/github/license/marcop135/bullframe.css.svg?style=flat-square" alt="MIT License"></a>
 </p>
 
 ---
 
-## Why use it
+One-stylesheet CSS framework for plain HTML: no build step, no JavaScript. Typography, forms, tables, buttons, and layout out of the box.
 
-- **Semantic HTML first:** headings, forms, tables, and links are styled without a pile of classes
-- **Classless when you want it:** swap in `bullframe-classless.css` and keep markup as plain HTML
-- **Dark without a script:** always-dark builds, or system-default builds that follow `prefers-color-scheme`
-- **Accessible defaults:** focus-visible rings, reduced-motion respect, WCAG AA contrast on links and primary buttons
-- **Native CSS, any stack:** PostCSS builds, no Sass, no runtime JavaScript, solid cross-browser support
+Light or dark. Built for pages and forms: landings, docs, help centers, and marketing microsites.
 
-## When to use
+<!-- sri:cdn:start -->
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css">
+```
+<!-- sri:cdn:end -->
+
+[Check the docs →](https://bullframecss.marcopontili.com/)
+
+## Features
+
+- Plain HTML looks finished before you write a class
+- Classless when you want clean markup; classes when you need layout control
+- Light and dark out of the box, no theme script
+- One stylesheet, about 8 kB gzipped: type, forms, tables, buttons, layout
+- Restyle the whole page by changing a few colour tokens
+- Accessibility built in: clear focus, reduced motion respect, WCAG AA defaults
+- Works with any stack: drop it on a landing, docs site, or help center
+- npm or CDN; nothing to compile to use it
 
-Pages and forms, not complex app UIs: docs, blogs, landings, help centers, listings, micro-sites. One stylesheet for reset, type, forms, and layout. Class-based or classless. No Tailwind-style utility pipeline.
+## Examples
+
+Ready to copy: landings, blogs, forms, docs. Plain HTML, one stylesheet.
+
+<table>
+  <tr>
+    <td><a href="https://bullframecss.marcopontili.com/examples/typography/"><img src="src/docs/examples/screenshots/typography.png" alt="Typography" style="border: 1px solid #999; border-radius: 10px;" /></a></td>
+    <td><a href="https://bullframecss.marcopontili.com/examples/album/"><img src="src/docs/examples/screenshots/album.png" alt="Album" style="border: 1px solid #999; border-radius: 10px;" /></a></td>
+  </tr>
+  <tr>
+    <td><a href="https://bullframecss.marcopontili.com/examples/pricing/"><img src="src/docs/examples/screenshots/pricing.png" alt="Pricing" style="border: 1px solid #999; border-radius: 10px;" /></a></td>
+    <td><a href="https://bullframecss.marcopontili.com/examples/branded/"><img src="src/docs/examples/screenshots/branded.png" alt="Branded" style="border: 1px solid #999; border-radius: 10px;" /></a></td>
+  </tr>
+  <tr>
+    <td><a href="https://bullframecss.marcopontili.com/examples/blog/"><img src="src/docs/examples/screenshots/blog.png" alt="Blog" style="border: 1px solid #999; border-radius: 10px;" /></a></td>
+    <td><a href="https://bullframecss.marcopontili.com/examples/cover/"><img src="src/docs/examples/screenshots/cover.png" alt="Cover" style="border: 1px solid #999; border-radius: 10px;" /></a></td>
+  </tr>
+</table>
 
-## Getting started
+[Browse all examples →](https://bullframecss.marcopontili.com/examples)
+
+## Install
 
 ```bash
 npm install bullframe.css
@@ -42,30 +71,61 @@ npm install bullframe.css
 import 'bullframe.css';
 ```
 
+Default import: class-based, light. Other builds: `bullframe.css/classless`, `bullframe.css/dark`, and so on. See [Builds](#builds) below.
+
+### CDN
+
 ```html
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css">
 ```
 
-## Docs
+Always the latest release. Swap the path for another build (e.g. `bullframe.css/dist/css/bullframe-classless.min.css`).
 
-[bullframecss.marcopontili.com](https://bullframecss.marcopontili.com/)
+## Builds
 
-## Examples
+<details>
+<summary>See all 7 variants</summary>
 
-[Example templates](https://bullframecss.marcopontili.com/examples)
+Seven files in `dist/css/`, each with a minified twin and a source map. Pick one; do not combine them, except utilities on top of another build.
 
-## Kitchen sink
+| Build                                    | npm subpath                      | Use when                             |
+| ---------------------------------------- | -------------------------------- | ------------------------------------ |
+| `bullframe.css`                          | `bullframe.css`                  | Class-based, light                   |
+| `bullframe-dark.css`                     | `bullframe.css/dark`             | Class-based, always dark             |
+| `bullframe-system-default.css`           | `bullframe.css/system`           | Class-based, `prefers-color-scheme`  |
+| `bullframe-classless.css`                | `bullframe.css/classless`        | Classless, light                     |
+| `bullframe-classless-dark.css`           | `bullframe.css/classless/dark`   | Classless, always dark               |
+| `bullframe-classless-system-default.css` | `bullframe.css/classless/system` | Classless, `prefers-color-scheme`    |
+| `bullframe-utilities.css`                | `bullframe.css/utilities`        | `.bf-*` helpers only, no base styles |
 
-[Every styled element in one page](https://bullframecss.marcopontili.com/kitchen-sink/)
+**Classless** styles HTML tags only (no `.bf-*` classes). **Class-based** adds `.bf-*` grid, spacing, and helpers on top.
 
-## Contributing
+</details>
 
-See [CONTRIBUTING.md](./.github/CONTRIBUTING.md). Bug reports and feature requests go through [issues](https://github.com/marcop135/bullframe.css/issues).
+## Documentation
 
-## Author
+| Topic | |
+| ----- | --- |
+| [Docs](https://bullframecss.marcopontili.com/) | Home |
+| [Getting started](https://bullframecss.marcopontili.com/getting-started) | Install and pick a build |
+| [Examples](https://bullframecss.marcopontili.com/examples) | Page templates |
+| [Kitchen sink](https://bullframecss.marcopontili.com/kitchen-sink/) | Every element in one place |
+| [Variables](https://bullframecss.marcopontili.com/variables) | `--bf-*` tokens |
+| [Components](https://bullframecss.marcopontili.com/components/) | Cards, modals, navigation, buttons |
+| [Theming](https://bullframecss.marcopontili.com/theming) | Colours and dark mode |
+| [API reference](https://bullframecss.marcopontili.com/api-reference) | Full token and class list |
+| [Changelog](./CHANGELOG.md) | Release notes |
 
-[Marco Pontili](https://marcopontili.com)
+## Contributing
+
+See [CONTRIBUTING.md](./.github/CONTRIBUTING.md).
+
+Bugs → [issues](https://github.com/marcop135/bullframe.css/issues).
 
 ## License
 
 [MIT](./LICENSE)
+
+## Author
+
+[Marco Pontili](https://marcopontili.com)

package/dist/css/bullframe-classless-dark.css

@@ -1,8 +1,8 @@
-/* ! Bullframe CSS v6.0.0 | MIT License | https://github.com/marcop135/bullframe.css  */
+/* ! Bullframe CSS v6.1.0 | MIT License | https://github.com/marcop135/bullframe.css  */
 
 /* Always-dark classless build. */
 
-/* Classless build: semantic element styles only (no .bf-* utilities). */
+/* Classless build: semantic element styles only (no .bf-* classes). */
 
 /* Variables */
 /* Design tokens (--bf-*). Shared by every build variant.
@@ -34,6 +34,11 @@
   /* Invalid / error */
   --bf-red: rgb(255 0 0);
 
+  /* Focus ring (prefers-contrast: more raises colour for WCAG 1.4.11) */
+  --bf-focus-ring-color: var(--bf-orange);
+  --bf-focus-ring-width: 0.2rem;
+  --bf-focus-ring-offset: 0.3rem;
+
   /* Dark-mode surfaces (used by utility-global-dark*.css) */
   --bf-dark-bg: rgb(28 28 28);
   --bf-dark-link: rgb(77 165 255);
@@ -111,11 +116,6 @@ template {
  * Light UA improvements; complements Bullframe base styles. */
 
 @layer {
-  /* Spacing between content and focus outline (enhances focus.css). */
-  :focus-visible {
-    outline-offset: 3px;
-  }
-
   /* Disable mobile landscape text inflation on optimized layouts. */
   html {
     -webkit-text-size-adjust: none;
@@ -123,14 +123,11 @@ template {
          text-size-adjust: none;
   }
 
-  /* Comfortable default root line-height (body still uses --bf-body-line-height). */
-  html {
-    line-height: 1.5;
-  }
-
   /* Stable scrollbar gutter avoids layout jump on short pages. */
-  html {
-    scrollbar-gutter: stable;
+  @supports (scrollbar-gutter: stable) {
+    html {
+      scrollbar-gutter: stable;
+    }
   }
 
   /* Nested h1 size/margin: match modern UA (Safari still nests sectioning styles). */
@@ -139,13 +136,6 @@ template {
     margin-block: 0.67em;
   }
 
-  /* abbr[title]: dotted underline + help cursor across engines. */
-  abbr[title] {
-    cursor: help;
-    text-decoration-line: underline;
-    text-decoration-style: dotted;
-  }
-
   /* mark: system Highlight colors under forced-colors. */
   @media (forced-colors: active) {
     mark {
@@ -215,17 +205,12 @@ template {
     direction: ltr;
   }
 
-  /* Tables: collapsed borders + cell padding for scanability. */
+  /* Tables: outer border. Cell borders and padding come from
+   * miscellaneous/tables.css, which is unlayered and therefore wins. */
   table {
     border: 1px solid currentColor;
   }
 
-  th,
-  td {
-    border: 1px solid currentColor;
-    padding: 0.25em 0.5em;
-  }
-
   /* Soft dialog / popover enter transitions (skip when reduced-motion is on). */
   @media (prefers-reduced-motion: no-preference) {
     dialog::backdrop {
@@ -259,26 +244,11 @@ template {
     }
   }
 
-  /* Keep [hidden] hard-hidden except until-found. */
-  [hidden]:not([hidden='until-found']) {
-    display: none !important;
-  }
-
   /* Images as blocks (max-width still from embedded-content.css). */
   img {
     display: block;
   }
 
-  /* summary: pointer on the whole control, not only ::marker. */
-  summary {
-    cursor: default;
-  }
-
-  /* iframes: no default border. */
-  iframe {
-    border: none;
-  }
-
   /* Popovers: anchor near trigger when position-area is supported. */
   @supports (position-area: block-end span-inline-end) {
     [popover] {
@@ -356,7 +326,18 @@ h6 {
   color: inherit;
   line-height: 1.25;
   margin-bottom: var(--bf-spacing-lg);
-  text-wrap: balance;
+}
+
+/* Balanced headings where supported; no-op elsewhere. */
+@supports (text-wrap: balance) {
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    text-wrap: balance;
+  }
 }
 
 h1 {
@@ -441,6 +422,7 @@ strong {
   font-weight: inherit;
 }
 
+/* stylelint-disable-next-line no-duplicate-selectors -- normalize.css Safari fix */
 b,
 strong {
   font-weight: bolder;
@@ -1116,7 +1098,7 @@ a:not([href], [class]):hover {
 a:not([href], [tabindex]):focus {
   outline: 0;
 }
-/* Keyboard-first focus: orange :focus-visible ring; mute mouse outline.
+/* Keyboard-first focus: :focus-visible ring from --bf-focus-ring-*; mute mouse outline.
  * Text-like controls clear UA outline here; field chrome is in forms/styling.css. */
 
 :where(:focus:not(:focus-visible)) {
@@ -1129,8 +1111,8 @@ a:not([href], [tabindex]):focus {
 }
 
 :focus-visible {
-  outline: 0.2rem solid var(--bf-orange);
-  outline-offset: 0.3rem;
+  outline: var(--bf-focus-ring-width) solid var(--bf-focus-ring-color);
+  outline-offset: var(--bf-focus-ring-offset);
 }
 
 /* Clear UA outline on text-like controls (styled fields keep their own chrome).
@@ -1155,8 +1137,7 @@ button:focus,
 [type='checkbox']:focus,
 input[list]:focus,
 select:focus,
-textarea:focus,
-.bf-btn:focus {
+textarea:focus {
   outline: 0;
 }
 /* List spacing and nav list reset. */
@@ -1187,7 +1168,6 @@ ol {
 nav ol,
 nav ul {
   list-style: none;
-  list-style-image: none;
   margin-left: 0;
 }
 
@@ -1430,6 +1410,12 @@ caption {
     text-decoration: underline;
   }
 
+  /* Darker amber clears WCAG 1.4.11 (3:1) on white, --bf-light and --bf-dark-bg;
+   * the default --bf-orange ring is only ~2:1 on white. */
+  :root {
+    --bf-focus-ring-color: rgb(184 115 0);
+  }
+
   :focus-visible {
     outline-width: 0.3rem;
     outline-offset: 0.4rem;
@@ -1468,12 +1454,16 @@ caption {
   button,
   [type='button'],
   [type='reset'],
-  [type='submit'],
-  .bf-btn {
+  [type='submit'] {
     border: 1px solid ButtonText;
   }
 }
-/* Always-dark overrides for classless (no media query). */
+/* Always-dark overrides for classless (no media query, no .bf-* selectors). */
+
+/* Element-level dark-mode rules, shared by the class-based and classless dark
+ * sheets. Contains no .bf-* selector, so the classless builds can import it as
+ * they are. Class-based extras live in _utility-global-dark-shared.css.
+ * Underscore prefix excludes this file from the buildAllCss glob. */
 
 html {
   color: var(--bf-light);
@@ -1621,6 +1611,28 @@ button:focus,
   box-shadow: 0 0 0 3px var(--bf-dark-button-shadow);
 }
 
+dialog {
+  color: var(--bf-light);
+  background-color: var(--bf-dark-bg);
+}
+
+caption {
+  color: var(--bf-gray-light);
+}
+
+progress[value] {
+  background: var(--bf-gray-dark-extra);
+  color: var(--bf-blue);
+}
+
+progress[value]::-webkit-progress-bar {
+  background: var(--bf-gray-dark-extra);
+}
+
+progress[value]::-webkit-progress-value {
+  background: var(--bf-blue);
+}
+
 a:focus,
 input:focus {
   outline-color: rgb(214 140 0); /* orange -15% */
@@ -1629,11 +1641,6 @@ input:focus {
 :focus-visible {
   outline-color: rgb(214 140 0); /* orange -15% */
 }
-
-dialog {
-  color: var(--bf-light);
-  background-color: var(--bf-dark-bg);
-}
 /* Dark scrollbar colors (Firefox + WebKit). */
 
 html {