Templates

Main Layout

The Main Layout from Tiki 12 onwards is defined in
/templates/layouts/layoutname/layout_view.tpl
Formerly it was defined in /templates/tiki.tpl.
For the floating column design (left (#col2) and right (#col3) module zones), we need still the file /styles/lite/lite.css.

When you look at http://bootstrapped.fabricius.me/HomePage you will see a right column. The right column is actually the standart #col3, which is defined in layout_view.tpl

templates/layouts/classic/layout_view.tpl
or
templates/layouts/bootstrap/layout_view.tpl
or
templates/layouts/whatsoevercustomlayout/layout_view.tpl

To make #col2 and #col3 responsive, meaning giving them defined relative width, you have to change the following in layout_view.tpl by adding a responsive column class (from twitter bootstrap.css) to aswell the #col2 as the #col3:

line 108:

<div id="col2"{if $prefs. ...
to
<div class="col-sm-2 " id="col2"{if $prefs. ...

and

line 116:

<div class="clearfix" id="col3"{if $prefs. ...
to
<div class="col-sm-2 clearfix" id="col3"{if $prefs. ...

The class "col-sm-2" refers literally to a 2 steps of a 12 grid out of the bootstrap.css definitions. It defines the relative width. "sm" stands for "small" and you have classes for "large" ("lg") and more aswell. So pls check the bootstrap.css for the different column classes. The width of the main content (#col1) will be defined as 100% (nothing to change in layout_view.tpl The content columns are made with divs which have column classes which make a sum of 12

Mind, that the actual width of the columns will be defined lateron in the .css files.

example:
{DIV(float=left class=col-sm-3)}{DIV}
{DIV(float=left class=col-sm-3)}{DIV}
{DIV(float=left class="col-sm-6 clearfix")}{DIV}
or
{DIV(float=left class=col-sm-2)}{DIV}
{DIV(float=left class=col-sm-4)}{DIV}
{DIV(float=left class=col-sm-2)}{DIV}
{DIV(float=left class="col-sm-4 clearfix")}{DIV}

This is just a rough example ... we must recheck and a) find out and define best practice of usage b) maybe code a few wikiplugins for the elements and maybe for inline editing Mind: With three columns we could have more than 12 grid - 12 for the content and arbitrary for the left/right columns, dfined in layout_view.tpl

Specific Layout - Elements, Features, Sections

As said above, we will have a good bit of work, to figure out the Id numbers and classes of the Bootstrap css selectors and to replace the original Tiki selectors with the new bootstrap ones. For all existing selectors that will be replaced, we need a table or an array (maybe similar to our language.php), to be able to convert existing old style themes (and mybe making some of them more or less responsive).