layout-greed

Layout guidlines to make sure you are on the right track when developing. Inspired by Figma 💄

Installing

For npm users - npm install layout-greed

For yarn users - yarn install layout-greed

Demo

Grids

Rows

Columns

Demo video

Usability Notice

use (shift+l) to hide/show the layout grid control

How to use

• For normal use

import { Layout } from 'layout-greed';
const App = () => {
  return (
    <div className="App">
      <Layout />
    </div>
  );
};

• To pick custom bindings / keyboard shortcuts

import { Layout } from 'layout-greed';
const App = () => {
  return (
    <div className="App">
      <Layout customKeyBinding="ctrl+e" />
    </div>
  );
};

• To conditionally hide the layout grids

import { Layout } from 'layout-greed';
const App = () => {
  const disabled = () => {
    if (process.env.NODE_ENV !== 'production') return true;
    return false;
  };
  return (
    <div className="App">
      <Layout hide={disabled} />
    </div>
  );
};

props

| Props | Types | Default | | ---------------- | ------- | ---------------------- | | hide | boolean | N/A | | color | string | rgba(250, 15, 15, 0.1) | | customKeyBinding | string | shift+l |

How to contribute

git clone https://github.com/chocoscoding/layout-greed layoutgreed
cd layoutgreed
yarn install

• Create a branch with the name of the feature you're want to contribute about. (Not too long naming)
• Run yarn test to make sure everything is alright and good.
• Run yarn storybook to see and manage ui changes .
• Make your contributions 😻
• Run the following commands

  git add .
  yarn commit

• Run yor tests
• Push the changes
• Create a pull request
• After test and requirements are passed, your changes would be merged ✨✨✨✨