view.rs

fn basic_styled_counter() -> Node<Msg> {
div![
        h3!["Basic Styled Counter"],
        md![
            r#"This is a basic styled button, the button is styled with the following

```
S.padding_left(px(24))
    .padding_right(px(24))
    .padding_top(px(8))
    .padding_bottom("8px")
    .border_radius(px(4))
    .margin("2px")
    .background_color("teal")
    .color("white")
    .outline_style(CssOutlineStyle::None)
    .display(CssDisplay::InlineBlock)
```
Notice how the optional value typing works : `px(2)` is an `ExactLength` it can be used 
whenever a pixel measurement is needed. Other units include `pc()` `rem()` and `em()`.

Strings can be used for properties (e.g. `.padding_bottom("8px").  You can also use the specific Css value type directly. 
These types are enums, for instance demonstrated here with a `CssDisplay::InlineBlock` passed to the `.display()` method 
or the `CssOutlineStyle::None` passed to the `outline_style()` method.

The reason for preferring typed arguments is that typos are detected at compile time. For instance writing
this page I accidentally typed `Outine` instead of `Outline`. If this was pure css the error would only be 
spotted if I had thoroughly checked the resultant page and css for a property that is often easy to miss.

See `css_values.rs` for a complete list of properties and values available.
       "#
        ],
        p!["You have clicked ", "counter", " times",],
        button!["Increment Counter", mouse_ev(Ev::Click, |_| ())]
    ]
}