4.1 KiB
zephyr
zephyr is a tailwind-inspired css generator dsl. it acts as a replacement for inline styles, with the added ability of pseudo-elements, pseudo-classes, and more
documentation is not too great at the moment, but there's not a lot to know ^^
how to use
to generate the css out of the list of classes, call Zephyr::generate_classes
let classes = [
"mt[10rem]",
"color[#e20f00]",
"color[green]hover",
"content[attr(after)]$after",
"content['*']$before",
"color[red]$after",
];
let z = zephyr::Zephyr::new();
let css = z.generate_classes(classes);see examples/html.rs for more information
how to define classes
property and value
in the most simple case, classes have a property and a value: name[value]. zephyr will take this and generate the following css:
.name\[value\] {
name: value;
}non-value classes
some non-value classes are supported read more here.
for example, flex, which will generate .flex { display: flex; }
pseudo-classes
zephyr supports pseudo-classes:
with values
when using pseudo-classes with values, simply write the pseudo-class you want after the closing square bracket, like so: name[value]pseudo.
multiple pseudo-classes can be concatenated with commas: m[1rem]focus,hover,odd
without values
for non-value classes, the format used is name|pseudo.
multiple pseudo-classes can be concatenated with commas: flex-row|focus,hover,odd
pseudo-elements
pseudo-elements like ::before or ::after are also supported. they are delimited by $.
for example, content['*']hover$after will result in:
.content\[\'\*\'\]hover\$after:hover::after {
content: '*';
}replacements
zephyr performs replacements for some common properties, values, pseudo-classes, and pseudo-elements. they are listed under defaults. these allow you to write bgc[red]odd instead of background-color[red]nth-child(odd)
you can customize the replacements by accessing the hashmaps in Zephyr and inserting/removing what you see fit
media queries
media queries are unsupported so far, but are on the roadmap
defaults
these are the current default values, lifted straight from the code.
you are free to add more by accessing the hashmaps in Zephyr
declarations
these are the non-value classes:
("flex", "display:flex;"),
("flex-row", "display:flex;flex-direction:row;"),
("flex-col", "display:flex;flex-direction:column;"),
("items-center", "align-items:center"),
("justify-center", "justify-content:center"),properties
("w", "width"),
("h", "height"),
("m", "margin"),
("mt", "margin-top"),
("mb", "margin-bottom"),
("ml", "margin-left"),
("mr", "margin-right"),
("p", "padding"),
("pt", "padding-top"),
("pb", "padding-bottom"),
("pl", "padding-left"),
("pr", "padding-right"),
("bg", "background"),
("bgc", "background-color"),values
("full", "100%"),pseudo-classes
("odd", "nth-child(odd)"),
("even", "nth-child(even)"),
("first", "first-child"),
("last", "last-child"),
("only", "only-child"),pseudo-elements
("ph", "placeholder"),specials
these are for property-value classes which need to output multiple declarations or need to do some processing to the value
special!("mx", val, "margin-left:{val};margin-right:{val};"),
special!("my", val, "margin-top:{val};margin-bottom:{val};"),
special!("px", val, "padding-left:{val};padding-right:{val};"),
special!("py", val, "padding-top:{val};padding-bottom:{val};"),inventory
by activating the inventory feature, you can register classes from different parts of your application, and then generate them all with a single call to Zephyr::generate_from_inventory. this is done by using the inventory crate
you can register the classes you use with register_class!("mt[10rem]");
see examples/inventory.rs for more information