* zephyr zephyr is a [[https://tailwindcss.com/][tailwind]]-inspired css generator dsl. it acts as a replacement for inline styles, with the added ability of pseudo-elements, pseudo-classes, and more [[https://versary.town/zephyr/][playground]] ** how to use to generate the css out of the list of classes, call =Zephyr::generate_classes= #+begin_src rust 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); #+end_src see [[examples/html.rs][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: #+begin_src css .name\[value\] { name: value; } #+end_src *** non-value classes some non-value classes are supported [[#declarations][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: #+begin_src css .content\[\'\*\'\]hover\$after:hover::after { content: '*'; } #+end_src *** replacements zephyr performs replacements for some common properties, values, pseudo-classes, and pseudo-elements. they are listed under [[#defaults][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]] *** 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= #+caption: sizes |-----+-------------------| | sm | min-width: 640px | | md | min-width: 768px | | lg | min-width: 1024px | | xl | min-width: 1280px | | xxl | min-width: 1536px | classes with a responsive modifier apply on that size and up. you can use =