{"id":19318116,"url":"https://github.com/bruegmann/blue-web","last_synced_at":"2026-04-11T12:04:29.602Z","repository":{"id":249802309,"uuid":"832595347","full_name":"bruegmann/blue-web","owner":"bruegmann","description":"UI library for the Web using Custom Components and Bootstrap.","archived":false,"fork":false,"pushed_at":"2024-09-16T10:56:36.000Z","size":14143,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2024-09-17T10:13:18.798Z","etag":null,"topics":["bootstrap","css","js","library","ui"],"latest_commit_sha":null,"homepage":"https://bruegmann.github.io/blue-web","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"lgpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bruegmann.png","metadata":{"files":{"readme":"README.md","changelog":null,"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":"2024-07-23T10:41:01.000Z","updated_at":"2024-09-16T08:21:16.000Z","dependencies_parsed_at":null,"dependency_job_id":"b3984acc-8d63-43c3-a2af-c8d6fa30cf0d","html_url":"https://github.com/bruegmann/blue-web","commit_stats":null,"previous_names":["bruegmann/blue-web"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bruegmann%2Fblue-web","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bruegmann%2Fblue-web/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bruegmann%2Fblue-web/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bruegmann%2Fblue-web/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bruegmann","download_url":"https://codeload.github.com/bruegmann/blue-web/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240420981,"owners_count":19798502,"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","css","js","library","ui"],"created_at":"2024-11-10T01:17:23.986Z","updated_at":"2026-04-11T12:04:29.597Z","avatar_url":"https://github.com/bruegmann.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Blue Web\n\nBlue Web is the base library for [Blue React](https://bruegmann.github.io/blue-react) and [Blue Blazor](https://bruegmann.github.io/blue-react). This library builds heavily on top of [Bootstrap](https://getbootstrap.com/docs/) and also provides additional solutions in CSS and JavaScript.\n\n## Use Blue Web\n\nInstall with NPM:\n\n```\nnpm i blue-web\n```\n\n[![npm version](https://img.shields.io/npm/v/blue-web)](https://www.npmjs.com/package/blue-web)\n\n## Implementation\n\nIf you have a React or Blazor project, you should use the components of [Blue React](https://bruegmann.github.io/blue-react) or [Blue Blazor](https://bruegmann.github.io/blue-blazor). Otherwise you can also write the markup of those components directly in HTML. Check out the examples in the docs to find out how.\n\nFor the JavaScript solutions you have to import the associated file. When installed using NPM, you can do it like this:\n\n```js\nimport \"blue-web/dist/js/dialog.js\"\nimport \"blue-web/dist/js/progress.js\"\n// ...\n```\n\n**Important:** Since 1.14.0 JavaScript files are compiled as ES modules. When you embed them in HTML using the `\u003cscript\u003e` don't forget the `type=\"module\"` attribute.\n\nYou can also use a CDN like unpkg.com. Only recommended for testing, not for production.\n\n```html\n\u003cscript type=\"module\" src=\"https://unpkg.com/blue-web@latest/dist/js/dialog.js\"\u003e\u003c/script\u003e\n\u003cscript type=\"module\" src=\"https://unpkg.com/blue-web@latest/dist/js/progress.js\"\u003e\u003c/script\u003e\n\u003c!-- ... --\u003e\n```\n\nJavaScript files are compiled as ES modules. This allows you to use import functions like this:\n\n```html\n\u003cscript type=\"module\"\u003e\n    import { tell } from \"https://unpkg.com/blue-web@latest/dist/js/dialog.js\"\n    tell(\"You are awesome!\")\n\u003c/script\u003e\n```\n\n## Customization and theming\n\nSince Blue Web is based on Bootstrap, you can customize many things by overriding Sass or CSS variables. For more information, see the [Bootstrap documentation](https://getbootstrap.com/docs/5.3/customize/overview/). Blue Web also provides some additional variables that you can use and override. Take a look at [dist/styles/\\_variables.scss](https://github.com/bruegmann/blue-web/blob/main/dist/styles/_variables.scss) to see all of them.\n\nHere is an example of how to override variables using Sass:\n\n```scss\n// Override Bootstrap Sass variable\n$primary: tomato;\n\n// Override Blue Web Sass variables\n$theme: orange;\n$theme-dark: darken(orange, 10%);\n\n// Stylesheet for Blue Web. Already contains Bootstrap.\n@import \"~blue-web/dist/style\";\n```\n\nAn example of how to override CSS variables:\n\n```css\n:root {\n    /* Override Bootstrap CSS variable */\n    --bs-body-font-family: \"Inter\", sans-serif;\n\n    /* Override Blue Web CSS variable */\n    --blue-sidebar-bg: #333;\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbruegmann%2Fblue-web","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbruegmann%2Fblue-web","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbruegmann%2Fblue-web/lists"}