/GridComponent-for-Framer

A module that creates a Grid Component for you!

Primary LanguageJavaScript

GridComponent-for-Framer

A module that creates a Grid Component for you! The module looks into your 'images' folder for pngs numbered from 1 to n. The folder path, and other options, can be changed to your needs.

GridComponent

How to use

  1. Create a new Framer project.

  2. Download GridComponent.coffee and put it in the modules folder.

  3. Import the module. Put this line at the top of your code.

{GridComponent} = require "GridComponent"
Create your grid!
myGrid = new GridComponent
  items: 10

Customization

This is a list of the attributes you can play around with.

myGrid = new GridComponent
	items: 10
	padding: 10
	columns: 3
	path: 'images'
  • items Number : The number of tiles the Grid will contain. Defaults to 4.
  • padding Number : The amount of padding between your tiles. Defaults to 0.
  • columns Number : The max number of columns for your Grid. Defaults to 4.
  • path String : By default, this module will look into your images folder for pngs numbered from 1 to n. You can change this path, for example: "images/anotherFolder"

Events

You can listen for clicks on the tiles.

myGrid.on "TileClick", ->
	print @tile

@tile will return the Tile that was clicked. From here, you can either change its attributes or check @tile.name to do something specific per tile.

##Contact Twitter: @72mena