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

Status

working on, (not ready usable) see project website at https://material-rs.gitlab.io/material_you_rs

Development

Prerequisites

• rust install rust

• add wasm32 target

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 cargo-watch

• some http server for example python http.server

Run

• clone the repo

git clone https://gitlab.com/material-rs/material_you_rs

• build and serve website

cd /path/of/material_you_rs
wasm-pack build website --target no-modules
cd website
python3 -m http.server

now you can see example site on your browser

Development whatching file's changes

• for development and live reload

cd /path/of/material_you_rs
cargo watch -w . -i .git -i .gitignore -i Cargo.lock -i target -i website/pkg "wasm-pack build website --target no-modules"

• and in another termninal serve site

cd /path/of/material_you_rs/website
python3 -m http.server

Goals

• provide material's design spec in a rust's api for use in rustwasm based environments
• provide a zero js design system for rust

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

Roadmap

• implement basic token mappings of material design

• implement theming provider

• implement components

• implement theme generator

Usage

warning this section is outdated, usage and examples needs be updated.

• add dependency to your Cargo.toml

cargo add material_you

• import library and add the theme provider

use yew::prelude::{function_component, html};
use material_you::provider::MaterialProvider;

#[function_component(MyApp)]
fn my_app() -> Html {
	// MaterialProvider provides context info for material design
	// for theming, icons, typography
	html! { <MaterialProvider>
		<p>{"My App"}</p>
	</MaterialProvider> }
}

• now you can use components

use yew::prelude::{function_component, html};
use material_you::{
	color::ColorRole, 
	components::card::{
		Card, 
		CardKind, 
		FilledCard, 
	},
	css,
	provider::MaterialProvider
};

#[function_component(MyComponent)]
fn my_component() -> Html {
	let styles = {
		let custom_styles = css::new_style("div", r#"margin: 8px;"#);

		vec![custom_styles]
	};

	let custom_bg_role = ColorRole::Tertiary;

	html! { <div>
		<Card bg_role={custom_bg_role} styles={styles.clone()} >{"ElevatedCard is the default card"}</Card>

		<Card kind={CardKind::Outlined} styles={styles.clone()} >{"Outlined Card"}</Card>

		<FilledCard styles={styles.clone()} >{"Filled card"}</FilledCard>
	</div> }
}

#[function_component(MyApp)]
fn my_app() -> Html {
	html! { <MaterialProvider>
		<MyComponent />
	</MaterialProvider> }
}

Contribution guide

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

Support

I am an independent computer developer and researcher. My work is progressing slowly because I live on the edge. I have been looking for a job for several years to be able to live and continue with my work but it is easier said than done.

If you believe in my code and want to support my work you can give me a job or support me trough patreon.

License