Quartz
Quartz is a javascript utility for producing responsive pinterest-style layouts. Quartz prioritizes balanced column heights over strict item ordering.
Features
- API for appending, prepending, and removing items
- API for manual refresh of layout
- Balanced column heights
- All styling is controlled by your CSS
- Adjusts column count by responding to MediaQueryList events
- No dependencies for modern browsers
Installation
bower
bower install quartz
npm
npm install quartz-layout
Using Quartz
Define your HTML — a container
element is required. The container can be empty, or pre-populated with items as show below. Use your own class names for the container and items.
1 2 3
Include the javascript files. For IE 9 support, include the provided match-media.min.js
polyfill, which is a concatenated and minified copy of matchMedia.js.
<!--[if lt IE 10]><script src="match-media.min.js"></script><![endif]-->
Setup your CSS grid as you normally would – for example:
{} {} {}
Initialize Quartz with your configuration settings.
var config = container: '.container' items: '.item' columnClass: 'column' mediaQueries: // max-width is required for smallest size query: 'screen and (max-width: 39.99em)' columns: 1 // both min- and max-width are required for intermediate sizes query: 'screen and (min-width: 40em) and (max-width: 49.99em)' columns: 2 query: 'screen and (min-width: 50em)' columns: 3 var quartz = config
Using Quartz with images
In order for Quartz to maintain balanced column heights, images must be pre-loaded so that their heights can be included in the overall item height calculations.
One way to accomplish this is to use a utility like ImagesReady. For example:
;
Configuration Options
var config = {}
config.container
Required
// CSS selectorconfigcontainer = '.container' // HTMLElementconfigcontainer = document // jQueryconfigcontainer = 0
config.items
Required
// CSS selectorconfigitems = '.item' // Array of HTMLElementconfigitems = document document // NodeListconfigitems = document // jQueryconfigitems =
config.columnClass
Required
// CSS class(es) to be applied to columnsconfigcolumnClass = 'column foo'
config.mediaQueries
Required
- List media queries in order, from smallest to largest.
max-width
is required for smallest size- Both
min-width
andmax-width
are required for intermediate sizes
If your CSS looks like this:
{ /* 1 column */} { /* 2 columns */} { /* 3 columns */}
Your configuration should look like this:
configmediaQueries = query: 'screen and (max-width: 39.99em)' columns: 1 query: 'screen and (min-width: 40em) and (max-width: 49.99em)' columns: 2 query: 'screen and (min-width: 50em)' columns: 3
API
quartz.append(items)
Add the provided item(s) to the end of the layout.
// `items` as a single HTMLElementvar item = document;quartz; // `items` as an array of HTMLElementvar items = document document;quartz; // `items` as a NodeListvar items = document;quartz; // `items` as jQueryquartz;
quartz.prepend(items)
Add the provided item(s) to the beginning of the layout.
// `items` as a single HTMLElementvar item = document;quartz; // `items` as an array of HTMLElementvar items = document document;quartz; // `items` as a NodeListvar items = document;quartz; // `items` as jQueryquartz;
quartz.remove(items)
Remove the provided item(s) from the layout.
// `items` as a single HTMLElementvar item = document;quartz; // `items` as an array of HTMLElementvar items = document document;quartz; // `items` as a NodeListvar items = document;quartz; // `items` as jQueryquartz;
quartz.removeAll()
Remove all items from the layout.
quartz;
quartz.update([columnCount])
Force an update of the layout – all heights will be re-evaluated. Passing an optional columnCount
will change the number of columns in the layout.
// manually refresh the current layoutquartz; // change the current layout to a two column layoutquartz;
Browser Support
- Chrome
- Firefox
- IE 9+
- Safari
NOTE: IE 9 requires the provided matchMedia polyfill
Module Support
- AMD
- CommonJS
- Browser global
License
Quartz is free to use under the open-source MIT license.