https://github.com/chocoscoding/layout-greed
https://github.com/chocoscoding/layout-greed
Last synced: 9 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/chocoscoding/layout-greed
- Owner: chocoscoding
- License: mit
- Created: 2023-07-13T21:34:52.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2023-10-28T12:42:03.000Z (over 2 years ago)
- Last Synced: 2025-01-16T02:36:33.325Z (about 1 year ago)
- Language: TypeScript
- Size: 1.19 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: license
Awesome Lists containing this project
README
# 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](https://res.cloudinary.com/chocoscoding/video/upload/v1694686302/Untitled_1_wvxzdx.mp4)
[](https://codesandbox.io/s/strange-currying-48g5tr?fontsize=14&hidenavigation=1&theme=dark)
# Usability Notice
> use (shift+l) to hide/show the layout grid control
# How to use
- For normal use
```jsx
import { Layout } from 'layout-greed';
const App = () => {
return (
);
};
```
- To pick custom bindings / keyboard shortcuts
```jsx
import { Layout } from 'layout-greed';
const App = () => {
return (
);
};
```
- To conditionally hide the layout grids
```jsx
import { Layout } from 'layout-greed';
const App = () => {
const disabled = () => {
if (process.env.NODE_ENV !== 'production') return true;
return false;
};
return (
);
};
```
# 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 ✨✨✨✨