From 2d016d004bf7829c436c9de38f7924b1c4acec87 Mon Sep 17 00:00:00 2001 From: annieversary Date: Wed, 17 Aug 2022 00:17:39 +0100 Subject: [PATCH] readme --- README.org | 48 +++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 41 insertions(+), 7 deletions(-) diff --git a/README.org b/README.org index fe6ac27..441e534 100644 --- a/README.org +++ b/README.org @@ -1,7 +1,7 @@ * 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 -documentation is not too great at the moment, but there's not a lot to know ^^ +documentation is not too great at the moment ** how to use to generate the css out of the list of classes, call =Zephyr::generate_classes= @@ -20,7 +20,7 @@ let z = zephyr::Zephyr::new(); let css = z.generate_classes(classes); #+end_src -see [[examples/html.rs][examples/html.rs]] for more information +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: @@ -54,19 +54,47 @@ for example, =content['*']hover$after= will result in: 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 -*** media queries -media queries are unsupported so far, but are on the roadmap +*** 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 =