Home

Awesome

<!-- markdownlint-disable MD014 MD033 MD041 -->

monad-ui

<div align=center>

Inspired by Rebass, TailwindCSS, Smooth UI, and Material UI. <br> Implemented in Emotion.

npm downloads license

</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:

  1. 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's background to red. When the screen size is above 576px, it will be green. When the screen size is above 768px, it will be blue. And so on.

  2. 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 is red in this case.

  3. 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 above 576px.

    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's background into blue when the screen size is above 576px.

Static vs Dynamic APIs

TypeArray Responsive APIObject Responsive APIHigh Order Responsive API
Dynamic
Static

Available APIs

View all available APIs at ./docs/available-apis.md.

FAQs

License

ISC License, Copyright (c) 2020, Muhammad Muhajir