https://github.com/mkitt/gridzzly
:bear: React component for aligning layouts
https://github.com/mkitt/gridzzly
aligning-layouts css debug grid layout react
Last synced: 4 days ago
JSON representation
:bear: React component for aligning layouts
- Host: GitHub
- URL: https://github.com/mkitt/gridzzly
- Owner: mkitt
- License: mit
- Archived: true
- Created: 2018-01-24T22:44:01.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2019-03-04T21:20:41.000Z (over 7 years ago)
- Last Synced: 2026-04-17T16:07:59.254Z (2 months ago)
- Topics: aligning-layouts, css, debug, grid, layout, react
- Language: JavaScript
- Homepage: http://mkitt.net/gridzzly/
- Size: 200 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: Readme.md
- License: License.txt
Awesome Lists containing this project
- awesome-github-projects - gridzzly - :bear: React component for aligning layouts ⭐4 `JavaScript` (📦 Legacy & Inactive Projects)
README
# Gridzzly. (Deprecated)
React component for aligning layouts.
View the [demo](http://mkitt.net/gridzzly/).
🐻🐼
[](https://travis-ci.org/mkitt/gridzzly)
## Installation
```sh
npm install gridzzly --save
# or
yarn add gridzzly
```
## Usage
Gridzzly fills the parent container with a grid.
As a fixed grid over the entire page:
```js
```
Or as a grid over a contained component:
```js
Hello.
```
## Options, types and default values
```js
autoHide?: boolean, // false
colorInner?: string, // rgba(255, 0, 255, 0.5)
colorOuter?: string, // rgba(255, 0, 255, 1.0)
columnSize?: ?number, // defaults to `size`
cycleKey?: ?string, // null (key to cycle rows & columns)
dashInner?: string, // '2, 2'
dashOuter?: string, // '' (solid line)
hasInner?: boolean, // true
isDisabled?: boolean, // false
opacity?: number, // 0.2
persist: boolean // false (store grid state in sessionStorage)
rowSize?: ?number, // defaults to `size`
size?: number, // 16,
strokeWidth?: number, // 1,
toggleKey?: ?string, // null (key to toggle grid)
position?: 'absolute' | 'fixed' | 'sticky' | 'static', // absolute
top?: number | string, // 0
right?: number | string, // 0
bottom?: number | string, // 0
left?: number | string, // 0
zIndex?: number, // 2
```
[mkitt.net][mkitt.net] | [github/mkitt][github]
[github]: https://github.com/mkitt "@mkitt"
[mkitt.net]: https://mkitt.net "🏔"