Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Volorf/Gridddle
Grid module for FramerJS
https://github.com/Volorf/Gridddle
framer framerjs grid prototype
Last synced: 2 months ago
JSON representation
Grid module for FramerJS
- Host: GitHub
- URL: https://github.com/Volorf/Gridddle
- Owner: Volorf
- Created: 2016-10-14T13:22:50.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2017-03-22T11:17:27.000Z (almost 8 years ago)
- Last Synced: 2024-11-10T18:53:36.336Z (3 months ago)
- Topics: framer, framerjs, grid, prototype
- Language: CoffeeScript
- Size: 1.44 MB
- Stars: 53
- Watchers: 4
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-framer - Gridddle - Grid module for FramerJS. (Modules)
README
# Gridddle
Grid module for FramerJS![Grid module for FramerJS](/gridddle.png)
## Lyrics
Sometimes I create a layout for my prototype directly in FramerJS. Since I am used to design a layout with a grid (this is the most important and useful design tool) in my visual editor (Sketch) I decided to create a grid module for my favorite prototyping tool.## How to use it
1. Download gridddle.coffee;
2. Put it into module folder of your FramerJS project;
3. Connect gridddle to your code.## How to connect and launch it
```coffeescript
# Connect gridddle module
module = require "gridddle"# Define amount of cell and grid color
amountOfCell = 16
gridColor = "rgba(226, 74, 74, .5)"# Call gridddle and pass it out gridddle settings
module.gridddle(amountOfCell, gridColor)
```## Who is who here
**amountOfCell** defines amount of horizontal cell.
**gridColor** sets color for our grid.
![Grid module for FramerJS](/gridddle.gif)