A rapid styling system built on Hyperapp
.
- ✍ Write component styles inline (with shorthand properties) (API)
- ⎀ Convert those styles to actual classnames (API)
- ﹖ All extracted out to a separate stylesheet (😅)
- ⌁ Use a super lightweight non-React microframework. (API)
Build layouts like this.
<Box
flex
px2 py2
itemsCenter
black bgBlue
>
Hummus
</Box>
Or like this:
const style = {
maxWidth: '74em',
margin: '0 auto'
}
<Box css={style}>...</Box>
And depending on your config...
export const classNameOutput = 'lite' // lite, atomic, monolithic
...get classnames like this:
// lite
// a b c i j k l
// atomic
// d-flex pl-16 pr-16 pt-16 pb-16 c-374047 bc-0077cc
// monolithic
// _kzfwue
Yes. Even shorthands. See API
Not out of the box, but it could be adapted pretty easily.
Under the hood _min
uses cxs
, which holds up well in tests. Regardless,
I see this type of approach being used more for prototyping, designing, and small websites.
Figure out a way to get all the styles extracted into a separate stylesheet, so as to eliminate any performance concerns, and Make Alex Happy™.
A lot of this code directly from @jxnblk, and heavily influenced by basscss.
MIT License