Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nilssonH/Framer-Grid
A flexible Framer Module that creates a grid overlay on top of your prototype.
https://github.com/nilssonH/Framer-Grid
Last synced: 2 months ago
JSON representation
A flexible Framer Module that creates a grid overlay on top of your prototype.
- Host: GitHub
- URL: https://github.com/nilssonH/Framer-Grid
- Owner: nilssonH
- License: mit
- Created: 2015-08-29T13:09:27.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2016-09-14T12:06:28.000Z (over 8 years ago)
- Last Synced: 2024-08-03T00:10:08.161Z (6 months ago)
- Language: JavaScript
- Size: 4.16 MB
- Stars: 24
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-framer - Framer-Grid - Flexible Framer Module that creates a grid overlay on top of your prototype to precisely align content or experiment early on in the design process. (Modules)
README
# Framer Grid Overlay Module
A flexible Framer Module that creates a grid overlay on top of your prototype to precisely align content or experiment early on in the design process.
## Example
#### [Pttrns website](http://share.framerjs.com/lbl0okamp6lp/)
Prototype of [Pttrns](https://pttrns.com) to show the overlay on a static image.
## Including module
To include this module, download the grid.coffee file and put it in the `/modules` folder of your prototype.
Then add the following line to your prototype.
```coffeescript
gridOverlay = require “grid”
```
## Installation
To create a grid, add this line of code to your prototype.
```coffeescript
Grid = new gridOverlay.Grid
```
## Customization
Pass parameters to adjust the grid to your project’s needs.
**Note: if you don't change the value of a parameter, the value will be set to default.**
```coffeescript
Grid = new gridOverlay.Grid
offset: 190
amount: 6
gutWidth: 30
colWidth: 145
gridColor: "rgba(22, 89, 240, .5)"
```
## Questions/improvements
If you have questions, please [tweet me](https://twitter.com/nilshoenson/) or send me an [email](mailto:[email protected]).
If you want to change or improve something, be sure to send a pull request.