article:
Elements Design: Vector Infographics (AI)
article:
Elements Design & Mobile: Tab Bar Icons iOS 7 (PSD)

JS Plugin: Mason.js

Advertisement

``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.
``


Resource Plugin: Mason.js



Implement

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



jQuery - mason.js

- Call mason.js:
$("#container").mason({
    itemSelector: ".box",
    ratio: 1.5,
    sizes: [
        [1,1],
        [1,2],
        [2,2],
    ]
});
- Option mason.js
$("#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!")
});

List of options:
  1. itemSelector: the element that makes up your grid;
  2. ratio: The ratio is a number that is used to create the blocks based on column count and width.
  3. 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 )
  4. 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]
  5. filleritemSelector: 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
  6. Layout: There are two layouts, fluid and fixed. Mason will default to fixed. Fluid means it will be responsive.
  7. Callback: You can add a callback function to Mason to notify you when the grid has completed building.
  8. Gutter: Allows you to add spacing between the elements, think of this as a margin.


Screenshots

mason fluid
Resource Plugin: Mason.js

mason fixed
Resource Plugin: Mason.js

mason fluid gutters
Resource Plugin: Mason.js


This resource is very easy to customize



demo mason fluid
demo mason fixed
demo mason fluid gutters
download
source

Advertisement
Tags: mason, plugin, jquery, box, isotope, gridalicious, space, web, grid, elements, grid of elements

Leave a Comment

No Comment

© Creative3x Ltd.