Zentools Masonry

Overview

The best way to think of the jQuery Masonry effect is that it's the opposite of css floats. Whereas floating elements with css will organise each block horizontally (see the grid layout), masonry organises each block vertically. The blocks on the page consequently organise themselves based on the next available space below the preceding block, like a jigsaw puzzle or as the name suggests a piece of masonry.

Two main layout options.

There are two main ways that zentools implements the masonry layout.

  • Widths specified by the meta keywords - as shown below. (setup instructions below).
  • Equal number of columns. Example here.

Features

  • Create dynamic and flexible layouts using multiple width items as well as equal width items.
  • Display any number of core elements from your Joomla or K2 content or images retrieved from a folder.
  • Media queries revert all items to a 100% width for smaller screens.

Responding to small screens

If you resize this page you will be able to see that rather than rendering smaller and smaller columns on mobile resolutions we have used some media queries to specify that when the browser reaches the width of 520px, all of the columns collpase into a single column. This is a uniform behaviour for all of the Zentool module layouts.

The item category overlay

The platform template has some specific css added for the zentools module to display the category element as an overlay on top of the image. In order to display the category name in this way you need to ensure that the category element is the second item in the zentools list while the first is the image. If this is not the case then the category layout will display in a normal "flat" method.

Masonry using equal widths

  • images/stories/democontent/food/food.jpg

    Natural Selection

    Donec mollis orci vel turpis tempus aliquam. Suspendisse tincidunt tincidunt ante eget lacinia. In iaculis pulvinar urna, in iaculis lacus blandit in. Vivamus euismod, nisi eget interdum mollis, augue leo vulputate diam, eu vulputate lectus elit et augue. Cras a leo in quam bibendum dapibus tempus euismod est.

  • images/stories/democontent/food/salmon.jpg

    Salmon Revellery

    Donec mollis orci vel turpis tempus aliquam. Suspendisse tincidunt tincidunt ante eget lacinia. In iaculis pulvinar urna, in iaculis lacus blandit in. Vivamus euismod, nisi eget interdum mollis, augue leo vulputate diam, eu vulputate lectus elit et augue. Cras a leo in quam bibendum dapibus tempus euismod est.

  • images/stories/democontent/food/healthy-food.jpg

    Mediterranean Mixes

    This is the start and this is the end. Suspendisse tincidunt tincidunt ante eget lacinia. In iaculis pulvinar urna, in iaculis lacus blandit in. Vivamus euismod, nisi eget interdum mollis, augue leo vulputate diam, eu vulputate lectus elit et augue. Cras a leo in quam bibendum dapibus tempus euismod est.

Crucial Ingredients

 

About Me

My Avatar

Penatibus lundium pid arcu aenean augue auctor ultrices, lectus nunc ac!

In caya unuda atasada ika. Co bona kora pana zin, je ureli unadi pin, te pila gase xen.

Penatibus lundium pid arcu aenean augue auctor ultrices, lectus nunc ac!

Class Timetable

Monday: 10.30am - 5pm
Tuesday: 10.30am - 5pm
Wednesday: 10.30am - 5pm
Thursday: 10.30am - 5pm
Friday: 10.30am - 5pm
Saturday: Closed
Sunday: 2pm - 5pm

Close Panel

Member Login