Crate css_style

This crate provides you a typed CSS style with builder-style methods.

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

Features

• Typed CSS Values: CSS units and valuse are all typed (.e.g Length, Px, css::None ..etc)
• Builder Methods: Provide bulder-pattern methods for every css-style property. (well, not all them yet! :P)

Goal

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 yew, seed, tinytemplate..etc).

Non-Goal

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

Qucik Example

use css_style::{Style, Color, unit::{ms, px}};

let style = Style::default()
    .and_transition(|conf| {
        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::White))
    .and_border(|conf| {
        conf.none()
            .width(px(0))
            .radius(px(4))
    })
    .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);

Re-exports

pub use self::background::Background;

pub use self::border::Border;

pub use self::box_align::*;

pub use self::box_shadow::BoxShadow;

pub use self::color::Color;

pub use self::color::Opacity;

pub use self::css_values as css;

pub use self::cursor::Cursor;

pub use self::display::Display;

pub use self::flexbox::Basis as FlexBasis;

pub use self::flexbox::Direction as FlexDirection;

pub use self::flexbox::Grow as FlexGrow;

pub use self::flexbox::Order as FlexOrder;

pub use self::flexbox::Shrink as FlexShrink;

pub use self::flexbox::Wrap as FlexWrap;

pub use self::font::Font;

pub use self::gap::Gap;

pub use self::margin::Margin;

pub use self::padding::Padding;

pub use self::position::Position;

pub use self::size::Size;

pub use self::style::Style;

pub use self::style::StyleUpdater;

pub use self::text::Text;

pub use self::transition::Transition;

pub use self::visibility::Visibility;

Modules

background
border
box_align
box_shadow
calc
color
css_values
cursor
display
flexbox
font
gap
margin
padding
position
prelude
size
style
text
transition
unit
visibility