Foundation Masonry is an open-source HTML template that integrates the Zurb Foundation CSS framework with the jQuery Masonry library to produce a responsive Pinterest-style masonry layout that automatically reflows when the browser is resized.
What is Foundation Masonry?
Foundation Masonry is a starting-point HTML template that combines two front-end libraries: Zurb Foundation for responsive styling and the jQuery Masonry plugin for a cascading card grid. It takes static HTML content — such as image cards or text blocks — and renders them in a packed masonry arrangement where items fill vertical gaps left by taller neighbors. The template is maintained by Steve McArthur and hosted on GitHub at SteveMcArthur/foundation-masonry, with a live project page at stevemcarthur.github.io/foundation-masonry.
Key Features
- Zurb Foundation integration — the project uses Zurb Foundation for its responsive grid and UI components, so the layout adapts to desktop, tablet, and mobile widths out of the box.
- jQuery Masonry layout — the jQuery Masonry plugin (from masonry.desandro.com) provides the Pinterest-style card packing, with items positioned based on available vertical space.
- Responsive reflow — the grid rearranges itself automatically when the browser is resized, unlike a fixed grid.
- No filtering included — the current implementation has no card-filtering system, although it does reorder on resize; the author notes this as an area for future contributions.
- Open-source and forkable — the repository is available on GitHub with 8 stars at the time of this description, and the author welcomes feedback and contributions.
- Credits and inspiration — the implementation acknowledges dylanbaumann/Zurb-Foundation-and-Masonry and bootflat.github.io as sources, making it a derivative work suited for developers who want a compact example.
Who is it for?
- Front-end developers who want a quick, working example of marrying a CSS framework with a masonry layout can use this template as a base for a portfolio or image gallery.
- Designers prototyping a Pinterest-style visual grid can clone the repository and swap in their own card markup without wiring up the layout script from scratch.
- Students learning jQuery plugins can study how Zurb Foundation classes coexist with a jQuery Masonry call to produce a responsive grid.
What can you do with Foundation Masonry?
- Build an image gallery: drop thumbnail cards into the grid and see them pack tightly with no blank vertical gaps, then watch the arrangement change as you resize the window.
- Create a portfolio or blog index: use the masonry layout to present blog post excerpts or project summaries in a multi-column card layout that stays balanced on varying screen sizes.
- Prototype a Pinterest clone: the template gives you the core masonry behavior; extend it with your own filtering, infinite scroll, or linking logic.
How does Foundation Masonry work?
Foundation Masonry loads the Zurb Foundation stylesheet and the jQuery Masonry script when the page opens. The masonry script reads the grid container, measures each card's height, and places them into columns to minimize vertical gaps. Whenever the browser is resized, the script recalculates the column layout and rearranges the cards accordingly.
Pros and cons
- Pros: combines two established libraries (Zurb Foundation and jQuery Masonry); automatic reflow on browser resize; simple, readable HTML template; actively open to community contributions.
- Cons: no filtering system is implemented in the current version, so users must add their own logic for filtering displayed cards; the project is a small template rather than a full-featured product and may require additional work for production use.
FAQ
What is Foundation Masonry?
Foundation Masonry is an HTML template that merges the Zurb Foundation CSS framework with the jQuery Masonry plugin to create a responsive Pinterest-style card layout. It is hosted on GitHub by Steve McArthur and is intended as a starting point for projects that need a collapsing masonry grid.
Does Foundation Masonry include filtering?
No, the current implementation does not include a filtering system. The author explicitly notes that it will rearrange itself on browser resize, but filtering is left as a future enhancement. Developers would need to add their own JavaScript to filter the cards.
What dependencies does Foundation Masonry use?
The template depends on Zurb Foundation for responsive styling and the jQuery Masonry plugin (which itself requires jQuery) for the masonry layout. It also references the masonry.desandro.com documentation and borrows ideas from dylanbaumann/Zurb-Foundation-and-Masonry and bootflat.github.io.
Is Foundation Masonry free to use?
The repository is public on GitHub and the author describes it as a template project that others can use. No license file is mentioned, so confirm licensing details before commercial use.
Where can I see Foundation Masonry in action?
The project's live page is at http://stevemcarthur.github.io/foundation-masonry/, and the source code is available at https://github.com/SteveMcArthur/foundation-masonry. The repository also includes a screenshot of the layout.
