npm - bullframe.css - Versions diffs - 6.0.0 → 6.2.0 - Mend

bullframe.css 6.0.0 → 6.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (47) hide show

package/CHANGELOG.md +48 -1
package/README.md +102 -28
package/bin/bullframe.mjs +277 -0
package/dist/css/bullframe-classless-dark.css +65 -58
package/dist/css/bullframe-classless-dark.css.map +1 -1
package/dist/css/bullframe-classless-dark.min.css +1 -1
package/dist/css/bullframe-classless-dark.min.css.map +1 -1
package/dist/css/bullframe-classless-system-default.css +61 -102
package/dist/css/bullframe-classless-system-default.css.map +1 -1
package/dist/css/bullframe-classless-system-default.min.css +1 -1
package/dist/css/bullframe-classless-system-default.min.css.map +1 -1
package/dist/css/bullframe-classless.css +37 -52
package/dist/css/bullframe-classless.css.map +1 -1
package/dist/css/bullframe-classless.min.css +1 -1
package/dist/css/bullframe-classless.min.css.map +1 -1
package/dist/css/bullframe-dark.css +216 -155
package/dist/css/bullframe-dark.css.map +1 -1
package/dist/css/bullframe-dark.min.css +1 -1
package/dist/css/bullframe-dark.min.css.map +1 -1
package/dist/css/bullframe-system-default.css +221 -154
package/dist/css/bullframe-system-default.css.map +1 -1
package/dist/css/bullframe-system-default.min.css +1 -1
package/dist/css/bullframe-system-default.min.css.map +1 -1
package/dist/css/bullframe-utilities.css +132 -65
package/dist/css/bullframe-utilities.css.map +1 -1
package/dist/css/bullframe-utilities.min.css +1 -1
package/dist/css/bullframe-utilities.min.css.map +1 -1
package/dist/css/bullframe.css +160 -115
package/dist/css/bullframe.css.map +1 -1
package/dist/css/bullframe.min.css +1 -1
package/dist/css/bullframe.min.css.map +1 -1
package/dist/skills/AGENTS.bullframe.md +46 -0
package/dist/skills/_shared/builds.md +66 -0
package/dist/skills/_shared/conventions.md +93 -0
package/dist/skills/api.json +1023 -0
package/dist/skills/bullframe-convert/SKILL.md +117 -0
package/dist/skills/bullframe-convert/examples/after.html +43 -0
package/dist/skills/bullframe-convert/examples/before.html +44 -0
package/dist/skills/bullframe-core/SKILL.md +143 -0
package/dist/skills/bullframe-docs-page/SKILL.md +89 -0
package/dist/skills/bullframe-docs-page/examples/docs-page.html +72 -0
package/dist/skills/bullframe-forms/SKILL.md +99 -0
package/dist/skills/bullframe-forms/examples/contact-form.html +67 -0
package/dist/skills/bullframe-landing-page/SKILL.md +96 -0
package/dist/skills/bullframe-landing-page/examples/landing.html +98 -0
package/dist/skills/index.json +134 -0
package/package.json +21 -7

package/dist/skills/bullframe-forms/examples/contact-form.html ADDED Viewed

