Implementing Zurb Foundation with a simple jQuery Masonry

Clone this repo:


  1. fd5584f Modifyed Inital Readme by Frank Lemanschik · 9 years ago master
  2. 710652d Inital Commit Direkt SPEED Framework added source folder with original repos by Frank Lemanschik · 9 years ago
  3. 76be378 Create by Dylan Baumann · 10 years ago
  4. 3f3cd1a Initial Put by Dylan Baumann · 10 years ago

ZurbFoundationMasonry / Direkt SPEED Framework Parts

This is based on a super rudimentary example of implementing Zurb's Foundation 4.0.4 (most recent at publish date) with jQuery Masonry that is called ZurbFoundationMasonry on github.

It is now a super Integration of Zurb : master and Masonry : master You can simply checkout both repos from here or the Source Repos into the sources/ folder and then use our css/ds.zurb+masonry.css You can adjust pathes in that css file if you whant a other folder structure then our

|dsframework | |------|Sources | |---foundation | |---masonry | |---jQuery | |---|js | | |---|css | |---ds.zurb+masonry.css | |---|shell | // Initals new WebProject Creates Vagrant, Creates Local Git forks dsframework, Adds Virtual domain name to C:\Windows\system32\drivers /etc/hosts | // Delets unneeded Files out of the Sources for Produktion | // Pushes changes of all Source Repos back to Em to Update em if needed | // Vagrant inital deploy Script for dsframework

Additional Infos from the old Project

Unfortunately since masonry is being used we must ignore the resizing of images for a hard-px based measurement. This is set up similarly where as the container shrinks in size the images will not resize but the columns will rearrange to accomidate, the new container will then center itself accordingly to avoid ugly margin issues on the right side of a column where images are missing. This is the best solution for integrating a masonry into a responsive framework (see pinterest site).

Applying the masonry call onto a 'large-12' container within foundation has the same effect though, it will automatically choose the first image as the base-width of a psuedo column when creating columns to fit inside of the container. More information about specifics can be found on the jQuery masonry website,

I claim no ownership to any of the in folder sources contained files since it is a simple integration of two existing elements, Zurb's Foundation and jQuery Masonry.


I claim ownership on all additional Files in This Project that are not owned by Zurb or Masonry!