#material #design #wasm #frontend

material_you

A design system for wasm apps based on rust and material design 3

1 unstable release

0.1.0 Oct 14, 2022

#777 in WebAssembly

LGPL-3.0-or-later OR MIT

34KB
790 lines

This is a Rust's Design System base on Material 3 spec

Status

working on,

  • currently we working on yew's api, but in the future we hope can provide an api for all rustwasm frameworks

Goals

  • provide material's design spec in a rust's api for use in wasm environment
  • provide a zero js design system for rust

Roadmap

  • implement basic token mappings of material design
  • implement theming provider
  • implement components
  • implement theme generator

Usage

  • add dependency to your Cargo.toml
cargo add material_you
  • import library and add the theme provider
use yew::prelude::*;
use yew::prelude::ThemeProvider;

#[funcion_component(App)]
fn app() -> Htlm{
	html! { <ThemeProvider> //provides access to material color system and theming to whole app
		<App/>
	</ThemeProvider> }
}
  • now you can use components
use yew::prelude::*;
use yew::prelude::Card;

#[funcion_component(SomeComponent)]
fn app() -> Htlm{ 
	html! { <>
		<Card>{"Some card content"}</Card>
	</> }
}

Development

Prerequisites

rustup target add wasm32-unknown-unknown
  • install wasm tools, wasm-pack and wasm-bingend-cli, and cargo-watch (for live reload)
cargo install wasm-pack wasm-bindgen-cli
  • some http server for example python http.server

Run

clone repository and web-site (for render examples at time that proof components) both have to be in same root direcotry

git clone https://github.com/material-rs/material-you-rs.git
git clone https://github.com/material-rs/material-you-site.git

build lib

cd /path/of/material-you-rs
wasm-pack build --target web

build and serve site

cd /path/of/material-you-site
wasm-pack build --target web
python3 -m http.server

now you can see example site on your browser

Development

for development and live reload

cd /path/of/material-you-site
cargo watch -w . -w ../material-you-site -s "wasm-pack build --target web"

and in another termninal serve site

cd /path/of/material-you-site
python3 -m http.server

Contribution guide

working on... (we have not defined the development cycle)

License

LGPL V3 or MIT

Dependencies

~13MB
~239K SLoC