This tutorial will walk you through how to extend the normal What You See Is What You Get(WYSIWYG) region layout using YUI3 CSS grids.  

For more detailed information from Yahoo about the YUI3 CSS Grids framework consult their documentation page  or see one of these regular example page 

or Responsive example page.

You will need to be familiar with HTML editing to take full advantage of these advanced grid layouts.  On the WYSIWYG toolbar you will click the HTML button to directly edit the HTML source of the region/block.  

To open a grid region you enter in this HTML declaration:

<div class="yui3-g">
Creates a grid region the section code below goes inside here.
</div>

then to setup grids within here you use a numerator denominator fraction style division to create a 1/2 1/2 split or other splits as follows:

    <div class="yui3-u-1-2">
        <p>First half of region</p> </div>
    <div class="yui3-u-1-2">
        <p>this takes up second half of the region</p>
    </div>

This will create a region that splits your region into two 50%/50% sub-regions.

This will look like this on your page:

First half of region

this takes up second half of the region

Audience: Advanced Publishers.  You should be comfortable using HTML and directly entering content in using the HTML button on the WYSIWYG.

Back to Top