{"id":13718946,"url":"https://github.com/developer-1px/adorable-css","last_synced_at":"2026-04-21T05:01:24.271Z","repository":{"id":37653862,"uuid":"340660638","full_name":"developer-1px/adorable-css","owner":"developer-1px","description":"Rapid On-Demand Atomic CSS Framework","archived":false,"fork":false,"pushed_at":"2025-06-30T12:30:28.000Z","size":6955,"stargazers_count":300,"open_issues_count":16,"forks_count":24,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-10-20T02:16:22.271Z","etag":null,"topics":["atomic-css","css","functional-css","on-demand","utility-classes","vite-plugin"],"latest_commit_sha":null,"homepage":"https://developer-1px.github.io/adorable-css/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/developer-1px.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-02-20T13:26:03.000Z","updated_at":"2025-09-30T02:31:27.000Z","dependencies_parsed_at":"2023-11-07T07:27:40.035Z","dependency_job_id":"633f8979-a413-4e81-8307-e4842fea4a6c","html_url":"https://github.com/developer-1px/adorable-css","commit_stats":{"total_commits":154,"total_committers":7,"mean_commits":22.0,"dds":"0.43506493506493504","last_synced_commit":"184a1c705ae9213f04f94471d6aaca582c49389b"},"previous_names":[],"tags_count":26,"template":false,"template_full_name":null,"purl":"pkg:github/developer-1px/adorable-css","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/developer-1px%2Fadorable-css","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/developer-1px%2Fadorable-css/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/developer-1px%2Fadorable-css/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/developer-1px%2Fadorable-css/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/developer-1px","download_url":"https://codeload.github.com/developer-1px/adorable-css/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/developer-1px%2Fadorable-css/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32077837,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-21T02:38:07.213Z","status":"ssl_error","status_checked_at":"2026-04-21T02:38:06.559Z","response_time":128,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["atomic-css","css","functional-css","on-demand","utility-classes","vite-plugin"],"created_at":"2024-08-03T01:00:39.826Z","updated_at":"2026-04-21T05:01:24.197Z","avatar_url":"https://github.com/developer-1px.png","language":"TypeScript","funding_links":[],"categories":["\u003e 0 ⭐️"],"sub_categories":[],"readme":"# AdorableCSS\n\u003e Rapid On-Demand Atomic CSS framework\n\u003e AdorableCSS를 만들게 된 배경이 궁금하다면 [여기](https://velog.io/@teo/adorable-css)를 통해 확인해보세요.\n\n![](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)\n\n\n## Try It Online\n- Try it online [here](https://developer-1px.github.io/adorable-css/).\n\n![AdorableCSS](https://images.velog.io/images/teo/post/dde8bc56-15d0-4fc0-a15a-f3c204f50494/AdorableCSS.gif)\n\n#### Don't write your own css. Just write down in HTML.\n\n```tsx\n// Button.tsx\n\nexport const Button = () =\u003e\n  \u003cbutton class=\"hbox pack gap(6) bg(#333) c(#fff) b(#000.2) r(6) p(8/12) font(14/16/-1%) bold pointer transition(.2s)\n  hover:bg(#555)\n  active:bg(#000)! active:b(#000.2)\"\u003e\n    \u003cdiv\u003e👍\u003c/div\u003e\n    \u003cdiv\u003eLike\u003c/div\u003e\n  \u003c/button\u003e\n```\n\n#### ... and auto generate css on realtime! 😎\n\n```css\n/* @adorable.css */\n\n* {margin:0;padding:0;box-sizing:border-box;font:inherit;color:inherit;flex-shrink:0;}\n.c\\(\\#fff\\){color:#fff;}\nhtml .active\\:bg\\(\\#000\\)\\!:active,html .active\\:bg\\(\\#000\\)\\!.\\:active{background-color:#000!important;}\n.bg\\(\\#333\\){background-color:#333;}\n@media (hover:hover){.hover\\:bg\\(\\#555\\):hover,.hover\\:bg\\(\\#555\\).\\:hover{background-color:#555;}}\n.font\\(14\\/16\\/-1\\%\\){font-size:14px;line-height:16px;letter-spacing:-0.01em}\n.bold{font-weight:700;}\n.hbox{display:flex;flex-flow:row;align-items: center;}\n.p\\(8\\/12\\){padding:8px 12px;}\n.pack{display:flex;align-items:center;justify-content:center;}\n.pointer{cursor:pointer;}\nhtml .active\\:b\\(\\#000\\.2\\):active,html .active\\:b\\(\\#000\\.2\\).\\:active{border:1px solid rgba(0,0,0,.2);}\n.b\\(\\#000\\.2\\){border:1px solid rgba(0,0,0,.2);}\n.r\\(6\\){border-radius:6px;}\n.gap\\(6\\){gap:6px;}\n.layer{position:absolute;top:0;right:0;bottom:0;left:0}\n.transition\\(\\.2s\\){transition:all .2s;}\n```\n\n---\n\n## Getting Started\n\n### CDN\n- ⛱ vite, webpack, postcss등 다른 복잡한 설정 없이 그냥 script 한줄만 추가하면 adorableCSS를 사용할 수 있습니다.\n- ⚡️ adorableCSS를 간편하게 쓰는 방법! body 맨 아래 `\u003cscript src=\"https://unpkg.com/adorable-css\"\u003e\u003c/script\u003e`만 추가해보세요.\n- 런타임 방식으로 css in js 방식을 통해서 동적으로 style을 생성하여 적용해줍니다.\n- (지금 개발자 도구를 열어서 아무 엘리먼트나 class=\"bg(red)\" 를 한번 추가해보세요.)\n\n```html\n  \u003cscript src=\"https://unpkg.com/adorable-css\"\u003e\u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n\n### Vite(Recommended)\n- run-time이 아니라 Build-time에서 최종 css를 만들어냅니다. (zero run-time)\n- 최종적으로 만들어진 css를 통해서 런타임 비용을 더 줄일 수 있고 css의 캐싱 기능을 더 활용할 수 있습니다.\n\n```sh\nnpm i -D adorable-css\n```\n\n```ts\n// vite.config.js\nimport {adorableCSS} from \"adorable-css/vite\" // \u003c-\n\nexport default defineConfig({\n  plugins: [adorableCSS(), ...] // \u003c- plugin을 맨 처음에 등록합니다.\n})\n```\n\n```tsx\n// main.tsx\nimport \"@adorable.css\" // \u003c- virtual css를 import 합니다.\n\nimport React from \"react\"\nimport ReactDOM from \"react-dom\"\nimport \"./index.css\"\nimport {App} from \"./App\"\n\nReactDOM.render(\n  \u003cReact.StrictMode\u003e\n    \u003cApp/\u003e\n  \u003c/React.StrictMode\u003e,\n  document.getElementById(\"root\")\n)\n```\n\n#### React, Svelte, Vue ... Almost Web framework support with Vite.\n\n\n### CLI(beta): Build Time + Watch mode\n[Remix + adorable css example](./examples/adorable-css-remix/)\n\n```\nnpm i -D adorable-css\n```\n\n```\nUsage:\n  $ adorable-css [root]\n\nCommands:\n  [root]  build for production\n\nFor more info, run any command with the `--help` flag:\n  $ adorable-css --help\n\nOptions:\n  -o, --out \u003cdir\u003e  [string] output Directory (default: adorable.css)\n  -w, --watch      [boolean] rebuilds when modules have changed on disk (default: false)\n  -m, --minify     [boolean] minify output css (default: false)\n  -v, --verbose    [boolean] verbose build output (default: false)\n  --no-reset       [boolean] exclude reset css from output (default: true)\n```\n\n\u003e vite 환경이 아니라면 cdn을 통해서 실시간으로 개발하고 cli로 최종 빌드시 css만 포함하는 방식을 생각하고 있습니다.\n\u003e 다양한 환경에서 조금더 DX를 높이는 방향성을 고민해보겠습니다.\n\n---\n\n## What is AdorableCSS?\n\u003e Rapid On-Demand Atomic CSS framework\n\n골치아픈 css 이름짓기는 이제 그만!\n\n더 이상 새로운 css를 작성하는 데 힘빼지 마세요. 거의 모든 class를 미리 정의해두었습니다.\n\nclass=\"font(20) c(red)\"와 같이 함수형으로 정의된 형식으로 입력해보세요.\n\n모든 수치와 색상을 지원하며, 필요한 만큼의 CSS만 만들어 냅니다.\n\n## Why Use AdorableCSS?\n\n**Easy!**\n: 디자인 개발을 위해 이름을 짓는 수고가 사라지며, 한번 외운 이름은 계속 사용할 수 있습니다.\n\n**Write less do more!**\n: 기존 css문법보다 훨씬 더 적은 코드로 더 많은 작업을 할 수 있습니다.\n\n**Fast Writing and No switching!**\n: html, jsx에 바로 디자인을 적용할 수 있어 매우 빠른 디자인 개발 속도를 가집니다.\n\n**Portable!**\n: css 없이 HTML만으로 UI를 만들 수 있어 이동과 리팩토링에서 자유롭습니다.\n\n**Compact!**\n: 기존 css 방식보다 훨씬 더 적은 라인의 최적화된 css를 생산합니다.\n\n**Great for Auto Design HandOff!**\n: 이름이 필요없기에 figma등의 HandOff에서 변환하기에 최적화된 형태입니다.\n\n## Handshake\n\u003e figma AdorableCSS plugin [link](https://github.com/developer-1px/adorable-css/tree/master/src%5Bfigma-handshake%5D)\n\n![](https://images.velog.io/images/teo/post/579cdb7b-8819-4902-8f97-06c3400b2021/%E1%84%92%E1%85%AA%E1%84%86%E1%85%A7%E1%86%AB%20%E1%84%80%E1%85%B5%E1%84%85%E1%85%A9%E1%86%A8%202021-09-01%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%203.17.17.mov.gif)\n\n## Documentation\nFor full documentation, visit [here](https://github.com/developer-1px/adorable-css/tree/master/src%5Badorable-css%5D).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeveloper-1px%2Fadorable-css","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdeveloper-1px%2Fadorable-css","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdeveloper-1px%2Fadorable-css/lists"}