History: Making columns for wiki content

View page

Source of version: 30 (current)

{maketoc}
!Bootstrap grid in Tiki13
From Tiki 13 we use the responsive Bootstrap CSS Framework to determine the layout of Tiki.

The floated box method previously described here has been made obsolete by the switch to Bootstrap CSS grid compatibility. How to have columns in wiki content using the new Bootstrap method is described below. To see the previous Tiki floating box method, check the page history for earlier versions of the page content.

The method described here uses the Bootstrap layout method without any "shortcuts". It may not be possible - or practical - to duplicate the compactness of the old floating box syntax, but that hasn't really been experimented with yet. 

As in Bootstrap the full width of a div is a part of 12 gutters, a number of 1 to 12 elements can be put besides each other, each in a div, using the column classes of Bootstrap. The column classes determine the relative with of the elements and the "breakpoints" based on device width (@media queries), when the elements get vertically stacked (mobile device, tablet, smartphone or shrinking the browser width). 

__Some examples:__

Please mind, that adding the width parts of the class name (the number) must give 12 when added (6+6 or 4+4+4 or 2+2+2+6 or 3+4+3+2 etc.)

The ~np~{DIV(class=row)}~/np~ wraps together the 12-gutter side by side elements and "clearfixes" the content to the following part of the page (or custom module or template, if used with html -> div class="row").

"content" refers to arbitrary elements like text, modules, wikiplugins ... 

3 Elements equal width (three times -4), 'side by side' - switching to 'vertically stacked' at lower than medium (-md-) with:
{CODE()}
{DIV(class=row)}
{DIV(class=col-md-4)}content{DIV}
{DIV(class=col-md-4)}content{DIV}
{DIV(class=col-md-4)}content{DIV}
{DIV}
{CODE}

2 Elements equal width (twice -6), 'side by side' - switching to 'vertically stacked' at lower than large (-lg-) with:
{CODE()}
{DIV(class=row)}
{DIV(class=col-lg-6)}content{DIV}
{DIV(class=col-lg-6)}content{DIV}
{DIV}
{CODE}

4 Elements different width, 'side by side' - switching to 'vertically stacked' at lower than small (-sm-) with:
{CODE()}
{DIV(class=row)}
{DIV(class=col-sm-3)}content{DIV}
{DIV(class=col-sm-3)}content{DIV}
{DIV(class=col-sm-2)}content{DIV}
{DIV(class=col-sm-4)}content{DIV}
{DIV}
{CODE}

! Examples
!! Two columns
{DIV(class="row")}{DIV(class="col-md-6")}{MODULE(module=random_pages)/}{DIV}{DIV(class="col-md-6")}{MODULE(module=random_pages)/}{DIV}{DIV}

is produced by:

{CODE(wrap="1")}{DIV(class="row")}{DIV(class="col-md-6")}{MODULE(module=random_pages)/}{DIV}{DIV(class="col-md-6")}{MODULE(module=random_pages)/}{DIV}{DIV}{CODE}

!! Three columns
{DIV(class="row")}{DIV(class="col-md-4")}{MODULE(module=random_pages)/}{DIV}{DIV(class="col-md-4")}{MODULE(module=random_pages)/}{DIV}{DIV(class="col-md-4")}{MODULE(module=random_pages)/}{DIV}{DIV}

produced by

{CODE(wrap="1")}{DIV(class="row")}{DIV(class="col-md-4")}{MODULE(module=random_pages)/}{DIV}{DIV(class="col-md-4")}{MODULE(module=random_pages)/}{DIV}{DIV(class="col-md-4")}{MODULE(module=random_pages)/}{DIV}{DIV}{CODE}

and
!! Four columns
{DIV(class="row")}{DIV(class="col-md-3")}{MODULE(module=random_pages)/}{DIV}{DIV(class="col-md-3")}{MODULE(module=random_pages)/}{DIV}{DIV(class="col-md-3")}{MODULE(module=random_pages)/}{DIV}{DIV(class="col-md-3")}{MODULE(module=random_pages)/}{DIV}{DIV}

produced by 

{CODE(wrap="1")}{DIV(class="row")}{DIV(class="col-md-3")}{MODULE(module=random_pages)/}{DIV}{DIV(class="col-md-3")}{MODULE(module=random_pages)/}{DIV}{DIV(class="col-md-3")}{MODULE(module=random_pages)/}{DIV}{DIV(class="col-md-3")}{MODULE(module=random_pages)/}{DIV}{DIV}{CODE}

Boxes can have any content, not just a module, like this :

