ฅ ^•ﻌ•^ ฅ ♥
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;}