Experimental project

This is a sandbox project, which contains experimental code for developer use only.

The Columns Layout module allows you to create columnized content in a node's body field or wherever an input format can be applied. It works with plain text fields and works with every WYSIWYG editors, provided you activate the input filter in the text format which is being used (usually "Full HTML" or "Filtered HTML"). The module also strips empty <p> tags for your convenience.

How to Use: You wrap a piece of content in BBCode-like tags, the input filter then creates an evenly distributed set of columns using jQuery Columnizer by Adam Wulf or, if you decide to use "manual" mode, a set of floated divs according to the provided widths in percentages. If CSS3 Multicolumns and Flex-Box will ever see broad browser support, the module's output will be adjusted accordingly. The module also provides options for inserting manual column breaks, either by inserting a tag ("manual break") or defining an HTML element ("auto break").

Examples / Usage

  [columns:auto:3]
  .. content ..
  [/columns]

=> Distributes the content evenly across 3 columns using jQuery Columnizer.

  [columns:manual:25:75]
  .. content in first column ..
  [columns:break]
  .. content in second column..
  [/columns]

=> Creates 2 columns, 25% and 75% width. Column breaks must be inserted manually.

  [columns:auto-break:h2]
  <h2>Heading</h2>
  .. content ..
  <h2>Heading</h2>
  .. content ..
  <h2>Heading</h2>
  .. content ..
  <h2>Heading</h2>
  .. content ..
  [/columns]

=> Splits the content into columns, inserting a manual column break before each <h2> element. Splitting provided by jQuery Columnizer.

Supported modes: auto, auto-break, manual. manual mode also needs manual column breaks, which can be inserted using the tag [columns:break].

Hints

  • Nesting multiple column sets isn't supported. Drupal already generates too much HTML markup by default, don't add to the mess by nesting column sets in the body field.
  • Automatic column break by HTML element currently only works for "auto" mode.
  • All manual column sets need a manual column break ([columns:break]).
  • The module currently doesn't provide any configuration screens or theme functions which could be overridden.

Dependencies

Responsive/Adaptive Themeing

In order to get things started easily and avoid too much pain, there is a media query breakpoint provided with the module's css which looks like this:

@media only screen and (max-width: 780px) {
  .column-layout .column {
    float: none !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

This means, that the columns will stop floating on devices sporting a visible browser window size of less than 780px width. A configuration option to turn this on or off is planned as a future feature. You can then provide your own media queries in the themes CSS files. "!important" is necessary due to the fact that jQuery Columnizer adds its formatting as style attributes on all the elements it injects into the DOM and to avoid adding overhead by adding even more JS for stripping those ... you get the picture. :-)

Project information