- Notifications
You must be signed in to change notification settings - Fork34
A Yew component library based on the Bulma CSS framework.
License
Apache-2.0, MIT licenses found
Licenses found
thedodd/ybc
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
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'sview 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::*;structApp;// An application component.implComponentforApp{/* .. snip .. */fnview(&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> </>}}}
First, add this library to yourCargo.toml dependencies.
[dependencies]ybc ="*"
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"/>.
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 usingTrunk to build your application and bundle its assets, then simply point to yourindex.scss from yourindex.html file, and Trunk will handle compling your application, your sass, and will make everything available in yourdist dir.
<!DOCTYPE html><html><head><metacharset="utf-8"/><metaname="viewport"content="width=device-width, initial-scale=1"/><linkrel="stylesheet"href="index.sass"/></head><body><!-- ... snip ... --></body></html>
Now just executetrunk serve --open, and your application will be built and opened in your browser.
If you are not usingTrunk, you will need to use another mechanism for building your Rust WASM application and its assets.
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!
About
A Yew component library based on the Bulma CSS framework.