{DIV(class="row")}{DIV(class="col-md-6")}{DIV(class="panel panel-default panel-body")}Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak met letters nam en ze door elkaar husselde om een font-catalogus te maken. Het heeft niet alleen vijf eeuwen overleefd maar is ook, vrijwel onveranderd, overgenomen in elektronische letterzetting. Het is in de jaren '60 populair geworden met de introductie van Letraset vellen met Lorem Ipsum passages en meer recentelijk door desktop publishing software zoals Aldus PageMaker die versies van Lorem Ipsum bevatten.{DIV}{DIV}{DIV(class="col-md-6")}{DIV(class="panel panel-default panel-body")}Lorem Ipsum Ã© um texto modelo da indÃºstria tipogrÃ¡fica e de impressÃ£o. O Lorem Ipsum tem vindo a ser o texto padrÃ£o usado por estas indÃºstrias desde o ano de 1500, quando uma misturou os caracteres de um texto para criar um espÃ©cime de livro. Este texto nÃ£o sÃ³ sobreviveu 5 sÃ©culos, mas tambÃ©m o salto para a tipografia electrÃ³nica, mantendo-se essencialmente inalterada. Foi popularizada nos anos 60 com a disponibilizaÃ§Ã£o das folhas de Letraset, que continham passagens com Lorem Ipsum, e mais recentemente com os programas de publicaÃ§Ã£o como o Aldus PageMaker que incluem versÃµes do Lorem Ipsum.{DIV}{DIV}{DIV}

produced by: 

{CODE(wrap="1")}{DIV(class="row")}{DIV(class="col-md-6")}{DIV(class="panel panel-default panel-body")}Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak met letters nam en ze door elkaar husselde om een font-catalogus te maken. Het heeft niet alleen vijf eeuwen overleefd maar is ook, vrijwel onveranderd, overgenomen in elektronische letterzetting. Het is in de jaren '60 populair geworden met de introductie van Letraset vellen met Lorem Ipsum passages en meer recentelijk door desktop publishing software zoals Aldus PageMaker die versies van Lorem Ipsum bevatten.{DIV}{DIV}{DIV(class="col-md-6")}{DIV(class="panel panel-default panel-body")}Lorem Ipsum Ã© um texto modelo da indÃºstria tipogrÃ¡fica e de impressÃ£o. O Lorem Ipsum tem vindo a ser o texto padrÃ£o usado por estas indÃºstrias desde o ano de 1500, quando uma misturou os caracteres de um texto para criar um espÃ©cime de livro. Este texto nÃ£o sÃ³ sobreviveu 5 sÃ©culos, mas tambÃ©m o salto para a tipografia electrÃ³nica, mantendo-se essencialmente inalterada. Foi popularizada nos anos 60 com a disponibilizaÃ§Ã£o das folhas de Letraset, que continham passagens com Lorem Ipsum, e mais recentemente com os programas de publicaÃ§Ã£o como o Aldus PageMaker que incluem versÃµes do Lorem Ipsum.{DIV}{DIV}{DIV}{CODE}

!! Mix of modules and other divs
{DIV(class="row")}{DIV(class="col-md-6")}
!! Lorem Ipsum
Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak met letters nam en ze door elkaar husselde om een font-catalogus te maken.{DIV}{DIV(class="col-md-6")}
{MODULE(module=random_pages)/}{DIV}{DIV}

produced by

{CODE(wrap="1")}{DIV(class="row")}{DIV(class="col-md-6")}
!! Lorem Ipsum
Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak met letters nam en ze door elkaar husselde om een font-catalogus te maken.{DIV}{DIV(class="col-md-6")}
{MODULE(module=random_pages)/}{DIV}{DIV}{CODE}

! Tiki 12
The Bootstrap grid layout can work as well in Tiki 12 if the grid CSS rules are gotten from bootstrap.css (available at [http://getbootstrap.com]) and put in a theme stylesheet or separate CSS file that's imported by the theme stylesheet. There's no need to use other files such as Javascript files simply to have the grid layout. 

In Tiki 12, you may also be able to use a Tiki 13 version of templates/layouts/.../layout_view.tpl, to have the grid rules applied to the module zones and left, right and main columns of the page.

Switch Theme

Layout

Latest Changes

No records to display ...more

Subscribe to Tiki Newsletters!

Delivered fresh to your email inbox!

Don't miss major announcements and other big news!

Site Config

Site upgraded to Tiki 23.x
Sat 24 of Jul, 2021 00:30 GMT
Site upgraded to Tiki 20
Wed 29 of May, 2019 07:57 GMT
We are now on Tiki 19.x
Fri 05 of Oct, 2018 10:02 GMT
Shoutbox module removed
Thu 28 of Jun, 2018 07:01 GMT
We are now on Tiki 18.x
Wed 02 of May, 2018 08:46 GMT
Upgraded to Tiki 17.0
Wed 02 of Aug, 2017 08:19 GMT
Upgraded to Tiki 15.0alpha
Tue 08 of Mar, 2016 13:34 GMT
Site updated to Tiki 14 beta
Tue 21 of Apr, 2015 00:01 GMT
Testing Tiki10
Thu 15 of Nov, 2012 23:06 GMT
Configurable header buttons in XtratoVeil layout
Wed 17 of Oct, 2012 14:54 GMT

History: Making columns for wiki content

Source of version: 30 (current)

Switch Theme

Layout

Latest Changes

Subscribe to Tiki Newsletters!

Site Config

About Tiki

Support

Community

Documentation

Development

Legal

Tiki Project Sites

Networks

Themes - Tiki Wiki CMS Groupware