{"id":13807143,"url":"https://github.com/thedodd/ybc","last_synced_at":"2025-04-12T20:44:06.450Z","repository":{"id":39789828,"uuid":"293984185","full_name":"thedodd/ybc","owner":"thedodd","description":"A Yew component library based on the Bulma CSS framework.","archived":false,"fork":false,"pushed_at":"2024-06-30T19:39:31.000Z","size":236,"stargazers_count":255,"open_issues_count":21,"forks_count":34,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-04-03T23:11:56.796Z","etag":null,"topics":["bulma","css","sass","wasm","web","ybc","yew","yew-components"],"latest_commit_sha":null,"homepage":"","language":"Rust","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/thedodd.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE-APACHE","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":"2020-09-09T02:43:52.000Z","updated_at":"2025-03-07T16:05:12.000Z","dependencies_parsed_at":"2024-04-10T02:56:11.644Z","dependency_job_id":"8ff75bc9-b7a9-441b-9cc5-7dfd1c2eb20a","html_url":"https://github.com/thedodd/ybc","commit_stats":{"total_commits":37,"total_committers":8,"mean_commits":4.625,"dds":0.2432432432432432,"last_synced_commit":"db9664acf359644dc81bf4a7cfe82ebfffd5497a"},"previous_names":[],"tags_count":10,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thedodd%2Fybc","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thedodd%2Fybc/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thedodd%2Fybc/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/thedodd%2Fybc/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/thedodd","download_url":"https://codeload.github.com/thedodd/ybc/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248631687,"owners_count":21136556,"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":["bulma","css","sass","wasm","web","ybc","yew","yew-components"],"created_at":"2024-08-04T01:01:21.579Z","updated_at":"2025-04-12T20:44:06.428Z","avatar_url":"https://github.com/thedodd.png","language":"Rust","readme":"\u003ch1 align=\"center\"\u003eybc\u003c/h1\u003e\n\u003cdiv align=\"center\"\u003e\n\n[![Build Status](https://github.com/thedodd/ybc/workflows/ci/badge.svg?branch=master)](https://github.com/thedodd/ybc/actions)\n[![Crates.io](https://img.shields.io/crates/v/ybc.svg?style=flat-square)](https://crates.io/crates/ybc)\n[![docs.rs](https://docs.rs/ybc/badge.svg?style=flat-square)](https://docs.rs/ybc)\n[![License](https://img.shields.io/badge/license-MIT%2FApache--2.0-blue?style=flat-square)](LICENSE)\n[![Discord Chat](https://img.shields.io/discord/793890238267260958?logo=discord\u0026style=flat-square)](https://discord.gg/JEPdBujTDr)\n![Crates.io](https://img.shields.io/crates/d/ybc.svg?style=flat-square)\n\n  \u003cstrong\u003e\n    A \u003ca href=\"https://yew.rs\"\u003eYew\u003c/a\u003e component library based on the \u003ca href=\"https://bulma.io\"\u003eBulma CSS\u003c/a\u003e framework.\n  \u003c/strong\u003e\n\u003c/div\u003e\n\u003cbr/\u003e\n\nYBC encapsulates all of the structure, style and functionality of the Bulma CSS framework as a set of Yew components. YBC also ships with support for the Yew Router, adding Bulma-styled components which wrap the Yew Router components for clean integration.\n\nAs a guiding principle, YBC does not attempt to encapsulate every single Bulma style as a Rust type, let alone the many valid style combinations. That would be far too complex, and probably limiting to the user in many ways. Instead, YBC handles structure, required classes, functionality, sane defaults and every component can be customized with any additional classes for an exact look and feel.\n\nWhat does it look like to use YBC? The following is a snippet of a component's `view` method rendering a navbar, a fluid container, and some tiles.\n\n```rust\nuse ybc::NavbarFixed::Top;\nuse ybc::TileCtx::{Ancestor, Child, Parent};\nuse ybc::TileSize::Four;\nuse yew::prelude::*;\n\nstruct App; // An application component.\n\nimpl Component for App {\n  /* .. snip .. */\n  fn view(\u0026self) -\u003e Html {\n    html!{\n      \u003c\u003e\n      \u003cybc::Navbar fixed=Top /* .. your navbar content here .. *//\u003e\n      \u003cybc::Container fluid=true\u003e\n        \u003cybc::Tile ctx=Ancestor\u003e\n          \u003cybc::Tile ctx=Parent vertical=true size=Four\u003e\n            \u003cybc::Tile ctx=Child classes=classes!(\"box\")\u003e\n              \u003cp\u003e{\"Lorem ipsum dolor sit amet ...\"}\u003c/p\u003e\n            \u003c/ybc::Tile\u003e\n            /* .. snip .. more tiles here .. */\n          \u003c/ybc::Tile\u003e\n        \u003c/ybc::Tile\u003e\n      \u003c/ybc::Container\u003e\n      \u003c/\u003e\n    }\n  }\n}\n```\n\n## getting started\n### add ybc dependency\nFirst, add this library to your `Cargo.toml` dependencies.\n\n```toml\n[dependencies]\nybc = \"*\"\n```\n\n### add bulma\n#### add bulma css (no customizations)\nThis project works perfectly well if you just include the Bulma CSS in your HTML, [as described here](https://bulma.io/documentation/overview/start/). The following link in your HTML head should do the trick: `\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css\"/\u003e`.\n\n#### add bulma sass (allows customization \u0026 themes)\nHowever, if you want to customize Bulma to match your style guidelines, then you will need to have a copy of the Bulma SASS locally, and then import Bulma after you've defined your customizations, [as described here](https://bulma.io/documentation/customize/).\n\n```scss\n// index.scss\n\n// Set your brand colors\n$purple: #8A4D76;\n$pink: #FA7C91;\n$brown: #757763;\n$beige-light: #D0D1CD;\n$beige-lighter: #EFF0EB;\n\n// Import the rest of Bulma\n@import \"path/to/bulma\";\n```\n\nIf you are using [Trunk](https://github.com/thedodd/trunk) to build your application and bundle its assets, then simply point to your `index.scss` from your `index.html` file, and Trunk will handle compling your application, your sass, and will make everything available in your `dist` dir.\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"utf-8\"/\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\"/\u003e\n    \u003clink rel=\"stylesheet\" href=\"index.sass\"/\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003c!-- ... snip ... --\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nNow just execute `trunk serve --open`, and your application will be built and opened in your browser.\n\nIf you are not using [Trunk](https://github.com/thedodd/trunk), you will need to use another mechanism for building your Rust WASM application and its assets.\n\n## web-sys \u0026 stdweb\nCurrently, this library only supports the web-sys backend. Support for stdweb is not currently planned. If that is problematic, please open an issue describing why. Cheers!\n","funding_links":[],"categories":["Crates"],"sub_categories":["Component Libraries"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthedodd%2Fybc","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthedodd%2Fybc","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthedodd%2Fybc/lists"}