From c2b13c69a9b8f52eaeb6773690ab3247f98a3487 Mon Sep 17 00:00:00 2001 From: Akshay Nair Date: Fri, 25 Aug 2023 20:28:26 +0530 Subject: docs: removes shitty example --- README.md | 43 +++---------------------------------------- 1 file changed, 3 insertions(+), 40 deletions(-) diff --git a/README.md b/README.md index fd2e62e..f8998bc 100644 --- a/README.md +++ b/README.md @@ -16,50 +16,13 @@ A ui library where you only write CSS. No HTML, no JS, no build system, only CSS ### Simple example -You can start by adding the script tag for the renderer inside the body +You can start by adding the script tag for the renderer in your document ```html - - - - - - - - - + ``` -```css -/* style.css */ - -:root { - /* creates 2 elements main and button */ - --cssx-children: main#main-el button#my-button; -} - -#main-el { - --text: ""; -} -#main-el::after { - content: var(--text); -} - -#my-button { - --cssx-text: "Click me"; - /* On click, waits for 1 second and then updates the --text property #main-el */ - --cssx-on-click: - update(main-el, --text, "Loading...") - delay(1s) - update(main-el, --text, "Hello world!"); -} -``` - -[Here's the code in action](https://codepen.io/phenax/pen/gOZOLgR?editors=1100) - -> "Wow. You couldn't come up with a more boring example if you tried." - -Alright. You don't have to be mean about it. +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 todo app example](https://codepen.io/phenax/pen/QWzWGaV?editors=1100) - [Here's a clock example](https://codepen.io/phenax/pen/KKbKNeb?editors=1100) -- cgit v1.3.1