https://github.com/simbleau/cssugar
A CSS library for Rust, focusing on ergnomic abstractions.
https://github.com/simbleau/cssugar
Last synced: 10 months ago
JSON representation
A CSS library for Rust, focusing on ergnomic abstractions.
- Host: GitHub
- URL: https://github.com/simbleau/cssugar
- Owner: simbleau
- License: apache-2.0
- Created: 2022-09-10T12:15:54.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2023-01-18T05:12:33.000Z (over 3 years ago)
- Last Synced: 2025-04-02T14:49:23.953Z (about 1 year ago)
- Language: Rust
- Size: 80.1 KB
- Stars: 6
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE-APACHE
Awesome Lists containing this project
README
# CSSugar
A CSS values and units library for Rust, focusing on ergnomic abstractions.
# Goal
The goal is to wrap all CSS values and units in an ergonomic, rusty way. This is primarily for ecosystem tooling built around Yew and Stylist.
Read more:
- https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units
# Examples
## Numbers, lengths, and percentages
[Read more](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#numbers_lengths_and_percentages)
```rs
use cssugar::prelude::*;
#[function_component(SizedButton)]
pub fn sized_button() -> Html {
let size = Vw(100) - Px(300);
let button_css = format!("width: ${size};");
html! {
{ "CLICK ME!" }
}
}
```
Expected Output:
> `CLICK ME!`
## Colors
[Read more](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#color)
```rs
use cssugar::prelude::*;
#[function_component(SizedButton)]
pub fn sized_button() -> Html {
let color = Color::rgb(255, 0, 0).blend(BLACK);
let label_css = format!("color: ${color};");
html! {
{ "I am dark red!" }
}
}
```
Expected Output:
> `I am dark red!`
## Images
[Read more](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#images)
TODO
## Functions
[Read more](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#functions)
```rs
use cssugar::prelude::*;
#[function_component(SizedButton)]
pub fn sized_button() -> Html {
let l1 = Length::Vw(100.);
let l2 = Length::Px(300.);
let size = l1.min(l2);
let button_css = format!("width: ${size};");
html! {
{ "CLICK ME!" }
}
}
```
Expected Output:
> `CLICK ME!`