Awesome
<!-- markdownlint-disable MD014 MD033 MD041 --> <div align=center>Inspired by Rebass, TailwindCSS, Smooth UI, and Material UI. <br> Implemented in Emotion.
</div>
Usage
Basic example
# using npm
npm install monad-ui
# using yarn
yarn add monad-ui
import * as S from 'monad-ui';
// blue background
function Example() {
return (
<div css={S.bg('blue')}>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
</div>
);
}
// blue background and red text color
function Example() {
return (
<div css={[S.bg('blue'), S.color('red')]}>
Lorem ipsum dolor sit, amet consectetur adipisicing elit.
</div>
);
}
Responsive styles
Monad UI has four breakpoints (view source):
const breakpoints = {
sm: '576px',
md: '768px',
lg: '992px',
xl: '1200px'
};
There are many ways to implement responsive styles:
-
Array Responsive API
import * as S from 'monad-ui'; function Example() { return ( <div css={S.bg(['red', 'green', 'blue'])}> Lorem ipsum dolor sit, amet consectetur adipisicing elit. </div> ); }
Example above will change the
div
'sbackground
tored
. When the screen size is above576px
, it will begreen
. When the screen size is above768px
, it will beblue
. And so on. -
Object Responsive API
import * as S from 'monad-ui'; function Example() { return ( <div css={S.bg({ sm: 'red', lg: 'blue' })}> Lorem ipsum dolor sit, amet consectetur adipisicing elit. </div> ); }
Note that
md
is not specified. When it's not specified, it will take the previous value, which isred
in this case. -
Higher-order Function Responsive API
import * as S from 'monad-ui'; function Example() { return ( <div css={S.up('sm')(S.hidden)}> Lorem ipsum dolor sit, amet consectetur adipisicing elit. </div> ); }
Example above will hide the
div
when the screen size is above576px
.import * as S from 'monad-ui'; function Example() { return ( <div css={S.up('sm')(S.bg('blue'))}> Lorem ipsum dolor sit, amet consectetur adipisicing elit. </div> ); }
Example above will change the
div
'sbackground
intoblue
when the screen size is above576px
.
Static vs Dynamic APIs
- Dynamic type accept arguments (e.g.
S.bg('blue')
). - Static type does not accept arguments. (e.g.
S.down('md')(S.hidden)
).
Type | Array Responsive API | Object Responsive API | High Order Responsive API |
---|---|---|---|
Dynamic | ✅ | ✅ | ✅ |
Static | ❌ | ❌ | ✅ |
Available APIs
View all available APIs at ./docs/available-apis.md
.
FAQs
-
Do I always have to
import * as S from 'monad-ui'
?If you only use a few styles, you can also import and use like this:
import { bg, hidden } from 'monad-ui'; function Example() { return ( <div css={bg('blue')}> Lorem ipsum dolor sit, amet consectetur adipisicing elit. </div> ); }
-
Too many styles?
Consider extracting your style outside like this:
import { css } from '@emotion/core'; import { bg, color } from 'monad-ui'; const style = css([bg('blue'), color('red')]); function Example() { return ( <div class={style}> Lorem ipsum dolor sit, amet consectetur adipisicing elit. </div> ); }