1.4.0 • Published 2 years ago

layout-greed v1.4.0

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

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

Example Image

Rows

Example Image

Columns

Example Image

Demo video

Edit strange-currying-48g5tr

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

PropsTypesDefault
hidebooleanN/A
colorstringrgba(250, 15, 15, 0.1)
customKeyBindingstringshift+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 ✨✨✨✨
1.3.7

2 years ago

1.3.6

2 years ago

1.3.5

2 years ago

1.4.0

2 years ago

1.3.9

2 years ago

1.3.8

2 years ago

1.2.8

2 years ago

1.2.7

2 years ago

1.2.6

2 years ago

1.3.4

2 years ago

1.2.5

2 years ago

1.3.3

2 years ago

1.2.4

2 years ago

1.3.2

2 years ago

1.2.3

2 years ago

1.3.1

2 years ago

1.2.2

2 years ago

1.3.0

2 years ago

1.2.1

2 years ago

1.2.9

2 years ago

1.2.0

2 years ago

1.1.4

2 years ago

1.1.3

2 years ago

1.1.2

2 years ago

1.1.1

2 years ago

1.1.0

2 years ago

1.0.9

2 years ago

1.0.8

2 years ago

1.0.7

2 years ago

1.0.6

2 years ago

1.0.5

2 years ago

1.0.4

2 years ago

1.0.3

2 years ago

1.0.2

2 years ago

1.0.1

2 years ago

1.0.0

2 years ago