Utility first CSS-in-JS
npm install monad-uiA Utility first CSS-in-JS
Inspired by:
- Rebass
- TailwindCSS
- Smooth UI
- Material UI
Implemented in EmotionJS
Install emotion.js
In this tutorial we're going to use emotion's css prop API
``
import * as S from 'monad-ui
``
In component
``
Monad UI
With more styles
`
S.bg('blue'),
S.color('red),
]}>
Monad UI
It will styles the
div's background to blue and color to red3 Ways to make the style Responsive
Currenlty, We have 4 breakpoints:
`
sm: '576px'
md: '768px'
lg: '992px'
xl: '1200px'
`1. Array Responsive API
`
S.bg(['red', 'green', 'blue'])}
>Monad UIIt will make the
div's background to red.When the screen size is above
576px. It will be greenWhen the screen size is above
768px. It will be blueAnd so on.
2.Object Responsive API
`
S.bg({
sm: 'red',
lg: 'blue',
})}
>
Monad UI
`
This is just another form of responsive API.
On screen size sm it will be red.
On screen size lg it will be blue.
Notice that I didn't specify md. When it's not specified. It will take the previous value. Which is red in this case
`
S.up('sm')(hidden)
}>
Monad UI
This will hide the
div when screen size is below 576px`
S.up('sm')(hidden)
}>
Monad UI
This will hide the
div when screen size is above 576px`
S.up('sm')(S.bg('blue'))
}>
Monad UI
This will turn
div's background into blue when screen size is above 576pxAvailable API
| Type | Array Responsive API | Object Responsive API | High Order Responsive API |
| ------- | -------------------- | --------------------- | ------------------------- |
| Dynamic | ✅ | ✅ | ✅ |
| Static | ❌ | ❌ | ✅ |
Dynamic => It accept
argFor example,
bg('blue')That means this can be used with
Array Responsive API:
``javascript`
bg(['red', 'green', 'blue']);
Object Responsive API:
`javascript`
bg({
sm: 'red',
lg: 'blue'
});
and High Order Responsive API
`javascript`
up('md')(
bg('blue')
);
So it can only be used with High Order Responsive API
`javascript`
down('md')(
hidden
);
| Prop |
| ---- |
| up |
| down |
| Prop | type |
| ---------- | ------ |
| hidden | static |
| block | static |
| inline | static |
| flex | static |
| inlineFlex | static |
| Prop | type |
| -------------- | ------- |
| flexWrap | dynamic |
| flexDirection | dynamic |
| alignItems | dynamic |
| justifyContent | dynamic |
| justifyBetween | static |
| flexCol | static |
| Prop | Type |
| ------- | ------ |
| centerX | static |
| centerY | static |
| center | static |
- CenterX => Center Horizontally, it's just an alias for [S.flex, S.justifyContent('center')][S.flex, S.alignItems('center')]
- CenterY => Center Veritcally, it's just an alias for CenterX + CenterY
- Center => An alias for
| Prop | Type |
| ---- | ------- |
| ml | dynamic |
| mr | dynamic |
| mt | dynamic |
| mb | dynamic |
| mx | dynamic |
| my | dynamic |
| m | dynamic |
| Prop | Type |
| ---- | ------- |
| pl | dynamic |
| pr | dynamic |
| pt | dynamic |
| pb | dynamic |
| px | dynamic |
| py | dynamic |
| p | dynamic |
| Prop | Type |
| ----- | ------- |
| bg | dynamic |
| color | dynamic |
| Prop | Type |
| ---- | ------- |
| w | dynamic |
| maxW | dynamic |
- w is an alias for widthmaxWidth
- maxW is an alias for
| Prop | Type |
| ---- | ------- |
| lh | dynamic |
| fs | dynamic |
| fw | dynamic |
| Prop | Type |
| ------- | ------- |
| round | dynamic |
| rounded | static |
| border | dynamic |
| Prop | Type |
| ---- | ------ |
| link | static |
- link is an alias for
``
textDecoration: 'none',
color: 'inherit',
cursor: 'pointer'
If you only use a few style
You can also import it this way
``
import {bg, hidden} from 'monad-ui'
And use it like this
``
Consider extracting your style outside
`@emotion/core
import {css} from
import {bg, color} from 'monad-ui'
const style = css([
bg('blue'),
color('red')
])
// ... in component