ybc

A Yew component library based on the Bulma CSS framework.

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.

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!{
      <>
      <ybc::Navbar fixed=Top /* .. your navbar content here .. *//>
      <ybc::Container fluid=true>
        <ybc::Tile ctx=Ancestor>
          <ybc::Tile ctx=Parent vertical=true size=Four>
            <ybc::Tile ctx=Child classes=classes!("box")>
              <p>{"Lorem ipsum dolor sit amet ..."}</p>
            </ybc::Tile>
            /* .. snip .. more tiles here .. */
          </ybc::Tile>
        </ybc::Tile>
      </ybc::Container>
      </>
    }
  }
}

getting started

add ybc dependency

First, add this library to your Cargo.toml dependencies.

[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. The following link in your HTML head should do the trick: <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css"/>.

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.

// 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 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.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="index.sass"/>
  </head>
  <body>
    <!-- ... snip ... -->
  </body>
</html>

Now just execute trunk serve --open, and your application will be built and opened in your browser.

If you are not using 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!