I wanted to address some common issues that I come across using the ZURB Foundation 5 grid with dynamic data and how to solve them. If you enjoy this screencast, don’t forget to subscribe so you will be the first to know when I publish my next video. If you have any ideas for future episodes or just want to reach out, I would love to hear from you in the comments. Hope you like it, and let me know what you think. Video description from YouTube:
In this screencast I talk about how to approach one of the most common situations you face when using ZURB Foundation with Dynamic Data: How to keep the grid looking good and displaying the way you want to. In this video you learn how to write a couple of conditional statements using the modulus operator that will allow you to close rows and fill empty content to get consistent and expected visual design. Although I demonstrate how to do with with JavaScript and jQuery the same principals and operators can be applied to nearly any language.
This video contains Episodes 1 – 6 in one easy to watch format:
- Episode 1: Introduction to the ZURB Foundation Store Template and Explanation of Why Grids Break with Dynamic Data
- Episode 2: Dynamic Data with jQuery and Wrapping Issues
- Episode 3: Closing Your Rows, Dynamically
- Episode 4: 1st Conditional and Modulus, Closing Rows
- Episode 5: Handling the End of the Loop, 2nd Conditional and Loop
- Episode 6: Testing the Result, Where to Get the Code and Wrap Up
If you would like to view the entire project, jump over to the github repo.
Example Code
javascripts/app.js ( view on github ):
$(document).ready( function() {
$(document).foundation();
var products = [{name: "iPad", price: "$499.99", image: "http://lorempixel.com/400/400/technics/1/"},
{name: "Technics Some Really Long Name", price: "$499.99", image: "http://lorempixel.com/400/400/technics/2/"},
{name: "Netbook", price: "$299.99", image: "http://lorempixel.com/400/400/technics/3/"},
{name: "Ear Pods", price: "$29.99", image: "http://lorempixel.com/400/400/technics/5/"},
{name: "Sony Headphones", price: "$49.99", image: "http://lorempixel.com/400/400/technics/6/"},
{name: "Shure Earbuds", price: "$194.99", image: "http://lorempixel.com/400/400/technics/7/"},
{name: "65\" HDTV", price: "$397.99", image: "http://lorempixel.com/400/400/technics/9/"}
];
var output = "<div class=\"row\">";
var numCols = 3;
$.each(products, function(index, product) {
output += "<div class=\"large-4 small-6 columns\"> <img src=\"" + product.image +
"\"> <div class=\"panel\"> <h5>" + product.name +
"</h5> <h6 class=\"subheader\">" + product.price + "</h6> </div> </div> "
// close and open new row when filled
if (index % numCols === numCols - 1) {
output += " </div><div class=\"row\"> "
}
// if this is the last product, add empty divs to fix formatting
if (index == products.length - 1) {
for (var c = 0; c < numCols - 1 - index % numCols; c++) {
output += "<div class=\"large-4 small-6 columns\"></div>"
}
}
});
output += "</div>"
$(".product-listing").html(output);
});Modifications to the index.html, starting at line 107 ( view on github ) :
...
<!-- End Side Bar -->
<!-- Thumbnails -->
<div class="large-8 columns product-listing">
<div class="row product-listing">
<div class="large-4 small-6 columns">
<img src="http://placehold.it/1000x1000&text=Thumbnail">
<div class="panel">
<h5>Item Name</h5>
<h6 class="subheader">$000.00</h6>
</div>
</div>
...Ruby/Slim Templates
If you are looking for a more effecient way to handle this situation with Ruby and Ruby SLIM templates, check out my post called Ruby Slim and Zurb Foundation. It covers ZURB Foundation version 4 but the syntax is identical to ZURB Foundation 5 for this example. So what did you think of this video? Do you use dynamic data or templates in your work with ZURB Foundation? Do you have any ideas for future screencasts? If so, I would love to hear from you in the comments.