@@ -0,0 +1,67 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Contact · Fieldnote</title>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css" />
+  </head>
+  <body>
+    <a class="bf-skip-link" href="#main-content">Skip to content</a>
+    <main id="main-content" class="bf-container bf-container--break-md bf-p-b-4">
+      <h1>Contact</h1>
+      <p class="bf-lead">Tell us what you need. We reply within one business day.</p>
+      <div class="bf-row">
+        <div class="bf-col-7">
+          <form action="/contact" method="post">
+            <label for="contact-name">Name</label>
+            <input id="contact-name" type="text" name="name" autocomplete="name" required />
+            <label for="contact-email">Email</label>
+            <input id="contact-email" type="email" name="email" autocomplete="email" required />
+            <label for="contact-subject">Subject</label>
+            <select id="contact-subject" name="subject" required>
+              <option value="">Choose one&hellip;</option>
+              <option value="sales">Sales</option>
+              <option value="support">Support</option>
+              <option value="other">Other</option>
+            </select>
+            <label for="contact-message">Message</label>
+            <textarea id="contact-message" name="message" rows="5" aria-describedby="contact-message-hint" required></textarea>
+            <p id="contact-message-hint"><small>Up to 2000 characters.</small></p>
+            <fieldset>
+              <legend>How should we reply?</legend>
+              <input id="reply-email" type="radio" name="reply" value="email" checked />
+              <label for="reply-email">By email</label>
+              <input id="reply-phone" type="radio" name="reply" value="phone" />
+              <label for="reply-phone">By phone</label>
+            </fieldset>
+            <p class="bf-m-t-2">
+              <button type="submit" class="bf-btn bf-btn--primary">Send message</button>
+            </p>
+          </form>
+        </div>
+        <div class="bf-col-5">
+          <aside style="border: 1px solid var(--bf-gray-light); border-radius: var(--bf-spacing-sm); padding: var(--bf-spacing-xl)">
+            <h2 class="bf-m-t-0">Office</h2>
+            <p>
+              Via Example 12<br />
+              00100 Rome, Italy
+            </p>
+            <h3>Hours</h3>
+            <p class="bf-m-b-0">Mon to Fri, 09:00 to 18:00 CET</p>
+          </aside>
+        </div>
+      </div>
+    </main>
+  </body>
+</html>

package/dist/skills/bullframe-landing-page/SKILL.md ADDED Viewed

