• zephyr
  • how to use
  • how to define classes
    • property and value
    • non-value classes
    • pseudo-classes
      • with values
      • without values
    • pseudo-elements
    • replacements
    • spaces
    • literals
    • variables
    • responsive modifiers
  • 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

playground

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 a more detailed usage example

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

spaces

any underscores will be replaced by spaces (eg: border[1px_solid_black] -> border: 1px solid black). this is because you can't have spaces in a class name, and underscores are not common in css values (as far as i'm aware)

if you would like to use underscores in a value, please use literals

literals

if you want no replacements to be applied, use curly brackets instead of square brackets

border{1px_solid_black} -> border: 1px_solid_black

variables

there's a shorthand syntax for referring to css variables, by using parenthesis instead of square brackets

bg(my-bg-color) -> background: var(--my-bg-color)

responsive modifiers

responsive modifiers are written the same way pseudo-classes are. options are sm, md, lg, xl, xxl

sm	min-width: 640px
md	min-width: 768px
lg	min-width: 1024px
xl	min-width: 1280px
xxl	min-width: 1536px

sizes

classes with a responsive modifier apply on that size and up. you can use <lg to apply on all sizes strictly smaller than lg, or @xl to apply exactly on xl

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"),
("items-start", "align-items:flex-start"),
("items-end", "align-items:flex-end"),
("justify-center", "justify-content:center"),
("justify-between", "justify-content:space-between"),
("justify-evenly", "justify-content:space-evenly"),
("text-left", "text-align:left"),
("text-right", "text-align:right"),

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"),
("c", "color"),
("bg", "background"),
("bgc", "background-color"),
("tt", "text-transform"),
("td", "text-decoration"),
("fw", "font-weight"),
("ff", "font-family"),
("fs", "font-size"),

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