10 releases (6 breaking)

0.14.1 Jun 15, 2022
0.14.0 Apr 15, 2022
0.13.1 Jan 9, 2022
0.12.1 Dec 27, 2021
0.8.0 Apr 8, 2021

#378 in GUI

Used in yew-layout


3.5K SLoC


master docs · stable docs · crate info · pipeline · rustc version · unsafe forbidden

This crate provides you a typed CSS style with builder-style methods. See API Docs (master)

NOTE: css-style is not (yet) production ready but is good for use in side projects and internal tools.


  • Typed CSS Values: CSS units and values are all typed (.e.g Length, Px, BorderStyle::None ..etc)
  • Builder Methods: Provide builder-pattern methods for every css-style property (well, not all them yet! :P). So you don't need to import so many enum types.


The goal for this crate is to provide a Style object with builder-pattern methods to build up a CSS inline-style value, thus can be used with/by other crates that works with styling HTML tags (such as dioxus, yew, tinytemplate..etc).


The Style object is not intended for parsing or retrieving typed values out of it. Consider using other crate for parsing purpose.

Qucik Example

use css_style::{prelude::*, color, unit::{ms, px}};

let style = style()
    .and_transition(|conf| {
            .insert("opacity", |conf| conf.duration(ms(150.)).ease())
            .insert("transform", |conf| conf.duration(ms(150.)).ease())
            .insert("visibility", |conf| conf.duration(ms(150.)).ease())
    .and_position(|conf| conf.absolute())
    .and_background(|conf| conf.color(color::named::WHITE))
    .and_border(|conf| {
    .and_padding(|conf| conf.x(px(4)).y(px(2)))
    .and_margin(|conf| conf.top(px(2)))
    .insert("box-shadow", "0 2px 8px rgba(0, 35, 11, 0.15)");

println!("{}", style);

this would print:

transition: opacity 150ms ease, transform 150ms ease, visibility 150ms ease;
position: absolute;
background-color: white;
border-left-width: 0px;
border-left-style: none;
border-top-width: 0px;
border-top-style: none;
border-right-width: 0px;
border-right-style: none;
border-bottom-width: 0px;
border-bottom-style: none;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
padding-top: 2px;
padding-right: 4px;
padding-bottom: 2px;
padding-left: 4px;
margin-top: 2px;
box-shadow: 0 2px 8px rgba(0, 35, 11, 0.15);


~86K SLoC