css-style 0.11.1

Typed CSS Style
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88

# css-style

[![master docs](https://img.shields.io/badge/docs-master-blue.svg)](https://malrusayni.gitlab.io/css-style/css_style/)
·
[![crate info](https://img.shields.io/crates/v/css-style.svg)](https://crates.io/crates/css-style)
·
[![pipeline](https://gitlab.com/MAlrusayni/css-style/badges/master/pipeline.svg)](https://gitlab.com/MAlrusayni/css-style/pipelines)
·
[![rustc version](https://img.shields.io/badge/rustc-stable-green.svg)](https://crates.io/crates/css-style)
·
[![unsafe forbidden](https://img.shields.io/badge/unsafe-forbidden-success.svg)](https://github.com/rust-secure-code/safety-dance/)

This crate provides you a **typed CSS style** with builder-style methods.
[See API Docs](https://malrusayni.gitlab.io/css-style/css_style/)

**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`, `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.
  
# 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

```rust
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:
```css
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);
```