adorable-css

    1.0.6 • Public • Published

    AdorableCSS

    Rapid On-Demand Atomic CSS framework

    Try It Online

    try it online here.

    AdorableCSS

    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

    Install

    npm i adorable-css

    DownloadsWeekly Downloads

    29

    Version

    1.0.6

    License

    MIT

    Unpacked Size

    339 kB

    Total Files

    21

    Last publish

    Collaborators

    • developer.1px