History: Planning for Tiki 13

Steps for preparing for Bootstrap compatibility in Tiki 13

[Bootstrap 3 is released under an Apache 2 license so is compatible with Tiki's license (https://tiki.org/License).]

Decisions that need to be made:

CSS - file organization revamp

• Replace lite.css (now obsolete IMO) and design.css and feature-specific files in css/ directory with function-specific files mirroring the bootstrap .less partials.
• Globalize selectors to minimize the use of single-instance rules (design details such as white space and color).
• Question: What is the best-practices final form of the CSS files?

CSS - use Less CSS pre-compiler?

• It seems best to take advantage of the power of CSS pre-compiling if the workflow can be worked out, but (for comparison):
• e107 just uses compiled bootstrap.css
• Joomla apparently has install code to fetch bootstrap.css but doesn't include it.
• Some new CMSs support Less pre-compiling of stylesheets, but none of the major ones seem to.
• Another question: Should theme CSS files override core files, or should themes be made by editing .less files and replacing core files (for example in the same way that the customized (http://getbootstrap.com/customize/) and demo (http://bootswatch.com/) bootstrap themes are done)?

If Less pre-compiling is used...

Less and CSS - determine the best workflow.

Proposed:

• Commit .less files and compiled .css files
• Edit only .less files
• Resist the temptation to make quick edits in .css files. Reference: http://jeffcroft.com/blog/2012/feb/23/many-ways-to-use-css-preprocessors/

RTL language support

• We should figure on supporting RTL from the start; discussion: https://github.com/twbs/bootstrap/issues/9913, theme-based solution: https://github.com/morteza/bootstrap-rtl.

Icon Fonts

• Should icon fonts such as Glyphicons (http://getbootstrap.com/components/) (or similar, such as Fontawesome (http://fortawesome.github.io/Font-Awesome/), which may work better - need to research/decide) be supported by default?
  Or if not by default, maybe it can be a L&F option, or else documentation provided as to what to modify (supporting icon fonts means linking to the files and adding, for example, '<span class="glyphicon glyphicon-star"></span>' or '<i class="icon-li icon-ok"></i>' in the template).

Template (.tpl) files

• Add Bootstrap classes to existing Tiki HTML where they make sense (under way with buttons, etc.).
• Reorganize as part of file tree organization
• Confirm that templates/layouts is the place for page layout alternatives
• Decide on bundled options - classic, responsive, responsive variants a la Drupal panels(https://drupal.org/sandbox/apmsooner/1805170) and a naming convention. Options should include:
  • Classic (current pre-bootstrap layout - will be modified/simplified as gadgets-to-modules progresses)
  • Default (Bootstrap-compatible implementation of classic)
    • As a superset of Bootstrap layout, this supports legacy Tiki behavior: module zones and left and right columns, column show-hide, etc.
    • Simple alternative (one big page-data area, for the most flexible layout- no default content)
    • ?? Other layout views, or "panels"
• Globalize Tiki feature elements
  This may be a good opportunity to "globalize" or "unify" the elements of the various Tiki features; that is, to revamp the layout elements of wiki pages, blog and forum posts, cms articles (at least) so their titles, content body and so on are consistent, with consistent CSS selectors and so on. Any needed style variation can be provided via the body class for the feature. This would greatly simplify theming.

Related tasks

• Revamp Smarty blocks and other code to support Bootstrap construction and classes .
  • Tabs
  • Menus
    How does the menu revamp fit into this transition?
  • Etc.
• Modules
  • Move remaining tiki-center gadgets, etc. to modules
    • Page bar, wiki action icons
    • Column show/hide icons
    • Etc.
  • It should be easy to add the bootstrap grid class to a module. Maybe instead of the actual class names, something more human-readable should be used, such as "1/6 width". Options also include "row", "container", etc. (what else should be used from bootstrap.css? Anything?
  • About responsive behaviors of specific modules, what is the best behavior for a site logo? Probably to be replaced by something smaller, or to shrink, or disappear completely and only the site title be used.

jQuery, JavaScript

• How to resolve redundancy of existing scripts and new Bootstrap JavaScript?
• Is jQuery mobile still needed? Should it be an optional alternative to Bootstrap (which supports mobile devices by default)?

Workflow for theme developers, etc. in and after Tiki 13

• Regarding themes, we need to think about the entry points of designers and implementers. We need to support a range of skill levels and dev time availability regarding themes.
  • Just install a pre-made bootstrap theme and have it work.
    • In this case, we probably need to provide the grid and responsive class rules, as the pre-made bootstrap themes don't necessarily cover these. But pre-made themes are often stand-alone, not needing the default bootstrap.css. This needs to be researched further.
    • Maybe there should be some switches in L&F, to indicate whether the full bootstrap.css is needed (maybe the custom theme replaces it).
    • These methods are for working in CSS, not Less files.
• Make a new theme compatible with bootstrap.
  • One approach: working in CSS only.
  • If appropriate/necessary, we could provide instructions on how to best use the getbootstrap.com theme customizer (http://getbootstrap.com/customize/).
  • Another approach: working with Less.
• Make or upgrade a legacy Tiki theme.
  • Document the mapping of Bootstrap.css to Tiki legacy CSS selectors.