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

A Yew component library based on the Bulma CSS framework.

. 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 principal, 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 strucutre, 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 = "0.2"

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/[email protected]/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!

Issues

Collection of the latest Issues

unbrice

unbrice

Comment Icon0

Currently the files property of ybc::FileProperties is a Vec<web_sys::File>. This is slightly inconvenient, because in order to read the file, one need to hand it over eg to a ReaderService, at which point ybc::FileProperties can no longer own it.

Of the whole web_sys::File object, only the name seems in use. If instead of files, ybc::FileProperties contained a file_names: Vec<String>, ownership wouldn't be an issue anymore.

Thus I offer to add a file_names property to ybc::FileProperties. files would stay for compatibility. Its content would appended to the list, after elements from file_names. Does that sound reasonable? If yes, I'll be happy to send you a pull request.

Moxinilian

Moxinilian

Comment Icon1

Hey! I find it a bit difficult to get started with ybc because it's not immediately obvious how bulma constructs map to ybc ones. Notably, showing how to make forms would be appreciated as it uses multiple components in intricate ways.

Follpvosten

Follpvosten

enhancement
Comment Icon2

I'm writing a simple app using ybc and yew-router, triggering routing by using href on navbar items. Some of these are in a navbar-dropdown, and I've noticed that the dropdown only closes when you click on the overlay, but not when you click on an item in the dropdown; this doesn't really work for my usecase, where the dropdown is used like a menu to navigate the page as described above. I think this could be fixed by (maybe optionally) internally handling the onclick event on the dropdown itself, which should catch any clicks on its children if they're not getting cancelled (so this approach would still allow overriding this behavior for specific items in any case). Would you be interested in a PR implementing a feature like that? And if so, should it be an option or the default case? And if it should be optional, what should I call the property on NavbarDropdown?

quinnjr

quinnjr

Comment Icon2

As mentioned in https://github.com/thedodd/ybc/pull/12#discussion_r521807745:

Looks like this is something we will want to eventually add to ybc::Input. Want to pop a ticket so that we can track this?

This tracking ticket is in reference to wanting to include the onkeypress event to the Input component but extends to other parts of ybc.

Currently, a number of expected/desirable properties are not available on the components in the library, including those expected for global attributes, aria- labels, and per-Component properties (eg: input). A curated list of properties should probably be added to components that would benefit from them.


Input

Attributes

  • autocomplete - Option
  • autofocus - Option
  • class(es) - Option
  • dir - Option
  • disabled - bool
  • hidden - Option
  • id - Option <-- See https://github.com/thedodd/ybc/pull/10
  • inputmode - Option
  • form - Option
  • list - Option
  • name - String
  • placeholder - String <-- make Option?
  • required - Option
  • spellcheck - Option
  • style - Option
  • tabindex - Option
  • type - InputType
  • value - String

Events

  • onabort ?
  • onblur
  • onerror
  • onfocus
  • oncancel ?
  • onchange <-- currently update?
  • onclick
  • ondblclick
  • oninput
  • oninvalid
  • onkeydown
  • onkeypress
  • onkeyup
  • onsubmit
  • ontouchcancel
  • ontouchend
  • ontouchstart
Versions

Find the latest versions by id

v0.2.1 - Jul 26, 2021

v0.2.0 - Jul 26, 2021

0.2.0

added

  • Added support for yew 0.18.x.
  • Added head_classes, body_classes & foot_classes optional properties to the Hero component. These extra classes will be added to the stanard classes assigned to each of the corresponding hero component sections.
  • Added navburger_classes prop to the Navbar component. These extra classes will be added to the standard classes for the navbar-burger element.
  • Added help_has_error prop to the Field component. This bool prop will add the is-danger class to the field's help text when true.
  • Added horizontal prop to the Field component. This replaces the FieldHorizontal component.
  • Added disabled prop to the Select & MultiSelect components.
  • All components have been updated to accept yew::Classes instead of String for their classes props.

removed

  • The FieldHorizontal component has been removed in favor of the horizontal prop of the Field component.

v0.1.6 - Oct 23, 2020

