Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/informatix8/grid-overlay
Visual grid overlay for aligning CSS layouts at development-time
https://github.com/informatix8/grid-overlay
grid grid-system layout
Last synced: about 1 month ago
JSON representation
Visual grid overlay for aligning CSS layouts at development-time
- Host: GitHub
- URL: https://github.com/informatix8/grid-overlay
- Owner: informatix8
- Created: 2018-09-11T15:23:33.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2021-06-10T21:22:37.000Z (over 3 years ago)
- Last Synced: 2025-01-06T14:52:23.150Z (about 1 month ago)
- Topics: grid, grid-system, layout
- Language: JavaScript
- Homepage: https://gridoverlay.com/
- Size: 19.5 KB
- Stars: 3
- Watchers: 3
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# grid-overlay
Visual grid overlay for aligning CSS layouts at development-time.
Examples and the API are in the [documentation](https://gridoverlay.com)
## Features
- Supply a column count, gutter width, and how they behave at any breakpoint
- Supports additional gutters outside the first and last columns
- Draggable on-screen responsive debugger
- Toggle the overlay Option + g
## Usage
### Install
```shell
npm install grid-overlay --save-dev
```
### CDN
```html
```
### Vanilla Javascript
```javascript
new GridOverlay({
controlParentEl: '.attach-grid-overlay-control-here',
maxWidth: 1440,
columns: 12,
gridGutter: 8,
adaptive: [
{
mediaQuery: '(max-width: 600px)',
cols: 2,
gridGutter: 8
},
{
mediaQuery: '(min-width: 1025px)',
cols: 12,
gridGutter: 48
}
],
overlayVisible: true,
writeInlineStyles: true,
controlZIndex: 1200,
controlBackgroundColor: '#474747',
controlFontColor: '#ffffff',
controlOpacity: 0.9,
overlayZIndex: 1100,
overlayOpacity: 0.4,
foregroundColor: '#409bd2',
backgroundColor: '#80bde1'
});
```
### Vue Component
```html
```
## Development
### Build
```shell
npm run build
```
```shell
npm run lint
npm run scripts
npm run scripts-vue
```
### Build Demo
```shell
cd demo
npm run build
```
```shell
cd demo-vue
npm run build
```
## Release
```shell
npm run jsdoc
npm run build
npm run scripts
npm run scripts-vue
git tag -a vX.Y.Z
git push origin master
git push origin --tags
npm publish .
```