{"id":49791877,"url":"https://github.com/franbarinstance/bootstrapdyn","last_synced_at":"2026-05-12T05:08:29.906Z","repository":{"id":356823447,"uuid":"1234155595","full_name":"FranBarInstance/BootstrapDyn","owner":"FranBarInstance","description":"Modular \u0026 Dynamic Bootstrap 5","archived":false,"fork":false,"pushed_at":"2026-05-09T22:45:36.000Z","size":452,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-05-10T00:28:34.969Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/FranBarInstance.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null}},"created_at":"2026-05-09T20:25:07.000Z","updated_at":"2026-05-09T22:45:39.000Z","dependencies_parsed_at":null,"dependency_job_id":null,"html_url":"https://github.com/FranBarInstance/BootstrapDyn","commit_stats":null,"previous_names":["franbarinstance/bootstrapdyn"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/FranBarInstance/BootstrapDyn","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FranBarInstance%2FBootstrapDyn","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FranBarInstance%2FBootstrapDyn/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FranBarInstance%2FBootstrapDyn/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FranBarInstance%2FBootstrapDyn/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/FranBarInstance","download_url":"https://codeload.github.com/FranBarInstance/BootstrapDyn/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/FranBarInstance%2FBootstrapDyn/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32924413,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-11T17:09:15.040Z","status":"online","status_checked_at":"2026-05-12T02:00:06.338Z","response_time":102,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-05-12T05:08:27.199Z","updated_at":"2026-05-12T05:08:29.896Z","avatar_url":"https://github.com/FranBarInstance.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# BootstrapDyn – Modular \u0026 Dynamic Bootstrap 5\n\nBootstrapDyn is a build-time utility that transforms compiled Bootstrap 5.3 CSS into a modular CSS variable architecture.\n\nIts goal is not to be a visual theme editor or a collection of ready-made themes. BootstrapDyn generates the CSS modules that make those tools possible: default theme modules, fixed component CSS, optional contrast behavior, and a bundler-friendly load order. Users and external applications can then create their own dynamic Bootstrap themes by replacing module files instead of editing Bootstrap component rules.\n\nThe core idea is simple: **make Bootstrap themeable by substitution, not by overriding**.\n\n## What BootstrapDyn Produces\n\nBootstrapDyn takes `bootstrap/dist/css/bootstrap.css` and generates:\n\n1. `dist/default-*.css` modules for themeable concerns such as color, typography, spacing, borders, shadows, forms, layout, sizing, motion, layers, and grid.\n2. `dist/bootstrap-dyn.css`, the fixed Bootstrap-compatible component layer that consumes those variables.\n3. `dist/contrast-dyn.css`, an optional behavior module for dynamic contrast.\n4. `dist/bootstrap-dyn-bundle.css` and `dist/bootstrap-dyn-bundle.min.css`, optional single-file bundles for production usage.\n\nTheme authors replace one or more `default-*.css` files with complete custom modules that follow the same contract. Bootstrap HTML, component classes, and JavaScript behavior remain unchanged.\n\n## What BootstrapDyn Is Not\n\nBootstrapDyn is not a runtime JavaScript theme engine, a UI for editing themes, or a Sass-level Bootstrap fork. It is the CSS compatibility layer that lets those tools exist.\n\nFor example, a theme editor can use BootstrapDyn as its foundation: expose the generated module variables in a UI, let users edit values, export complete replacement modules, and keep `bootstrap-dyn.css` untouched. One example of that kind of editor is [bootstrap-dynamic-themes](https://github.com/FranBarInstance/bootstrap-dynamic-themes).\n\nUsers do not need an editor to create themes. They can download this project, copy the generated `dist/default-*.css` modules, rename them with a theme prefix, and edit the variable values directly. AI coding agents can also use the included [`theme-creation`](.agents/skills/theme-creation/SKILL.md) skill to create or update a complete theme module set.\n\nExample prompt:\n\n```text\nUse the theme-creation skill to create a BootstrapDyn theme named \"midnight\" in path/to/theme. Make it dark, high contrast, with cooler primary colors and slightly larger border radii.\n```\n\n## Visual Parity and Compatibility\n\nA core principle of this project is **strict visual fidelity**. The files generated in `dist/` are designed to produce the exact same visual result as the original Bootstrap CSS when using the default variables. This ensures that:\n1. Your project starts with the 100% standard Bootstrap \"look and feel\".\n2. **Zero HTML changes**: You don't need to modify your templates, component structures, or Bootstrap classes. Compatibility is maintained purely at the CSS layer.\n3. All Bootstrap components behave and render identically.\n4. You only deviate from the original design when you explicitly choose to replace default modules with theme modules.\n\n### Single-file bundle\n\nFor production deployments that prefer a single HTTP request, use the build script to run the extractor pipeline and bundler in one step:\n\n```bash\nnpm run build\n```\n\nThis runs `extractor/main.js` followed by `scripts/bundle.mjs`, producing the 14 individual files plus `dist/bootstrap-dyn-bundle.css` and `dist/bootstrap-dyn-bundle.min.css`. Load the minified bundle instead of the 14 individual files:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"dist/bootstrap-dyn-bundle.min.css\"\u003e\n```\n\nThe bundle contains all modules in the canonical load order defined in [`.specify/theme-spec.md`](.specify/theme-spec.md). The bundler discovers files by canonical suffix (`*-color.css`, `*-typography.css`, etc.), so it works with any theme directory, not just `dist/`. See [`examples/demo/bundle.html`](examples/demo/bundle.html) for a complete demo page.\n\n## How `contrast-dyn.css` works (optional)\n\nA common challenge in Bootstrap 5+ is handling accessibility and contrast dynamically without bloating the HTML with `data-bs-theme` attributes.\n\n### The standard (static) approach\n\nIn standard Bootstrap, developers must explicitly define the contrast mode for each container. If you have a dark background, you add `data-bs-theme=\"dark\"` to make the child elements (text, links, buttons) visible.\n\n```html\n\u003c!-- You must know IN ADVANCE that bg-primary is dark --\u003e\n\u003cheader class=\"bg-primary\" data-bs-theme=\"dark\"\u003e\n    \u003ca class=\"nav-link\" href=\"#\"\u003eStatic Link\u003c/a\u003e\n\u003c/header\u003e\n```\n\n**The limitation:** This approach is hardcoded into your HTML. If you change your theme to a light version at runtime, the `data-bs-theme=\"dark\"` attribute will remain, making the text unreadable (white text on a light background).\n\n### The BootstrapDyn (dynamic) approach\n\nBootstrapDyn handles contrast at the CSS variable level. Each color theme defines its own contrast variables (`--bs-primary-contrast`, `--bs-secondary-contrast`, etc.) inside `default-color.css` (or your custom color theme). `contrast-dyn.css` only consumes those variables — it does not define them.\n\nThis means if you create a custom color theme, you must provide the matching `*-contrast` variables alongside your palette so that `contrast-dyn.css` can resolve the correct text colors.\n\n```html\n\u003c!-- Clean, agnostic HTML --\u003e\n\u003cheader class=\"bg-primary\"\u003e\n    \u003ca class=\"nav-link\" href=\"#\"\u003eAutomatic Dynamic Link\u003c/a\u003e\n\u003c/header\u003e\n```\n\nThe `text-reset` class is recommended when you want child links to inherit the computed contrast color rather than Bootstrap's default link color.\n\n**Zero HTML changes:** Switch from a dark professional theme to a light pastel style, and your menus, cards, and links automatically adapt their colors instantly. The contrast rules handle both `bg-*` background utilities and `btn-outline-*` hover/active states.\n\n### Do you need it?\n\nMost dynamic themes should load `contrast-dyn.css`.\n\nWith this module enabled, a background utility such as `bg-primary` also applies the matching contrast variable. For text contrast, these two examples are visually equivalent:\n\n```html\n\u003cdiv class=\"bg-primary\" data-bs-theme=\"dark\"\u003e\n    \u003cp\u003eText is white because of data-bs-theme.\u003c/p\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"bg-primary\"\u003e\n    \u003cp\u003eText automatically uses --bs-primary-contrast.\u003c/p\u003e\n\u003c/div\u003e\n```\n\nOnly omit `contrast-dyn.css` if you want strict Bootstrap default behavior, where background utilities do not automatically set text contrast and you manage `data-bs-theme`, text utilities, or custom classes manually.\n\nFor more details on how it changes Bootstrap's behavior, see [Contrast Dynamic Documentation](docs/modules/contrast-dyn.md).\n\n## Theme customization\n\nCopy any `default-*.css` file to a theme file (e.g. copy `dist/default-color.css` to `theme/custom-color.css`) and edit the values you want to change. Then load the theme file **instead of** the matching default file.\n\nThis allows fully modular theming: you can swap fonts without touching colors, or change the color palette without affecting typography.\n\n## Versioning Policy\n\nBootstrapDyn follows a **synchronized versioning** scheme with Bootstrap for its first two digits:\n\n- **Major \u0026 Minor**: Synchronized with Bootstrap (e.g., `5.3.x` is for Bootstrap `v5.3`).\n- **Patch**: Represents the revision of the BootstrapDyn extraction tool and modules.\n\n| BootstrapDyn Version | Target Bootstrap | Status |\n|----------------------|------------------|--------|\n| **5.3.0**            | **5.3.8**        | Current |\n\nThis ensures that you always know which Bootstrap family is supported by a specific version of BootstrapDyn.\n\n## Contributing\n\nIf you want to modify the pipeline, add new modules, or upgrade the Bootstrap source, see [`extractor/README.md`](extractor/README.md) for developer documentation.\n\n---\n\n## Acknowledgments\n\nThis project is based on and uses [Bootstrap](https://github.com/twbs/bootstrap). BootstrapDyn extends Bootstrap's modular CSS architecture to provide dynamic theming capabilities while maintaining full compatibility with the original framework.\n\n*Designed for Bootstrap 5.3.8 – Modular and extensible theme system.*\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffranbarinstance%2Fbootstrapdyn","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffranbarinstance%2Fbootstrapdyn","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffranbarinstance%2Fbootstrapdyn/lists"}