gerhobbelt / mason

Mason.js for creating a perfect grid with jQuery.

##Mason.js Mason.js is a jQuery plugin that allows you to create a perfect grid of elements.

This is not Masonry, or Isotope or Gridalicious. Mason fills in those ugly gaps, and creates a perfectly filled space.

##USE

Basic CSS

#container {
	width: 100%
	position: relative;
}
.box {
	float: left;
	background-color: #00ffff;
	position: relative;
}

Call Mason.js ( BASIC )

$("#container").mason({
	itemSelector: ".box",
	ratio: 1.5,
	sizes: [
		[1,1],
		[1,2],
		[2,2]
	]
});

##OPTIONS Mason.js has a number of options:

$("#container").mason({
	itemSelector: ".box",
	ratio: 1.5,
	sizes: [
		[1,1],
		[1,2],
		[2,2]
	],
	columns: [
		[0,480,1],
		[480,780,2],
		[780,1080,3],
		[1080,1320,4],
		[1320,1680,5]
	],
	filler: {
		itemSelector: '.fillerBox',
		filler_class: 'custom_filler'
	},
	layout: 'fluid',
	gutter: 10
},function(){
	console.log("COMPLETE!")
});

• itemSelector
  • the element that makes up your grid
• ratio
  • The ratio is a number that is used to create the blocks based on column count and width.
• sizes
  • Sizes are an array of sizes you wish to use in your grid. These are composed of block numbers. ( ex: [1,1] means 1 block high, 1 block wide )
• columns
  • columns are an array of break points for your columns. Think of this like media queries. start small and grow. They should be formatted as [min,max,cols]
• filler
  • itemSelector: This describes the elements to be used to fill in blank spaces. This will default to the original itemSelector if there is nothing
  • filler_class: This is a class given to filler elements within the grid, used for cleaning up if a grid set to fluid
• Layout
  • There are two layouts, fluid and fixed. Mason will default to fixed. Fluid means it will be responsive.
• Callback
  • You can add a callback function to Mason to notify you when the grid has completed building.
• Gutter
  • Allows you to add spacing between the elements, think of this as a margin.

##EXAMPLES Fluid
Fixed
Fluid Gutters

##Updates 6.1.13 - Updated to use filler blocks once and not repeat.