muhajirdev / monad-ui

• Usage
  • Basic example
  • Responsive styles
• Static vs Dynamic APIs
• Available APIs
• FAQs
• License

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

• Dynamic type accept arguments (e.g. S.bg('blue')).
• Static type does not accept arguments. (e.g. S.down('md')(S.hidden)).

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>
    );
  }

License

ISC License, Copyright (c) 2020, Muhammad Muhajir