https://github.com/developer-1px/adorable-css

Rapid On-Demand Atomic CSS Framework
https://github.com/developer-1px/adorable-css

atomic-css css functional-css on-demand utility-classes vite-plugin

Last synced: 28 days ago
JSON representation

Rapid On-Demand Atomic CSS Framework

• Host: GitHub
• URL: https://github.com/developer-1px/adorable-css
• Owner: developer-1px
• Created: 2021-02-20T13:26:03.000Z (almost 4 years ago)
• Default Branch: master
• Last Pushed: 2024-09-24T05:50:58.000Z (3 months ago)
• Last Synced: 2024-10-29T01:26:49.238Z (about 1 month ago)
• Topics: atomic-css, css, functional-css, on-demand, utility-classes, vite-plugin
• Language: TypeScript
• Homepage: https://developer-1px.github.io/adorable-css/
• Size: 6.22 MB
• Stars: 290
• Watchers: 2
• Forks: 22
• Open Issues: 16
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• made-in-korea - adorable-css - 1px](https://github.com/developer-1px)<br> (> 0 ⭐️)

README

        
# AdorableCSS

> Rapid On-Demand Atomic CSS framework

> AdorableCSS를 만들게 된 배경이 궁금하다면 [여기](https://velog.io/@teo/adorable-css)를 통해 확인해보세요.

![](https://images.velog.io/images/teo/post/0282cd6a-7530-4674-ad56-2cea0b55b773/%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202022-01-12%20%E1%84%8B%E1%85%A9%E1%84%8C%E1%85%A5%E1%86%AB%2012.06.40.png)

## Try It Online

- Try it online [here](https://developer-1px.github.io/adorable-css/).

![AdorableCSS](https://images.velog.io/images/teo/post/dde8bc56-15d0-4fc0-a15a-f3c204f50494/AdorableCSS.gif)

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

```tsx

// Button.tsx

export const Button = () =>

  

    
👍

    
Like

  

```


#### ... and auto generate css on realtime! 😎

```css

/* @adorable.css */

* {margin:0;padding:0;box-sizing:border-box;font:inherit;color:inherit;flex-shrink:0;}

.c\(\#fff\){color:#fff;}

html .active\:bg\(\#000\)\!:active,html .active\:bg\(\#000\)\!.\:active{background-color:#000!important;}

.bg\(\#333\){background-color:#333;}

@media (hover:hover){.hover\:bg\(\#555\):hover,.hover\:bg\(\#555\).\:hover{background-color:#555;}}

.font\(14\/16\/-1\%\){font-size:14px;line-height:16px;letter-spacing:-0.01em}

.bold{font-weight:700;}

.hbox{display:flex;flex-flow:row;align-items: center;}

.p\(8\/12\){padding:8px 12px;}

.pack{display:flex;align-items:center;justify-content:center;}

.pointer{cursor:pointer;}

html .active\:b\(\#000\.2\):active,html .active\:b\(\#000\.2\).\:active{border:1px solid rgba(0,0,0,.2);}

.b\(\#000\.2\){border:1px solid rgba(0,0,0,.2);}

.r\(6\){border-radius:6px;}

.gap\(6\){gap:6px;}

.layer{position:absolute;top:0;right:0;bottom:0;left:0}

.transition\(\.2s\){transition:all .2s;}

```

---

## Getting Started

### CDN

- ⛱ vite, webpack, postcss등 다른 복잡한 설정 없이 그냥 script 한줄만 추가하면 adorableCSS를 사용할 수 있습니다.

- ⚡️ adorableCSS를 간편하게 쓰는 방법! body 맨 아래 ``만 추가해보세요.

- 런타임 방식으로 css in js 방식을 통해서 동적으로 style을 생성하여 적용해줍니다.

- (지금 개발자 도구를 열어서 아무 엘리먼트나 class="bg(red)" 를 한번 추가해보세요.)

```html