divygrid

Creates a coordinate-graph style grid and can place images or other content based on x and y coordinates. Just specify the size of your grid, the content and its location.

Usage

getting back an example grid 10 by 10, with solid black grid lines and no content blocks

grid = Divy::Grid.new
grid.html

Setting content for a grid and generating

options = {
  content: [
    {type: :html, value: 'coolhtmlstuff', location: [1, 3], size: [1, 1]},
    {type: :image, value: 'someimagepath', location: [1, 3], size: [2, 2]}
  ],
  grid_dimensions: [5, 5],
  show_grid: true,
  grid_color: '#FF00CC',
  container_size: [100, 100]
}
grid = Divy::Grid.new(options)
grid.html

Options can also be set using

grid = Divy::Grid.new
grid.content = [
  {type: :html, value: 'coolhtmlstuff', location: [1, 3], size: [1, 1]},
  {type: :image, value: 'someimagepath', location: [1, 3], size: [2, 2]}
]
grid.grid_dimensions = [5, 5]
grid.show_grid = true
grid.grid_color = '#FF00CC'
grid.container_size = [100, 100]
grid.html

note, html_safe is not called on the returned string

Available input options

show_grid

true or false => generate a div for each box in the grid, defaults to true if a grid color is chosen, defaults to false

grid_color

Hex color as a string or 'invisible' => if not invisible the background coordinate plane graph will show as this color (border of divs), defaults to 'invisible'

container_size

[width, height] specified in px => the height and width of the containing div element

  • integers will result in sizes in px
  • percentages as a string can also be used
  • defaults to 100% x 100%

grid_dimensions

[x, y] integers => number of 'cells' (ie. create a coordinate plane of x elements by y elements that fits in container_size)

content

{ type: valid options are :html, :image, :none value: html string for :html, image path for :image location: [x, y] cooresponding to a point on the grid to center the content on size: [x, y] number of grid units to fill (ie. 1 X 1 square on a 5x5 grid filled with given content) }

When html content is passed, it is passed through as-is

Styles

If you need to set styles of the div elements via css, the containing element is class='divycontainer', boxes and content boxes are class='divybox'

Contributing

If you make improvements to this application, please share with others.

  • Fork the project on GitHub.
  • Make your feature addition or bug fix.
  • Commit with Git.
  • Send the author a pull request.

If you add functionality to this application, create an alternative implementation, or build an application that is similar, please contact me and I’ll add a note to the README so that others can find your work.