{"id":15492533,"url":"https://github.com/juancastillo0/bootstrap_dart","last_synced_at":"2025-04-22T19:41:20.899Z","repository":{"id":56758256,"uuid":"434813279","full_name":"juancastillo0/bootstrap_dart","owner":"juancastillo0","description":"Dart bindings for Bootstrap.js (https://getbootstrap.com/) web ui library. Declarative usage with package:deact, package:jaspr or package:rad","archived":false,"fork":false,"pushed_at":"2023-05-31T18:40:30.000Z","size":10076,"stargazers_count":8,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-29T18:11:22.415Z","etag":null,"topics":["bootstrap","bootstrap5","dart","icons","ui","ui-components","web"],"latest_commit_sha":null,"homepage":"https://juancastillo0.github.io/bootstrap_dart/","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/juancastillo0.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","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}},"created_at":"2021-12-04T05:13:42.000Z","updated_at":"2023-11-13T10:04:10.000Z","dependencies_parsed_at":"2025-03-04T07:31:51.962Z","dependency_job_id":"7bf85697-9f01-4d2d-98fe-3039b89c7440","html_url":"https://github.com/juancastillo0/bootstrap_dart","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juancastillo0%2Fbootstrap_dart","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juancastillo0%2Fbootstrap_dart/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juancastillo0%2Fbootstrap_dart/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/juancastillo0%2Fbootstrap_dart/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/juancastillo0","download_url":"https://codeload.github.com/juancastillo0/bootstrap_dart/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250309815,"owners_count":21409544,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["bootstrap","bootstrap5","dart","icons","ui","ui-components","web"],"created_at":"2024-10-02T08:01:16.609Z","updated_at":"2025-04-22T19:41:20.876Z","avatar_url":"https://github.com/juancastillo0.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Bootstrap Dart\n\n[Bootstrap](https://getbootstrap.com/) web components in Dart. For more information on the different components, check out Bootstrap's [documentation](https://getbootstrap.com/docs/5.1/getting-started/introduction/).\n\nYou can view all the implemented components (and the Dart code) in the deployed page (https://juancastillo0.github.io/bootstrap_dart/). The code for the deployed page is in the [`web/bootstrap_examples.dart` file](web/bootstrap_examples.dart).\n\n## Versions\n\nWe currently support the following versions:\n\n- Bootstrap 5.1.3 https://getbootstrap.com/docs/5.1/\n- Bootstrap Icons 1.9.1 https://icons.getbootstrap.com/\n- Bootstrap Dark 1.1.3 https://vinorodrigues.github.io/bootstrap-dark-5/\n\n## Table of Contents\n\n- [Bootstrap Dart](#bootstrap-dart)\n  - [Versions](#versions)\n  - [Table of Contents](#table-of-contents)\n- [Usage](#usage)\n    - [Custom scss and Dark Mode](#custom-scss-and-dark-mode)\n- [Examples](#examples)\n  - [Components Gallery](#components-gallery)\n  - [Cacho Game](#cacho-game)\n  - [CIDart](#cidart)\n- [Packages](#packages)\n  - [bootstrap_dart](#bootstrap_dart)\n  - [Supported Frameworks](#supported-frameworks)\n    - [deact_bootstrap for package:deact](#deact_bootstrap-for-packagedeact)\n    - [jaspr_bootstrap for package:jaspr](#jaspr_bootstrap-for-packagejaspr)\n    - [rad_bootstrap for package:rad](#rad_bootstrap-for-packagerad)\n- [Bootstrap Renderer](#bootstrap-renderer)\n- [Commands](#commands)\n\n\n# Usage\n\nAdd the dependencies to your `pubspec.yaml`\n\nSince the package is agnostic to the rendering package, can chose any of the [supported frameworks](#supported-frameworks): `deact_bootstrap`, `jaspr_bootstrap` or `rad_bootstrap`.\n\n```yaml\ndependencies:\n  bootstrap_dart: # main bootstrap package\n    git:\n      url: https://github.com/juancastillo0/bootstrap_dart.git\n\n  deact: # could also be jaspr or rad\n    git:\n      url: https://github.com/juancastillo0/deact.git\n      ref: 537a9e600641a0aed15b7811c61f80fe4c0c0d12\n  incremental_dom_bindings: ^2.1.0 # only required for deact\n  deact_bootstrap: # could also be jaspr_bootstrap or rad_bootstrap\n    git:\n      url: https://github.com/juancastillo0/bootstrap_dart.git\n      path: packages/deact_bootstrap\n  \n  universal_html: ^2.0.8 # optional\n\ndev_dependencies:\n  build_runner: ^1.10.0\n  build_test: ^1.0.0 # for testing\n  build_web_compilers: ^2.11.0\n```\n\nSet up your `web/index.html`\n\n```html\n\u003c!DOCTYPE html\u003e\n\n\u003chtml\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"utf-8\"\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003cmeta name=\"scaffolded-by\" content=\"https://github.com/dart-lang/sdk\"\u003e\n    \u003ctitle\u003eApp Title\u003c/title\u003e\n    \n    \u003c!-- Bootstrap CSS --\u003e\n    \u003clink href=\"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css\" rel=\"stylesheet\" integrity=\"sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3\" crossorigin=\"anonymous\"\u003e\n    \u003c!-- Bootstrap Icons --\u003e\n    \u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css\"\u003e\n    \u003c!-- App CSS --\u003e\n    \u003clink rel=\"stylesheet\" href=\"styles.css\"\u003e\n    \u003c!-- Main App --\u003e\n    \u003cscript defer src=\"main.dart.js\"\u003e\u003c/script\u003e\n\n    \u003c!-- Used by package:deact to edit the HTML elements --\u003e\n    \u003cscript src=\"./packages/incremental_dom_bindings/assets/incremental-dom-min.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\n\u003cbody\u003e\n  \u003c!-- Main element, Dart will edit this --\u003e\n  \u003cdiv id=\"output\"\u003e\u003c/div\u003e\n  \n  \u003c!-- Some Bootstrap components require JS: Popper.js and Bootstrap JS --\u003e\n  \u003cscript src=\"https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js\" integrity=\"sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p\" crossorigin=\"anonymous\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n### Custom scss and Dark Mode\n\nWe provide the Bootstrap scss along with the [Bootstrap Dark](https://github.com/vinorodrigues/bootstrap-dark-5) dark mode scss. With them, and using [`package:sass_builder`](https://pub.dev/packages/sass_builder) to compile scss files, you can customize Bootstrap and only import the components you need.\n\nAdd sass_builder to your dependencies\n\n```yaml\ndev_dependencies:\n  sass_builder: ^2.1.2\n```\n\nCreate an scss file (`web/bootstrap.scss`) that customizes variables and imports the Bootstrap scss\n\n```scss\n// Include any default variable overrides here (though functions won't be available)\n\n$primary: #01388a; // was #0d6efd;\n\n// Import the bootstrap nightshade scss.\n// This includes the default Bootstrap and dark scss\n// https://github.com/vinorodrigues/bootstrap-dark-5/blob/main/docs/bootstrap-nightshade.md\n@import \"package:bootstrap_dart/scss/bootstrap-nightshade\";\n\n// You can import the `bootstrap-icons.scss` in here also\n@import \"package:bootstrap_dart/icons/bootstrap-icons\";\n\n// Then add additional custom code here\n\n:root {\n  // shade-color function is from bootstrap.\n  // Use in css with `background-color:var(--light-darker);`\n  --light-darker: #{shade-color($light, 5%)}; \n  --dark-darker: #{shade-color($dark, 10%)};\n}\n```\n\nEdit your html file to import the compiled css and the `darkmode.js` file:\n\n```html\n\u003c!DOCTYPE html\u003e\n\n\u003chtml\u003e\n\u003chead\u003e\n    \u003cmeta charset=\"utf-8\"\u003e\n    \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n    \u003cmeta name=\"scaffolded-by\" content=\"https://github.com/dart-lang/sdk\"\u003e\n    \u003ctitle\u003eApp Title\u003c/title\u003e\n\n    \u003c!-- The page supports both dark and light color schemes,\n    and the page author prefers / default is light. --\u003e\n    \u003cmeta name=\"color-scheme\" content=\"light dark\"\u003e\n\n    \u003c!-- Custom Bootstrap CSS created by package:sass_builder --\u003e\n    \u003clink rel=\"stylesheet\" href=\"bootstrap.css\"\u003e\n    \u003c!-- Main App --\u003e\n    \u003cscript defer src=\"main.dart.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\n\u003cbody\u003e\n  \u003c!-- Main element, Dart will edit this --\u003e\n  \u003cdiv id=\"output\"\u003e\u003c/div\u003e\n  \n  \u003c!-- Some Bootstrap components require JS: Popper.js and Bootstrap JS --\u003e\n  \u003cscript src=\"./packages/bootstrap_dart/js/bootstrap.bundle.min.js\"\u003e\u003c/script\u003e\n  \u003c!-- Supports dark mode toggle https://github.com/vinorodrigues/bootstrap-dark-5/blob/main/docs/darkmode.js.md --\u003e\n  \u003cscript src=\"./packages/bootstrap_dart/dark_mode/darkmode.min.js\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\nBecause we imported the `bootstrap-icons.scss` in the `web/bootstrap.scss` file, the previous html already supports Bootstrap icons. However, you may also import the css directly:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"./packages/bootstrap_dart/icons/bootstrap-icons.css\"\u003e\n```\n\nSince the `web/bootstrap.scss` is importing `bootstrap-nightshade`, you can use the `html.dark` css class selector to change the styles of different elements when the dark mode is selected (CSS class `dark` over the `html` element):\n\n```css\nhtml.dark .code-section {\n  background-color: var(--bs-dark-alt);\n}\n```\n\nTo toggle dark mode you may use the API in `package:bootstrap_dart/dark_mode/dark_mode.dart`. Which uses the underling [darkmode.js](https://github.com/vinorodrigues/bootstrap-dark-5/blob/main/docs/darkmode.js.md) file.\n\n```dart\nimport 'package:bootstrap_dart/dark_mode/dark_mode.dart' show DarkMode;\n\nfinal darkMode = DarkMode();\n\nDeactNode darkModeSwitch() {\n  return check(\n    label: txt('Dark Mode'),\n    id: 'darkModeSwitch',\n    type: CheckType.switch_,\n    checked: darkMode.inDarkMode,\n    inline: true,\n    onChange: (_) {\n      darkMode.toggleDarkMode();\n    },\n  );\n}\n```\n\nYou may use the `DarkMode.inDarkModeChanges` Stream to subscribe to changes or the `inDarkModeValue` constructor parameter to use a `package:mobx` observable in the `DarkMode.inDarkMode` getter.\n\n# Examples\n\n## Components Gallery\n\nYou can view all the implemented components (and the Dart code) in the deployed page (https://juancastillo0.github.io/bootstrap_dart/). The code for the deployed page is in the [`web/bootstrap_examples.dart` file](web/bootstrap_examples.dart).\n\n## Cacho Game\n\nWork in progress.\n\nA multiplayer board game. The code for complete example is in the [`example/` directory](example/).\n\n## CIDart\n\nWork in progress.\n\nA service for compiling, executing and tracking the build process and deployment. With a git repository, one can set up a CLI pipeline for continuous integration and delivery. All the commands are tracked in realtime. This is a simple personal project for deploying in a VM. The service uses web sockets and the source code repository has three projects:\n\n1. A [Leto](https://github.com/juancastillo0/leto) Shelf GraphQL server. Everything is saved in memory\n2. A Dart client using [`package:graphql`](https://pub.dev/packages/graphql) and [`package:graphql_codegen`](https://pub.dev/packages/graphql_codegen)\n3. A Web Dart client using [`package:jaspr`](https://github.com/schultek/jaspr) and [jaspr_bootstrap](#jaspr_bootstrap-for-packagejaspr).\n\nYou can view the code in the [Github repo](https://github.com/juancastillo0/cidart). The client UI and some links to the different GraphQL Schema UI explorer is deployed in [this page](https://juancastillo0.github.io/cidart/).\n\n# Packages\n\nThis repository contains multiple Dart packages. The main bootstrap package and the bindings\nfor external rendering frameworks.\n\n## bootstrap_dart\n\nMain package with all Bootstrap components. Independent of the rendering framework.\n\n## Supported Frameworks\n\nThe main package does not have a rendering framework, for that you need to provide a [Bootstrap Renderer](#bootstrap-renderer). We implement the rendering bindings for multiple frameworks in the following packages:\n\n### deact_bootstrap for [package:deact](https://github.com/juancastillo0/deact)\n\nSPA framework inspired by React.\n\n### jaspr_bootstrap for [package:jaspr](https://github.com/schultek/jaspr)\n\nSupport for SPA, SSR, Islands with good test coverage. Inspired by Flutter.\n\nYou need to use the `MobXHooksObserverComponent` at the root of the Component tree.\nThis component is exported in `jaspr_bootstrap`.\n\n### rad_bootstrap for [package:rad](https://github.com/erlage/rad)\n\nSPA framework with Hooks, great test coverage and performance. Inspired by Flutter and React.\n\n# Bootstrap Renderer\n\nTo support multiple rendering frameworks a global `bootstrapRenderer` should be overridden. The code is found in [`lib/bootstrap/bootstrap_renderer.dart`](lib/bootstrap/bootstrap_renderer.dart).\n\nAt the moment, the framework should support the following interface.\n\n- Hooks (useRef, useState and useEffect)\n- Render HTML elements\n- Render text nodes\n- Render a node with multiple children (React's fragment)\n- Create functional components with Hooks support\n\n\u003c!-- include{bootstrap-renderer-interface} --\u003e\n```dart\n/// A renderer used within the Bootstrap components to create html elements.\n///\n/// A \"node\" is in reference to a Node, Widget or Component in each of the frameworks.\nclass BootstrapRenderer\u003cN\u003e {\n  /// Returns a node that renders an html element of the given [tag].\n  /// The [attributes], [listeners] and [children] should be set for the html element.\n  /// The [ref] should be populated when an effect using [BootstrapBuildContext.hookEffect] is run.\n  N el(\n    String tag, {\n    Map\u003cString, String\u003e? attributes,\n    Iterable\u003cdynamic\u003e? children,\n    Object? key,\n    Map\u003cString, void Function(html.Event)\u003e? listeners,\n    Ref\u003chtml.Element?\u003e? ref,\n  }) =\u003e\n      throw _error;\n\n  /// Returns a node that renders an html text node.\n  N txt(String text) =\u003e throw _error;\n\n  /// Returns a node that renders multiple [children] nodes.\n  N fragment(List\u003cdynamic\u003e children) =\u003e throw _error;\n\n  /// Returns a node that support hooks with the API in [BootstrapBuildContext].\n  N fc(dynamic Function(BootstrapBuildContext) builder, {Object? key}) =\u003e\n      throw _error;\n}\n\nabstract class BootstrapBuildContext {\n  /// A reference to a mutable value of type [T] associated with this context.\n  /// [create] will be called only once for setting up the initial value.\n  Ref\u003cT\u003e hookRef\u003cT\u003e(T Function() create);\n\n  /// The [effect] should be called when the html elements are rendered.\n  /// If any of the [keys] change, [effect] should be re-executed.\n  /// If [effect] returns a function, it should be called to release resources\n  /// from the executed [effect] when the keys change or the component is unmounted.\n  void hookEffect(\n    void Function()? Function() effect, [\n    List\u003cObject?\u003e? keys,\n    bool Function(Object?, Object?)? equals,\n  ]);\n\n  /// A reference to a mutable value of type [T] associated with this context.\n  /// If changed, this should rerender the component associated with this context.\n  /// [create] will be called only once for setting up the initial value.\n  State\u003cT\u003e hookState\u003cT\u003e(T Function() create);\n}\n\n/// The renderer used within the Bootstrap components to create html elements.\n///\n/// You should set the `bootstrapRenderer` for Bootstrap Dart to render the components.\n/// You can use one of the provided packages:\n/// - jaspr_bootstrap\n/// - rad_bootstrap\n/// - deact_bootstrap\nBootstrapRenderer bootstrapRenderer = BootstrapRenderer();\n\n/// A reference to a mutable [value] of type [T].\nabstract class Ref\u003cT\u003e {\n  Ref(this.value);\n  T value;\n}\n\n/// A reference to a mutable [value] of type [T].\n/// If changed, this should rerender the component in which this was created.\ntypedef State\u003cT\u003e = Ref\u003cT\u003e;\n```\n\u003c!-- include-end{bootstrap-renderer-interface} --\u003e\n\n\nWe provide bindings as a `BootstrapRenderer` class implementation for the [supported frameworks](#supported-frameworks). An usage example for the `package:rad` framework would be the following:\n\n```dart\nimport 'package:rad/rad.dart';\nimport 'package:bootstrap_dart/bootstrap/bootstrap_core.dart';\nimport 'package:rad_bootstrap/rad_bootstrap.dart';\n\nvoid main() {\n  /// Set the global `bootstrapRenderer`\n  RadBootstrapRenderer.setUp();\n\n  // TODO:\n}\n```\n\n# Commands\n\nInstall the `webdev` CLI\n\n```bash\ndart pub global activate webdev\n```\n\nServe the web page locally\n\n```bash\nwebdev serve web:8050 --auto refresh -- --delete-conflicting-outputs\n```\n\nRun a test file\n\n```bash\ndart run build_runner test -- -p chrome test/mobx_test.dart\n```\n\nRun static site generation (creates the html files for each route):\n\n```bash\ndart run web/main.dart\n```\n\nCollect examples for github pages deployment:\n\n```bash\ndart run scripts/collect_examples.dart --generate-dart-file web/generated_example_snippets.dart\n```\n\nCollect Bootstrap icons\n\n```bash\ndart run scripts/fetch_bootstrap_icons.dart\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjuancastillo0%2Fbootstrap_dart","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjuancastillo0%2Fbootstrap_dart","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjuancastillo0%2Fbootstrap_dart/lists"}