@@ -0,0 +1,96 @@
+---
+name: bullframe-landing-page
+description: Build a marketing or product landing page with Bullframe CSS. Use for a hero, feature row, pricing block, call to action, or any multi-section marketing page.
+bullframe: '>=6.1.0 <7.0.0'
+builds: [bullframe.css, bullframe-dark.css, bullframe-system-default.css]
+requires: [bullframe-core]
+docs: ['/layout', '/utilities/grid', '/buttons', '/components/cards']
+---
+# Landing page
+<!-- bf-absent: bf-col-md-6, bf-col-lg-4, bf-card, bf-hero, bf-section -->
+A landing page in Bullframe is one HTML file: a container, a few `.bf-row` sections, and
+composed markup for anything that looks like a card. No JavaScript, no build step.
+## When to use
+A marketing page, product page, cover page, pricing page or feature page. For a form-first
+page use `bullframe-forms`; for prose use `bullframe-docs-page`.
+## Inputs to gather
+Product name, one-sentence value proposition, primary and secondary call to action with
+their targets, the sections wanted, and whether the page is light, dark or follows the OS.
+Assume a class-based light build when nothing is said, and state that in one line.
+## Rules
+1. One `<h1>`, in the hero. Sections below it use `<h2>`, cards inside them `<h3>`. Never
+   skip a level.
+2. Wrap the page body in `.bf-container.bf-container--break-md`. That caps the width and
+   stacks every row below 768px.
+3. Each section is a `.bf-row` whose `.bf-col-*` children sum to 12 or less. Twelfths only:
+   there are no per-breakpoint column classes.
+4. The primary action is `<a class="bf-btn bf-btn--primary">`, the secondary is
+   `<a class="bf-btn">`. One primary per screen.
+5. Cards are `<article>` with a border, radius and padding written as inline
+   `var(--bf-*)` declarations. There is no card class.
+6. Use `<table class="bf-table bf-table--zebra">` with a `<caption>` for a comparison
+   table, not a grid of divs.
+7. Decorative images take `alt=""`. Meaningful ones take real alt text.
+8. Keep custom CSS out of the page. If the design needs brand colour, override
+   `--bf-blue` and `--bf-blue-light` in a `<style>` block or project stylesheet.
+## Recipe
+1. Pick the build (`bullframe-core` has the table).
+2. Emit the scaffold: doctype, `lang`, charset, viewport, title, description, one
+   stylesheet link.
+3. `<body>` opens with the skip link, then `<header>` with a `<nav aria-label="Primary">`
+   if the page has navigation.
+4. Hero: `.bf-row` with a `.bf-col-7` text column and a `.bf-col-5` media column.
+5. Feature row: `.bf-row` with three `.bf-col-4` articles.
+6. Comparison or pricing: a `.bf-table` with a caption and scoped headers.
+7. Closing call to action, then `<footer>`.
+8. Re-read the output and delete any class that is not in `api.json`.
+## Example
+[`examples/landing.html`](examples/landing.html) is a complete page built to these rules.
+It validates under the project's html-validate a11y config and contains no custom CSS
+beyond inline token references.
+## Expected output
+One `index.html` (or the path the user asked for) that opens in a browser and renders
+finished with a single stylesheet link. No placeholder classes, no framework mixing, no
+`<style>` block other than declared token overrides.
+## Failure modes
+- Writing `.bf-col-md-6` or `.bf-col-lg-4`. They do not exist; stacking is a container
+  modifier.
+- Columns summing past 12, which wraps the row unintentionally.
+- Inventing `.bf-card`, `.bf-hero` or `.bf-section`.
+- Using `<div>` for what is a `<section>`, `<article>`, `<nav>` or `<footer>`.
+- Jumping from `<h1>` to `<h3>`.
+- Reimplementing the grid in a `<style>` block because a breakpoint class seemed missing.
+- Adding a colour as a hex literal instead of overriding the token, which then does not
+  follow the dark build.
+## Do not
+- Do not add JavaScript for layout, theming or animation.
+- Do not link a second CSS framework or a second base build.
+- Do not use `bf-container--fluid` for a marketing page unless the design is edge to edge.
+- Do not set `outline: none` on the buttons.
+## Canonical docs
+- Layout: <https://bullframecss.marcopontili.com/layout.md>
+- Grid: <https://bullframecss.marcopontili.com/utilities/grid.md>
+- Buttons: <https://bullframecss.marcopontili.com/buttons.md>
+- Card patterns: <https://bullframecss.marcopontili.com/components/cards.md>
+- Live examples: <https://bullframecss.marcopontili.com/examples>

package/dist/skills/bullframe-landing-page/examples/landing.html ADDED Viewed