changed

  • Updates to the Navbar component:
    • navbrand, navstart, navend are now all optional.
    • a new navburger: bool property has been added. This bool controls whether or not a navbar-burger will be rendered inside of the navbar when being rendered within smaller viewports. This value defaults to true, maintaining backwards compatibility.

v0.1.5 - Oct 18, 2020

fixed

  • Fixed a few of the button & button-like components to use the HTML disabled attribute instead of the Bulma is-disabled CSS class. The latter has been deprecated for some time.
  • Update docs in the README to point to the latest Bulma 0.9.1 release.

v0.1.4 - Sep 26, 2020

added

  • Add prop padded to Navbar. Setting this to true will wrap the contents of the navbar in a container to add padding to the contents under some circumstances.
  • The default tag type for NavbarItems is now div.
  • Added the href, rel & target props to the NavbarItem component. They will only be used when the NavbarItemTag::A is being used for the component.
  • Added the rel & target props to the ButtonAnchor component.
  • Adds an additional size for heros: is-fullheight-with-navbar. This one is present in the Bulma docs, but is slightly hidden.

v0.1.3 - Sep 22, 2020

fixed

  • Removed Children props from Hero & made header & footer optional.

added

  • Added the centered, multiline & vcentered props to the Columns component, corresponding to the standard Bulma classes bearing the same name prefixed with is-.

v0.1.2 - Sep 17, 2020

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 principal, 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 strucutre, required classes, functionality, sane defaults and every component can be customized with any additional classes for an exact look and feel.

To get started with YBC, have a look at the Getting Started guide in the README. A few pertinent highlights:

  • YBC works out of the box with Bulma CSS. Add <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css"/> to your HTML, and then you're ready to start using YBC.
  • YBC also supports full customization using Bulma's recommended customization pattern. Details here. TL;DR, use Trunk for building & bundling your app. It will handle compiling your scss/sass, which is what you will use for customizing Bulma.

Information - Updated Jan 18, 2022

Stars: 118
Forks: 20
Issues: 14

Repositories & Extras

Actix

7.2K

Actix Rust Framework for web and wasm based applications

Rust's premier framework for handling large scale web applications across a wide varaitey of operating systems

Actix Rust Framework for web and wasm based applications

Build, bundle & ship your Rust WASM application to the web

&rdquo;Pack your things, we&rsquo;re going on an adventure!&rdquo; ~ Ferris

Build, bundle & ship your Rust WASM application to the web

Rust / Wasm client web app framework

Pull requests which improve test coverage are also very welcome

Rust / Wasm client web app framework

An implementation of Mina protocol in Rust, with focus on web and Wasm compatibility

** As you can probably tell this is a WIP! Don't use for anything yet **

An implementation of Mina protocol in Rust, with focus on web and Wasm compatibility

Board Games in WASM with web-worker

For self-educational purposes and for fun, I implemented the games TicTacToe and Four-in-a-row

Board Games in WASM with web-worker

Build tool for deploying Rust WASM repositories to Screeps game servers

Build tool for deploying Rust WASM repositories to cargo-web, adding the ability to trim node

Build tool for deploying Rust WASM repositories to Screeps game servers

Rust WASM Web Worker Examples

This repository contains four different examples of using web workers in conjunction with WASM in

Rust WASM Web Worker Examples

A CHIP-8 emulator written in Rust, compiled to WebAssemly through wasm-pack, and exposed with React...

A CHIP-8 emulator written in requestAnimationFrame function, which usually matches the refresh rate of the display

A CHIP-8 emulator written in Rust, compiled to WebAssemly through wasm-pack, and exposed with React...

Modor is a modular and kind of object-oriented game engine

Web: cargo run-wasm --example &lt;name&gt; --release

Modor is a modular and kind of object-oriented game engine

Markdown editor built using Rust WebAssembly

Run wasm-pack build --target web to compile rust into wasm

Markdown editor built using Rust WebAssembly

Make a rocket visulization in rust running in the browser with WASM and webgl, could...

Make a rocket visulization in rust running in the browser with WASM and webgl, could be used to render real time data from Illinois Space...

Make a rocket visulization in rust running in the browser with WASM and webgl, could...
Facebook Instagram Twitter GitHub Dribbble
Privacy