^•ﻌ•^

AdorableCSS

⚡️ Rapid on-demand atomic css framework

No more writing your own CSS.

We have created almost all the CSS you need. Just write down in your HTML(or JSX).

[ •́ ‸ •̀ ]

Naming things is hard.

.inner-wrapper { position:relative; padding: 10px 20px }

.inner-wrapper? 서식을 위해 의미없는 이름을 짓기 위해서 고민하지마세요.


<div class="relative p(10/10)">

그냥 서식 그대로 HTML에 적어보세요. 필요한 CSS는 다 만들어두었습니다.


<div class="font(10) c(#ff0) bold text-center">

When just write down in HTML or JSX

<button 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) hover:bg(#555) active:bg(#000)! active:b(#000.2)"> <div>👍</div> <div>Like</div> </button>

... and auto generate CSS on realtime! (and build-time) 😎

/* @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;}

⚡️

Fast Writing without switching!

이제 HTML과 CSS와 화면을 번갈아가면서 개발하지마세요.


디자인을 만들기 위해 구조를 변경하고 CSS를 수정하고 이름을 수정하고 Selector를 수정하고 다시 HTML을 수정하고...

👇

HTML, JSX를 수정하면서 실시간으로 변경되는 디자인을 확인하며 작업해보세요!

ᕙ(`▿´)ᕗ

Write less do more!

Isn't it 90s-vibe inline-style? No!

More extensible Syntax

<div class="font(14/1.5/-1%)"/> <div class="w(100~200)"/> <div class="nowrap..."/> <div class="line-clamp(3)"/> <div class="hbox(bottom+right)"/> <div class="layer(right)"/> .font(14/1.5/-1%){font-size:14px;line-height:1.5;letter-spacing:-0.01em} .w(100~200){min-width:100px;max-width:200px;} .hbox(bottom+right){display:flex;flex-flow:row;align-items:flex-end;justify-content:flex-end;} .nowrap...{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;flex-shrink:1;} .line-clamp(3){display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;} .layer(right){position:absolute;top:0;right:0;bottom:0}

Support Full Pesudo-class/element

<a class="hover:underline active:bg(#000)"/> <div class="nth-child(3n+1):bg(orange)"/> <input class="placeholder:c(#ccc)"/> <div class="after:content(--my-content)" style="--my-content: 'hello adorable'"/> .placeholder\:c\(\#ccc\)::placeholder{color:#ccc;} html .active\:bg\(\#000\):active,html .active\:bg\(\#000\).\:active{background-color:#000;} .nth-child\(3n\+1\)\:bg\(orange\):nth-child(3n+1){background-color:orange;} @media (hover:hover){.hover\:underline:hover,.hover\:underline.\:hover{text-decoration:underline;}} .after\:content\(--my-content\):after{content:'var(--my-content)'}

Selector Support

<div class=".selected:bg(#000) .selected:c(#fff)"/> <div class=">h1:m(20)"/> <input class=">>a:c(#4f80ff)"/> .\.selected\:c\(\#fff\).selected,.selected .\.selected\:c\(\#fff\){color:#fff;} .\>\>a\:c\(\#4f80ff\)>>a{color:#4f80ff;} .\.selected\:bg\(\#000\).selected,.selected .\.selected\:bg\(\#000\){background-color:#000;} .\>h1\:m\(20\)>h1{margin:20px;}

Media Query Support

<div class="@w(320~):c(red)">320 > red</div> .\.selected\:c\(\#fff\).selected,.selected .\.selected\:c\(\#fff\){color:#fff;} .\>\>a\:c\(\#4f80ff\)>>a{color:#4f80ff;} .\.selected\:bg\(\#000\).selected,.selected .\.selected\:bg\(\#000\){background-color:#000;} .\>h1\:m\(20\)>h1{margin:20px;}

📦

Portable and Compact

Are you refactor code? you don't worry about that separated CSS.
We don't write CSS. Just Cut & Paste!

No Semantic + No CSS = Great for handoff!

🤝

디자인 파일의 속성을 서식 그대로 HTML로 옮겨올 수가 있습니다.

figma handshake plugin