• zephyr
  • how to use
  • how to define classes
    • property and value
    • non-value classes
    • pseudo-classes
      • with values
      • without values
    • pseudo-elements
    • replacements
    • media queries
  • defaults
    • declarations
    • properties
    • values
    • pseudo-classes
    • pseudo-elements
    • specials
  • inventory

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