AdorableCSS

Rapid On-Demand Atomic CSS framework

Try It Online

try it online here.

Don't write your own css. Just write down in HTML.

// Button.tsx
export const Button = () =>
  <button class="hbox pack bg(#333) c(#fff) b(#000.2) r(6) p(8/12) font(14/16/-1%) bold pointer transition(.2s)
  hover:bg(#555)
  active:bg(#000)! active:b(#000.2)">click me</button>

... and auto generated css code on realtime! 😎

/* @adorable.css */
*{margin:0;padding:0;box-sizing:border-box;font:inherit;color:inherit;flex-shrink:0;}
.c\(\#fff\){color:#fff;}
.bg\(\#333\){background-color:#333;}
@media (hover:hover){.hover\:bg\(\#555\):hover,.hover\:bg\(\#555\).\:hover{background-color:#555;}}
html .active\:bg\(\#000\)\!:active,html .active\:bg\(\#000\)\!.\:active{background-color:#000!important;}
.font\(14\/16\/-1\%\){font-size:14px;line-height:16px;letter-spacing:-0.01em}
.bold{font-weight:700;}
.p\(8\/12\){padding:8px 12px;}
.b\(\#000\.2\){border:solid 1px rgba(0,0,0,.2);}
html .active\:b\(\#000\.2\):active,html .active\:b\(\#000\.2\).\:active{border:solid 1px rgba(0,0,0,.2);}
.r\(6\){border-radius:6px;}
.hbox{display:flex;flex-flow:row;align-items: center;}
.pack{display:flex;align-items:center;justify-content:center;}
.pointer{cursor:pointer;}
.transition\(\.2s\){transition:all .2s;}

---

Getting Started

https://www.youtube.com/watch?v=55W1rlJ4ukc&list=PLiyB-5pV363Q2_itR2K2FIr6qe3kNW1TL

npm i -D adorable-css

// vite.config.js
...
import {adorableCSS} from "adorable-css/vite-plugin-adorable-css" // <-

export default defineConfig({
  plugins: [adorableCSS(), ...] // <-
})

// main.tsx

import React from "react"
import ReactDOM from "react-dom"
import "./index.css"
import "@adorable.css" // <-
import {App} from "./App"

ReactDOM.render(
  <React.StrictMode>
    <App/>
  </React.StrictMode>,
  document.getElementById("root")
)

Documentation

For full documentation, visit AdorableCSS