diff options
| -rw-r--r-- | README.md | 70 | ||||
| -rw-r--r-- | docs/api/functions.md | 18 |
2 files changed, 74 insertions, 14 deletions
@@ -8,26 +8,48 @@ A ui framework where you only write turing complete CSS. No HTML, no JS, no buil > Disclaimer: Don't use this +## Usage +#### Add script tag to the renderer to your html +```html +<script async defer src="https://unpkg.com/@css-everything/render/dist/renderer/index.js"></script> +``` -## Docs +#### Open up a style tag or link a stylesheet +The renderer by default uses the body element. You can use `:root` to describe the starting point. +Here's a simple counter example: +```css +:root { + --counter: '0'; + --cssx-children: div#count button#decr button#incr; +} -- [Read the documentation](https://github.com/phenax/css-everything/tree/main/docs/README.md) to become enlightened. -- [Here's how this works](https://github.com/phenax/css-everything/tree/main/docs/how-it-works.md). +#count::after { content: "Count: " var(--counter); } - -## Examples -All the magic starts with adding the renderer script tag to your html and having a `--cssx-children` property set on your `body` - -```html -<script async defer src="https://unpkg.com/@css-everything/render/dist/renderer/index.js"></script> +#incr { + --cssx-on-click: update(':root', --counter, calc(get-var(--counter) + 1)); + --cssx-text: "++"; +} +#decr { + --cssx-on-click: update(':root', --counter, calc(get-var(--counter) - 1)); + --cssx-text: "--"; +} ``` +## More examples Here are a few live examples for you to try out - -- [Here's a counter example](https://codepen.io/phenax/pen/KKbdZep?editors=1100) +- [Here's a calculator example](https://codepen.io/phenax/pen/PoLjJmL?editors=1100) - [Here's a todo app example](https://codepen.io/phenax/pen/QWzWGaV?editors=1100) -- [Here's a clock example](https://codepen.io/phenax/pen/KKbKNeb?editors=1100) +- [Here's a simple counter example](https://codepen.io/phenax/pen/KKbdZep?editors=1100) +- [Here's a digital & analog clock example](https://codepen.io/phenax/pen/KKbKNeb?editors=1100) - [More in the examples directory](https://github.com/phenax/css-everything/tree/main/examples) +## Docs +- [Read the documentation](https://github.com/phenax/css-everything/tree/main/docs/README.md) to become enlightened. +- [Here's how this works](https://github.com/phenax/css-everything/tree/main/docs/how-it-works.md). + + + --- @@ -39,11 +61,33 @@ Why not? What? ### What time is it? -Why don't you ask that to [this example](https://codepen.io/phenax/pen/KKbKNeb?editors=1100)? +You can find the answer with [this example](https://codepen.io/phenax/pen/KKbKNeb?editors=1100). ### How does it work? [Here's how it works](https://github.com/phenax/css-everything/tree/main/docs/how-it-works.md). -### Does it parse the entire css -No. The browser does most of it. Only the fancy `--cssx-*` properties use a custom parser. +### Is this turing complete? +Yep. Not that you asked, but here's how to calculate factorial of a number. + +```css +:root { --cssx-children: div#container; } + +#container { + --factorial: func(--n: number) + if(lte(get-var(--n), 1), 1, + calc( + get-var(--n) + * call(--factorial, map(--n: calc(get-var(--n) - 1))) + )); + + --cssx-text: string("7! = ", call(--factorial, map(--n: 7))); +} +``` + +### Escape hatches? +- If you want to directly render some raw html, you can use `--cssx-disgustingly-set-innerhtml`. +- If you want to run js expressions, you can use the `js-eval` function. Eg: `js-eval("new Date().getSeconds()")` + +### Does it need a build step? +No. In fact, this'll probably break if you try to use it with a css preprocessor. diff --git a/docs/api/functions.md b/docs/api/functions.md index e7bce4f..c5c4cde 100644 --- a/docs/api/functions.md +++ b/docs/api/functions.md @@ -13,7 +13,7 @@ type pair = string: any ## Core -### get-var +### get-var / var Get css custom property from an element. Basically var but evaluated lazily. NOTE: Avoid using `var` inside cssx expressions. @@ -30,6 +30,22 @@ Example - } ``` +### calc +Do some math using the calc syntax. Not 100% compatible but it'll do. + +Supported units: rem, em, px, %, ms, s + +```typescript +function calc(calc-expr): string +``` + +Example - +```css +#my-element { + --cssx-text: calc(1 + 5 * get-var(--some-variable)); +} +``` + #### update Update a css custom property on an element |