@@ -0,0 +1,98 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Fieldnote · Notebook for site drafts</title>
+    <meta name="description" content="Capture outlines, screenshots and links in one place before you ship." />
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bullframe.css" />
+  </head>
+  <body>
+    <a class="bf-skip-link" href="#main-content">Skip to content</a>
+    <header class="bf-container bf-container--break-md bf-p-t-3">
+      <nav aria-label="Primary">
+        <a href="#features">Features</a> · <a href="#pricing">Pricing</a> ·
+        <a href="#start">Get started</a>
+      </nav>
+    </header>
+    <main id="main-content" class="bf-container bf-container--break-md bf-p-b-4">
+      <section class="bf-row bf-m-b-4">
+        <div class="bf-col-7">
+          <h1>Notebook for site drafts</h1>
+          <p class="bf-lead">Capture outlines, screenshots and links in one place before you ship.</p>
+          <p>
+            <a class="bf-btn bf-btn--primary" href="#start">Start free</a>
+            <a class="bf-btn" href="#pricing">See pricing</a>
+          </p>
+        </div>
+        <div class="bf-col-5">
+          <p class="bf-t-center bf-p-4" style="background: var(--bf-light); border-radius: var(--bf-spacing-sm)">Screenshot goes here</p>
+        </div>
+      </section>
+      <section id="features" class="bf-m-b-4">
+        <h2>What you get</h2>
+        <div class="bf-row">
+          <div class="bf-col-4">
+            <article style="border: 1px solid var(--bf-gray-light); border-radius: var(--bf-spacing-sm); padding: var(--bf-spacing-xl)">
+              <h3 class="bf-m-t-0">Shared boards</h3>
+              <p class="bf-m-b-0">Invite a teammate and keep every draft in one board.</p>
+            </article>
+          </div>
+          <div class="bf-col-4">
+            <article style="border: 1px solid var(--bf-gray-light); border-radius: var(--bf-spacing-sm); padding: var(--bf-spacing-xl)">
+              <h3 class="bf-m-t-0">Fast search</h3>
+              <p class="bf-m-b-0">Find a note by title, tag or URL snippet.</p>
+            </article>
+          </div>
+          <div class="bf-col-4">
+            <article style="border: 1px solid var(--bf-gray-light); border-radius: var(--bf-spacing-sm); padding: var(--bf-spacing-xl)">
+              <h3 class="bf-m-t-0">Export</h3>
+              <p class="bf-m-b-0">Download Markdown or a zip of attached images.</p>
+            </article>
+          </div>
+        </div>
+      </section>
+      <section id="pricing" class="bf-m-b-4">
+        <h2>Pricing</h2>
+        <table class="bf-table bf-table--zebra">
+          <caption>
+            Plans and monthly price
+          </caption>
+          <thead>
+            <tr>
+              <th scope="col">Plan</th>
+              <th scope="col">Price</th>
+              <th scope="col">Boards</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Solo</td>
+              <td>Free</td>
+              <td>3</td>
+            </tr>
+            <tr>
+              <td>Team</td>
+              <td>12 EUR</td>
+              <td>Unlimited</td>
+            </tr>
+          </tbody>
+        </table>
+      </section>
+      <section id="start">
+        <h2>Start a board</h2>
+        <p>No card, no install. One board is free forever.</p>
+        <p><a class="bf-btn bf-btn--primary" href="#start">Start free</a></p>
+      </section>
+    </main>
+    <footer class="bf-container bf-container--break-md bf-p-b-4">
+      <p class="bf-m-b-0">© 2026 Fieldnote</p>
+    </footer>
+  </body>
+</html>

package/dist/skills/index.json ADDED Viewed

