Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/thedodd/ybc
A Yew component library based on the Bulma CSS framework.
https://github.com/thedodd/ybc
bulma css sass wasm web ybc yew yew-components
Last synced: 26 days ago
JSON representation
A Yew component library based on the Bulma CSS framework.
- Host: GitHub
- URL: https://github.com/thedodd/ybc
- Owner: thedodd
- License: apache-2.0
- Created: 2020-09-09T02:43:52.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2024-06-30T19:39:31.000Z (4 months ago)
- Last Synced: 2024-10-01T01:41:04.100Z (about 1 month ago)
- Topics: bulma, css, sass, wasm, web, ybc, yew, yew-components
- Language: Rust
- Homepage:
- Size: 230 KB
- Stars: 258
- Watchers: 8
- Forks: 36
- Open Issues: 21
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE-APACHE
Awesome Lists containing this project
- awesome-yew - ybc - A Yew component library based on the Bulma CSS framework. (Crates / Component Libraries)
README
ybc
[](https://github.com/thedodd/ybc/actions)
[](https://crates.io/crates/ybc)
[](https://docs.rs/ybc)
[](LICENSE)
[](https://discord.gg/JEPdBujTDr)
YBC 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.
As 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.
What 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.
```rust
use ybc::NavbarFixed::Top;
use ybc::TileCtx::{Ancestor, Child, Parent};
use ybc::TileSize::Four;
use yew::prelude::*;
struct App; // An application component.
impl Component for App {
/* .. snip .. */
fn view(&self) -> Html {
html!{
<>
{"Lorem ipsum dolor sit amet ..."}
/* .. snip .. more tiles here .. */
>
}
}
}
```
## getting started
### add ybc dependency
First, add this library to your `Cargo.toml` dependencies.
```toml
[dependencies]
ybc = "*"
```
### add bulma
#### add bulma css (no customizations)
This 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: ``.
#### add bulma sass (allows customization & themes)
However, 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/).
```scss
// index.scss
// Set your brand colors
$purple: #8A4D76;
$pink: #FA7C91;
$brown: #757763;
$beige-light: #D0D1CD;
$beige-lighter: #EFF0EB;
// Import the rest of Bulma
@import "path/to/bulma";
```
If 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.
```html
```
Now just execute `trunk serve --open`, and your application will be built and opened in your browser.
If 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.
## web-sys & stdweb
Currently, 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!