From a930a30f64a3fca99f012beed161c07c14a0fb3f Mon Sep 17 00:00:00 2001
From: annieversary <annie@versary.town>
Date: Fri, 13 May 2022 23:21:35 +0100
Subject: [PATCH] readme

---
 README.org | 63 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 63 insertions(+)
 create mode 100644 README.org

diff --git a/README.org b/README.org
new file mode 100644
index 0000000..1edcff6
--- /dev/null
+++ b/README.org
@@ -0,0 +1,63 @@
+* zephyr
+zephyr is a [[https://tailwindcss.com/][tailwind]]-esque css generator library
+zephyr is not a framework, it will not give you the tools to make good UI
+zephyr is a replacement for inline styles, with the added ability of pseudo-elements, pseudo-classes, and more
+zephyr is kinda somewhat a dsl for css
+** how does zephyr work
+you provide a list of classes you use, and zephyr generates the css for you
+
+#+begin_src rust
+let classes = [
+    "mt[10rem]",
+    "color[#e20f00]",
+    "color[green]hover",
+    "content[attr(after)]$after",
+    "content['*']$before",
+    "color[red]$after",
+];
+
+let css = zephyr::generate_css(&classes);
+let style = format!("<style>{css}</style>");
+#+end_src
+
+there are currently no tools for scanning a directory to find all the classes used, but they are planned
+
+** how to define classes
+*** name and value
+in the most simple case, classes have a name and a value: =name[value]=. zephyr will take this and generate the following css:
+
+#+begin_src css
+.name\[value\] {
+    name: value;
+}
+#+end_src
+
+note that classes without values are currently unsupported, but a high priority on the roadmap
+*** pseudo-classes
+to use pseudo-classes such as =focus=, =hover=, and others, you provide a name, value, and the pseudo-class: =name[value]pseudo=. multiple pseudo-classes can be concatenated with commas: =m[1rem]focus,hover,odd=
+*** pseudo-elements
+pseudo-elements like =::before= or =::after= are also supported. they are delimited by =$=: =content['*']hover$after= will result in:
+
+#+begin_src css
+.content\[\'\*\'\]hover\$after:hover::after {
+    content: '*';
+}
+#+end_src
+
+which will display an asterisk after the element, but only while hovered
+*** replacements
+zephyr performs replacements for some common names and pseudo-classes
+im not gonna list them all here, cause they're probably gonna change often
+these allow you to write =bgc[red]odd= instead of =background-color[red]nth-child(odd)=
+
+there's currently no way to customize the replacements, but it is planned in the future
+*** media queries
+media queries are unsupported so far, but are also on the roadmap
+
+** faq
+*** should i use this?
+probably no? especially now that it's in such an early phase, but even when i "finish" implementing the base set of features, zephyr will be a very niche tool highly tailored to my needs
+you are welcome to give it a go, but unless you want to use it in exactly the same way i want to, you'll probably not have much luck
+*** why did you make this?
+i want the convenience of tailwind's utility classes without having to touch the hellscape that is npm
+i also thought this might be a fun little project to work on, and so far it has been !