@@ -0,0 +1,134 @@
+{
+  "name": "bullframe.css",
+  "version": "6.2.0",
+  "docs": "https://bullframecss.marcopontili.com",
+  "api": "api.json",
+  "agentsBlock": "AGENTS.bullframe.md",
+  "shared": [
+    "_shared/builds.md",
+    "_shared/conventions.md"
+  ],
+  "skills": [
+    {
+      "name": "bullframe-core",
+      "description": "Core conventions for writing HTML styled with Bullframe CSS. Use before any other Bullframe skill, and whenever choosing a build, scaffolding a page, theming with tokens, or deciding whether to write custom CSS.",
+      "path": "bullframe-core/SKILL.md",
+      "bullframe": ">=6.1.0 <7.0.0",
+      "builds": [
+        "bullframe.css",
+        "bullframe-dark.css",
+        "bullframe-system-default.css",
+        "bullframe-classless.css",
+        "bullframe-classless-dark.css",
+        "bullframe-classless-system-default.css",
+        "bullframe-utilities.css"
+      ],
+      "requires": [],
+      "docs": [
+        "https://bullframecss.marcopontili.com/getting-started",
+        "https://bullframecss.marcopontili.com/variables",
+        "https://bullframecss.marcopontili.com/theming",
+        "https://bullframecss.marcopontili.com/api-reference"
+      ],
+      "files": [
+        "SKILL.md"
+      ]
+    },
+    {
+      "name": "bullframe-convert",
+      "description": "Convert existing HTML and CSS to Bullframe CSS. Use when migrating a page off Bootstrap, Tailwind, a hand-rolled stylesheet, or an older Bullframe version, and when asked to remove custom CSS in favour of the framework.",
+      "path": "bullframe-convert/SKILL.md",
+      "bullframe": ">=6.1.0 <7.0.0",
+      "builds": [
+        "bullframe.css",
+        "bullframe-classless.css",
+        "bullframe-utilities.css"
+      ],
+      "requires": [
+        "bullframe-core"
+      ],
+      "docs": [
+        "https://bullframecss.marcopontili.com/migration",
+        "https://bullframecss.marcopontili.com/utilities",
+        "https://bullframecss.marcopontili.com/api-reference"
+      ],
+      "files": [
+        "SKILL.md",
+        "examples/after.html",
+        "examples/before.html"
+      ]
+    },
+    {
+      "name": "bullframe-docs-page",
+      "description": "Build a documentation, article or reference page with Bullframe CSS. Use for docs, guides, changelogs, help center articles, blog posts, or any prose-first page.",
+      "path": "bullframe-docs-page/SKILL.md",
+      "bullframe": ">=6.1.0 <7.0.0",
+      "builds": [
+        "bullframe-classless.css",
+        "bullframe-classless-dark.css",
+        "bullframe-classless-system-default.css",
+        "bullframe.css"
+      ],
+      "requires": [
+        "bullframe-core"
+      ],
+      "docs": [
+        "https://bullframecss.marcopontili.com/typography",
+        "https://bullframecss.marcopontili.com/getting-started",
+        "https://bullframecss.marcopontili.com/examples"
+      ],
+      "files": [
+        "SKILL.md",
+        "examples/docs-page.html"
+      ]
+    },
+    {
+      "name": "bullframe-forms",
+      "description": "Build accessible forms with Bullframe CSS. Use when creating a contact form, login, signup, checkout, search box, filter bar, or any page with input controls.",
+      "path": "bullframe-forms/SKILL.md",
+      "bullframe": ">=6.1.0 <7.0.0",
+      "builds": [
+        "bullframe.css",
+        "bullframe-dark.css",
+        "bullframe-system-default.css",
+        "bullframe-classless.css"
+      ],
+      "requires": [
+        "bullframe-core"
+      ],
+      "docs": [
+        "https://bullframecss.marcopontili.com/forms",
+        "https://bullframecss.marcopontili.com/components/forms",
+        "https://bullframecss.marcopontili.com/accessibility"
+      ],
+      "files": [
+        "SKILL.md",
+        "examples/contact-form.html"
+      ]
+    },
+    {
+      "name": "bullframe-landing-page",
+      "description": "Build a marketing or product landing page with Bullframe CSS. Use for a hero, feature row, pricing block, call to action, or any multi-section marketing page.",
+      "path": "bullframe-landing-page/SKILL.md",
+      "bullframe": ">=6.1.0 <7.0.0",
+      "builds": [
+        "bullframe.css",
+        "bullframe-dark.css",
+        "bullframe-system-default.css"
+      ],
+      "requires": [
+        "bullframe-core"
+      ],
+      "docs": [
+        "https://bullframecss.marcopontili.com/layout",
+        "https://bullframecss.marcopontili.com/utilities/grid",
+        "https://bullframecss.marcopontili.com/buttons",
+        "https://bullframecss.marcopontili.com/components/cards"
+      ],
+      "files": [
+        "SKILL.md",
+        "examples/landing.html"
+      ]
+    }
+  ]
+}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "bullframe.css",
-  "version": "6.0.0",
+  "version": "6.2.0",
   "type": "module",
   "description": "Bullframe CSS is a lightweight CSS framework for fast, responsive, accessible UIs. Semantic by default. Any stack. Classless when you want it. System dark built in. Seven builds, solid cross-browser support.",
   "main": "dist/css/bullframe.css",
@@ -18,8 +18,14 @@
     "./dist/css/*": "./dist/css/*",
     "./package.json": "./package.json"
   },
