Developer manual

Spring Layout Grid

Requirements: Spring Developer Access, Custom layout.xml

The layout.xml file allows you to alter the layout grid for a page using a simple xml format.

<?xml version="1.0"?>
<layout>
<row>
<column>1</column>
<column>2</column>
<column>3</column>
</row>
<row>
<column>4</column>
<column>5</column>
<column>6</column>
</row>
<row>
<column>7</column>
<column>8</column>
<column>9</column>
</row>
</layout>

Produces a layout of:

123
456
789

Each column in each row is shown or hidden dependent on whether content is available for that column. If none of the columns in a row have content, the entire row is hidden.

Spring will calculate class names for the rows and columns when the layout is rendered.

Static class names

Spring will include in the output the following standard class names:

<div class="row row1">
<div class="column column1">1</div>
<div class="column column2">2</div>
<div class="column column3">3</div>
</div>
<div class="row row2">
<div class="column column1">4</div>
<div class="column column2">5</div>
<div class="column column3">6</div>
</div>
<div class="row row3">
<div class="column column1">7</div>
<div class="column column2">8</div>
<div class="column column3">9</div>
</div>

Dynamic class names

Spring will also include dynamic class names on each row or div to reflect the content.

For rows, spring will add "layout1, layout2, etc..."

<div class="row row1 layout7">
...
</div>

Layout 'next'

For sites using the latest layout version, Spring supports an unlimited number of rows and columns.

To trigger the latest layout grid scripts simply add the following into settings.xml:

<library>
<javascript>jquery</javascript>
<layout>next</layout>
</library>

For practical reasons (due to the size) only options for up to 4 columns is shown below, but Spring supports additional columns.

The class naming rules are:

  • Every row gets the class .row
  • Every row gets the class .row1, .row2, etc... based on it's order when being processed.
  • Every row gets the class shown in the 'Row Class' column below based on the content of that row
  • Every column gets the class .column
  • Every column gets the class .column1, .column2, etc... based on it's order when being processed.

Additional class naming is calculated according to the following chart:

Column 1

Column 2

Column 3

Column 4

Row Class

.layout15

.layout14

.layout13

.layout12

.layout11

.layout10

.layout9

.layout8

.layout7

.layout6

.layout5

.layout4

.layout3

.layout2

.layout1

Nested layouts

Layout 'next' supports nesting layout grids.

For example the following xml in layout.xml:

<layout>
<row>
<column>
<row>
<column>A</column>
<column>B</column>
<column>C</column>
</row>
<row>
<column>D</column>
<column>E</column>
<column>F</column>
</row>
</column>
<column>D</column>
</row>
</layout>

Outputs the following layout:

A

B

C

D

E

F

D

Legacy layouts

For older sites not using the layout 'next' option above, Spring supports an unlimited number of rows, up to 3 columns, and retains old deprecated class names.

The class naming rules are:

  • Every row gets the class .row
  • Every row gets the class .row1, .row2, etc... based on it's order when being processed.
  • Every row gets the class shown in the 'Row Class' column below based on the content of that row
  • Every column gets the class .column
  • Every column gets the class .column1, .column2, etc... based on it's order when being processed.
  • Every column gets the class shown in the table below

Note: .layout1, .layout3, .layout4 and .layout6 are different to sites using later layout versions due to an error calculating the names. .layout1 and .layout4 need to be transposed, and .layout3 and .layout4 need to transposed.

Additional class naming is calculated according to the following chart:

Column 1
Class

Column 2
Class

Column 3
Class

Row
Class

.column1.one

.column2.one

.column3.one

.layout7

.column1.one

.column2.two

.layout6

.column1.two

.column3.one

.layout5

.column1.three

.layout4

.column2.two

.column3.one

.layout3

.column2.three

.layout2

.column3.three

.layout1