TOMT BevyCSS

What is TOMT BevyCSS?

TOMT BevyCSS is a fork project derived from Bevy ECSS is a crate which allows the usage of a subset of CSS to interact with bevy_ecs. It's mainly aimed to apply styling on bevy_ui but it can be used by any component by implementing custom properties.

Package name?

TOMT = Tome of Many Things
BevyCSS = Bevy + CSS, This library brings CSS features into the Bevy UI

Who is TOMT (Tome of Many Things)?

Tome of Many Things is a small friendship group with various internet projects, primarily focussing on the Tome of Many Things YouTube channel.

This library project is brought to you by TheBeardedQuack (GitHub, YouTube). Forked from BevyECSS, and released under the same MIT and Apahe v2.0 licences to allow for continued freedom of use, modification and distribution.

Usage

To use TOMT_BevyCSS just add a StyleSheet with a loaded css file to any entity and all style sheet rules will be applied to the entity and all its descendants (children of children of children and so on).

use bevy::prelude::*;
use tomt_bevycss::prelude::*;

fn setup_awesome_ui(root: Entity, mut commands: Commands, asset_server: Res<AssetServer>) {
    commands
        .entity(root)
        .insert(StyleSheet::new(asset_server.load("sheets/awesome.css")));
}

That's it, now your UI will indeed look awesome!

CSS Support

This crate aims to support the most common CSS features first, and add more over time as suggestions are provided. This for now means that only a subset of CSS features are provided.

To view the currently supported CSS features, please see CSS Support (docs/css-support.md).

Custom Component Selector

TOMT_BevyCSS supports custom component selectors so you're not limited to components provided by bevy.

Should you need a core bevy component available as a selector that is not currently supported, this feature can also be used to roll your own support. Should you decide to roll your own selector for any bevy built-in componenets, pull requests will be appreciated.

app.register_component_selector::<MyComponent>("selectorname");

See Custom Components (docs/custom-components.md) for more information.

Custom Property

TOMT_BevyCSS supports custom property setters.

This with the above custom component select should enable you to use the CSS system for more than just styling if you so desired.

#[derive(Default)]
pub(crate) struct MyProperty;

impl Property for MyProperty
{
    /* For implementation details please see:
       https://github.com/TheBeardedQuack/tomt_bevycss/tree/main/docs/custom-properties.md
    */
}

fn main()
{
    let mut app = App::new();
    app.register_property::<MyProperty>();
}

See Custom Properties (docs/custom-properties.md) for more information.

Bevy support table

bevy	tomt_bevycss
0.8	0.1
0.9	0.2
0.10	0.3
0.10	0.4.x

Contributing

Got some idea, feedback, question or found a bug? Feel free to open an issue at any time!

License

TOMT_BevyCSS is dual-licensed under either:

MIT License (in repository or from source)
Apache License, Version 2.0 (in repository or from [source][13])

This means you can select the license you prefer! This dual-licensing approach is the de-facto standard in the Rust ecosystem and there are very good reasons to include both.

tomt_bevycss 0.4.1