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

• 🚧 Core api (in progess)

  • [x] typographies
  • [x] icons
  • 🚧 buttons
    • 🚧 common buttons
    • [ ] fab button
    • [ ] extended fab
    • [ ] icon buttons
    • [ ] segmented buttons
  • [ ] checkbox
  • [ ] chips
  • [ ] dialog
  • [ ] divider
  • [ ] elevation
  • [ ] list
  • [ ] radio button
  • [ ] select
  • [ ] tabs
  • [ ] text field

• 🚧 Adapters

  • 🚧 yew (in parallel progress with core-api)
  • [ ] seed
  • [ ] percy
  • [ ] scymore
  • [ ] dioxus

Development

Prerequisites

• rust install rust

• add wasm32 target bash rustup target add wasm32-unknown-unknown

• install wasm tools, wasm-pack and wasm-bingend-cli, and cargo-watch (for live reload) bash cargo install wasm-pack wasm-bindgen-cli cargo-watch

• some http server for example python http.server

Run

• clone the repo bash git clone https://gitlab.com/material-rs/material_you_rs

• build and serve website bash 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 bash cd /path/of/material_you_rs cargo watch -c -q -w . -i .git -i .gitlab -i target -i website/pkg -i website/.gitignore -i website/index.html -i .gitignore -i Cargo.lock -i README.md -i rustfmt.toml -s 'wasm-pack build website --target no-modules'

• and in another termninal serve site bash 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

• [x] basic token mappings of material design
• ❌ theme provider
• 🚧 components and core api (only basics components)
• 🚧 apadters
• [ ] implement theme generator
• [ ] design server
• [ ] complex and advance components for core api
• [ ] update apadters

Usage

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

• add dependency to your Cargo.toml bash cargo add material_you

• import library and add the theme provider

```rust use yew::prelude::{functioncomponent, html}; use materialyou::provider::MaterialProvider;

[function_component(MyApp)]

fn my_app() -> Html { // MaterialProvider provides context info for material design // for theming, icons, typography html! {

{"My App"}

• now you can use components

```rust use yew::prelude::{functioncomponent, html}; use materialyou::{ color::ColorRole, components::card::{ Card, CardKind, FilledCard, }, css, provider::MaterialProvider };

[function_component(MyComponent)]

fn mycomponent() -> Html { let styles = { let customstyles = 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! { } } ```

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