Bootstrap for Tiki 12

The Bootstrap CSS framework was essentially integrated into Tiki in version 13 (with detail work continuing in Tiki 14 and 15). But there are many Tiki 12 sites around since that is the most recent long-term support version. Tiki 12 has had some Bootstrap preparatory work done, some changes in Smarty templates to prepare for the coming Bootstrap CSS, but not much. This page describes one way to implement Bootstrap in Tiki 12 as a theme and get some Bootstrap features and functionality such as grid layout and responsive behavior.

This method uses Less CSS precompiling, similar to how the themes in the Tiki package are done. It's possible to make a Bootstrap-compatible Tiki theme with CSS editing only (no precompiling), but using Less is highly recommended.

The goal

To have a responsive (good appearance and function in all device sizes) modern-looking website created with the familiar vocabulary of Bootstrap. This method of having Bootstrap functionality is implemented on the theme level, so it's portable and doesn't require changes to Tiki core files. However, since many Smarty template files in Tiki 12 aren't updated to be Bootstrap compatible, some page elements, such as forms, won't have Bootstrap layout and styling.

The method

A theme CSS file is created by compiling together some of the Bootstrap component files (for the Bootstrap functionality and appearance), and importing the styles/layout/design.css' file to support Tiki elements not covered by Bootstrap. A variables.less file contains CSS values to be used by the theme. Be sure to replace all instances of "tiki12_bootstrap_theme" with whatever the new theme name is.

And to provide the right HTML for the Bootstrap aspects of the theme, there is a modified Smarty template file: /templates/layout/bootstrap/layout_view.tpl. This is added along with its directory and a layout_edit.tpl file. The layout_view.tpl file is the standard Tiki 12 layout template (for the overall page) but adds the div class="container" elements and so on needed for Bootstrap. Be sure to select the "Bootstrap" layout template on the Look and Feel admin page when using a theme made with this method.

The CSS

My usual method to make a theme is to start with a .less file that imports all of the required component files that are needed to produce the theme style sheet, as shown in the file hierarchy list below. When the files are in place, go through variables-bootstrap.less and edit the variables to suit the theme. This mainly means font size and colors and so on. Many of the variables have no effect because the HTML and CSS selectors they refer to aren't available in Tiki 12 (the Smarty templates that produce Tiki's HTML mostly haven't been updated for Bootstrap in this Tiki version).

Any additional CSS that needs to be written for the theme can be put in tiki-selectors.less. Please have a look at this file in themes of Tiki versions newer than Tiki 12 to get an idea of what often is needed here.

The templates (.tpl files)

There are a couple of theme-specific template files, , and a layout_view file, as shown in the file list, that provide Bootstrap divs and classes, etc.

File locations

For a new theme called tiki12_bootstrap_theme, the files to create the theme look like this:

• tiki root/
  • styles/
    • tiki12_bootstrap_theme/
      • tiki12_bootstrap_theme.less Which imports the other Less files to compile into the style sheet
      • bootstrap_for_tiki12.less A modified copy of the default bootstrap.less file**
      • variables-bootstrap.less Modified copy of the default Bootstrap variables.less file
      • tiki-selectors.less Contains any necessary theme-specific CSS
      • plus any images used by the theme
    • tiki12_bootstrap_theme.css/ The theme style sheet
  • templates/
    • layout/
      • bootstrap/
        • layout_edit.tpl Unmodified
        • layout_view.tpl Modified to include Bootstrap layout grid elements, etc.
    • styles/
      • tiki12_bootstrap_theme/
        • module.tpl Modified to include some Bootstrap divs and classes
        • remarksbox.tpl Modified to include some Bootstrap divs and classes
  • vendor/ (Download the Bootstrap package and add it here.*)
    • twitter/
      • bootstrap/
        • less/
          • *.less, etc.

*bootstrap_for_tiki12.less contains import statements like @import "../../vendor/twitter/bootstrap/less/variables.less"; so the paths to such files need to be correct.
**Not all the Bootstrap component files need to be Less-imported, because in Tiki 12 not all can be used.