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
= {
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()
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.