Classnames

Current Crates.io Version

An opinionated lLibrary for generating BEM style classnames, in Rust.

If you don't know BEM, BEM it is a set of naming conventions for CSS names.

Please read about BEM elsewhere online for an explination.

Opinions

The opinionated parts of this library are on how classnames should be used. It is not intended to be used as a general purpose library, but specifically for use when creating components.

Using Classnames

There are two main things to import ...

The way classnames works, is internally it wraps each Class with a different Class type. Adding on "__child" and "--attr" classes, and so on.

The crux of using Classnames ...

  1. You call classname to create a new base classname.
  2. You may then optionally call .el to generate a child classname.
  3. You may also optionally call .attr to add on any BEM attributes.
  4. You can then add classes together, to allow printing multiple different classnames in a component.
  5. Finally they all support being turned into a String, or being printed with ::std::fmt::Display.

Here is the above again in code ...

``` use ::classnames::Class;

fn example() { // 1. ".banner" let base_class = classname("banner");

// 2. ".banner_header" let header = baseclass.el("header");

// 3. ".bannerheader .bannerheader--bold" let boldheader = baseclass.el("header").attr("bold");

// 4. ".banner .pricing-banner" let pricingbanner = baseclass + classname("pricing-banner");

// 5. Prints out HTML with the classes included. format!(r#"

Pricing Information

    <p>Example copy</p>
  </div>

"#, baseclass = pricingbanner, headerclass = boldheader); } ```

Passing classnames to other functions

All of the internal Classname types implement ::classnames::Class. They can be passed by using this type, which you can also wrap in an Option for convenience.

For example ...

``` use ::classnames::Class; use ::classnames::classname;

#[component] pub fn Card( class: Option, children: Children, ) -> impl Render { let base_class = classname("card");

rsx! {
  <div
    class={base_class + class}
  >
    {children}
  </div>
}

} ```

Example with RSX

Classnames is intended to be used with something else for rendering HTML. For example with the render crate.

This is an example for the HTML to a hypothetical TextInput component, which can be optionally disabled.

``` use ::classnames::Class; use ::render::{rsx, Render, component};

#[component] pub fn TextInput( isdisabled: bool, error: &'static str, ) -> impl Render { let baseclass = classname("text-input");

rsx! {
  <div
    class={base_class}
  >
    <input class={base_class.el("input").maybe_attr("disabled", is_disabled)} type={"text"} />

    <div class={base_class.el("error")}>
      {error}
    </div>

    <img src={"/input-icon.svg"} class={base_class.el("icon").attr("large")} />
  </div>
}

} ```

Running render( true, &"Some error has occured" ) will produce HTML like ...

``` 

<div class="text-input__error">
  {"Some error has occured"}
</div>

<img src={"/input-icon.svg"} class="text-input__icon text-input__icon--large" />

```