+  "bin": {
+    "bullframe": "bin/bullframe.mjs",
+    "bullframe.css": "bin/bullframe.mjs"
+  },
   "files": [
+    "bin/",
     "dist/css/",
+    "dist/skills/",
     "LICENSE",
     "README.md",
     "CHANGELOG.md"
@@ -31,21 +37,29 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "prepublishOnly": "npm run build",
+    "prepublishOnly": "npm run build && npm run skills:build",
     "lint": "stylelint \"src/**/*.css\"",
     "lint:fix": "stylelint \"src/**/*.css\" --fix",
     "lint:html": "html-validate \"src/**/*.html\"",
-    "format": "prettier --write \"src/**/*.css\" \"src/**/*.html\" \"docs/**/*.md\" \"docs/.vitepress/**/*.css\" \"docs/.vitepress/**/*.mjs\" \"docs/.vitepress/**/*.js\" \"scripts/**/*.mjs\"",
-    "format:check": "prettier --check \"src/**/*.css\" \"src/**/*.html\" \"docs/**/*.md\" \"docs/.vitepress/**/*.css\" \"docs/.vitepress/**/*.mjs\" \"docs/.vitepress/**/*.js\" \"scripts/**/*.mjs\"",
+    "format": "prettier --write \"src/**/*.css\" \"src/**/*.html\" \"src/**/*.mjs\" \"src/skills/**/*.md\" \"bin/**/*.mjs\" \"tests/**/*.mjs\" \"docs/**/*.md\" \"docs/.vitepress/**/*.css\" \"docs/.vitepress/**/*.mjs\" \"docs/.vitepress/**/*.js\" \"scripts/**/*.mjs\"",
+    "format:check": "prettier --check \"src/**/*.css\" \"src/**/*.html\" \"src/**/*.mjs\" \"src/skills/**/*.md\" \"bin/**/*.mjs\" \"tests/**/*.mjs\" \"docs/**/*.md\" \"docs/.vitepress/**/*.css\" \"docs/.vitepress/**/*.mjs\" \"docs/.vitepress/**/*.js\" \"scripts/**/*.mjs\"",
     "test:e2e": "playwright test",
     "test:e2e:update": "playwright test --update-snapshots",
+    "test:e2e:sync-from-ci": "node scripts/sync-e2e-baselines-from-ci.mjs",
+    "skills:build": "node scripts/build-skills.mjs",
+    "skills:check": "node --test tests/skills/*.test.mjs",
+    "skills:snapshot": "node scripts/build-skills.mjs --snapshot",
     "docs:dev": "npm run docs:sync-public && vitepress dev docs",
     "docs:sync-public": "node scripts/sync-docs-public.mjs",
-    "docs:api-reference": "node scripts/build-api-reference.mjs",
+    "docs:api-reference": "node scripts/build-api-reference.mjs && prettier --write docs/api-reference.md",
     "docs:sri": "node scripts/generate-sri.mjs && prettier --write docs/getting-started.md docs/theming.md docs/theming/dark-mode.md",
-    "docs:build": "npm run build && npm run docs:sri && npm run docs:sync-public && vitepress build docs",
+    "docs:build": "npm run build && npm run skills:build && npm run docs:sri && npm run docs:sync-public && vitepress build docs",
     "docs:preview": "vitepress preview docs",
-    "examples:shots": "node scripts/capture-example-screenshots.mjs"
+    "examples:shots": "node scripts/capture-example-screenshots.mjs",
+    "kitchen-sink:variants": "node scripts/generate-kitchen-sink-variants.mjs",
+    "brand:icons": "node scripts/render-brand-icons.mjs",
+    "brand:images": "node scripts/generate-brand-images.mjs",
+    "brand:images:check": "node scripts/generate-brand-images.mjs --check"
   },
   "repository": {
     "type": "git",