A fluent, chainable API for building CSS styles with strong typing in Rust.
- Fluent, chainable API for building CSS styles
- Strongly-typed CSS values using enums and structs
- Extensible design following SOLID principles
- No external dependencies
- Comprehensive validation of CSS values
Add this to your Cargo.toml:
[dependencies]
mew = "0.1.0"use mew_css::style;
use mew_css::values::{Color, Size, Display};
fn main() {
let css = style()
.color(Color::White)
.background_color(Color::Rgba(255, 0, 0, 0.5))
.font_size(Size::Px(16))
.display(Display::Flex)
.apply();
println!("{}", css);
// Output: color: white; background-color: rgba(255, 0, 0, 0.5); font-size: 16px; display: flex;
}use mew_css::style;
use mew_css::values::{Color, Size, Display, FlexDirection, JustifyContent, AlignItems};
fn main() {
let css = style()
.display(Display::Flex)
.flex_direction(FlexDirection::Column)
.justify_content(JustifyContent::Center)
.align_items(AlignItems::Center)
.width(Size::Percent(100.0))
.height(Size::Vh(100.0))
.background_color(Color::Rgb(240, 240, 240))
.color(Color::Hex("333333".to_string()))
.font_size(Size::Rem(1.2))
.font_family("Arial, sans-serif")
.padding(Size::Px(20))
.margin(Size::Auto)
.border_radius(Size::Px(8))
.apply();
println!("{}", css);
}use mew_css::{style, var};
use mew_css::values::{Color};
fn main() {
let css = style()
.set_var("primary", Color::Red)
.custom_property("color", var("primary"))
.apply();
println!("{}", css);
// Output: --primary: red; color: var(--primary);
}color(Color)background_color(Color)border_color(Color)
width(Size)height(Size)margin(Size),margin_top(Size),margin_right(Size),margin_bottom(Size),margin_left(Size)padding(Size),padding_top(Size),padding_right(Size),padding_bottom(Size),padding_left(Size)font_size(Size)line_height(Size)border_width(Size)border_radius(Size)
display(Display)position(Position)flex_direction(FlexDirection)justify_content(JustifyContent)align_items(AlignItems)
font_weight(FontWeight)font_family(&str)text_align(&str)
border_style(&str)
- Named colors:
Black,White,Red,Green,Blue,Yellow,Purple,Gray,Transparent - RGB:
Rgb(u8, u8, u8) - RGBA:
Rgba(u8, u8, u8, f32) - Hex:
Hex(String)
- Pixels:
Px(u32) - Percentage:
Percent(f32) - Em:
Em(f32) - Rem:
Rem(f32) - Viewport width:
Vw(f32) - Viewport height:
Vh(f32) - Auto:
Auto
None,Block,Inline,InlineBlock,Flex,Grid,Table
Static,Relative,Absolute,Fixed,Sticky
Row,RowReverse,Column,ColumnReverse
FlexStart,FlexEnd,Center,SpaceBetween,SpaceAround,SpaceEvenly
FlexStart,FlexEnd,Center,Baseline,Stretch
Normal,Bold,Bolder,Lighter,Weight(u16)
The library is designed to be easily extensible. To add new CSS properties:
- Add a new enum in
values.rsif needed - Add a new property function in the appropriate module in
properties.rs - Add a new method to the
Stylestruct instyle.rs
MIT