Introduction

Twitter Bootstrap (TB) provides a simple grid system that could help web developers to layout their sites for desktop viewing and to adjust the layout automatically for smaller screens. Twitter’s grid system offers a 12-column grid out of the box. The developer simply chooses the number of columns to occupy for each major content area, and may also skip columns for extra space without inserting space-inducing elements. Although simple, this grid system can be utilized to create many elegant web site layouts. Inspired by TB’s design, ZK’s Rowlayout component was born. Unlike the TB’s grid system, Rowlayout component allows the customization of the grid specification either declaratively or programmatically.

The following diagram illustrates the rowlayout/rowchildren components and their various configurable parameters.

Rowlayout/rowchildren
Live Demo
Please right click on the flash video and select “Show all” before playing to watch the video unclipped.

  1. Using rowlayout component:

  2. Using rowchildren component:

Implementation
Using rowlayout component is simple. First, use rowlayout to divide the horizontal space of its parent container into a number of columns. Web developers may also optionally specify the column/spacing ratio. The default number of columns is 12, and the default column/spacing ratio is 1/3, which means column is 3 times wider than the spacing between columns. Spacing could be given as a ratio, a percentage or a floating-point number.

Next, use rowchildren component to place components into an integral number of these columns. Web developers may also optionally specify how many columns to skip ahead.

A sample usage is demonstrated below.

<rowlayout ncols="12" spacing="1/3">
  <rowchildren colspan="3" offset="2">
  </rowchildren>
</rowlayout>

Download

You can download the component source code and sample application from the ZKRowlayout github project. We welcome any feedback.

If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

Leave a Reply