History: Planning for Tiki 13
Preview of version: 9
Steps for preparing for Bootstrap compatibility in Tiki 13
(Bootstrap 3.1 will be released under an MIT license so will be compatible with Tiki's 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.
-> Torsten: NOT obsolete IMHO - 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)?
- Torsten => afaik the performance goes down, when using uncompiled LESS files, cause they have to be compiled by the server at every pageload (maybe relieved a bit by caching).
LESS and other pre-compilers are meant to make it easier to develop new themes and to make theme more consistent.
Providing the option to use LESS compiled files directly might be an additional feature, but in my point of view, IF we want that, this should be some of the last steps (kind of a top up, maybe nice to have or show feature "Tiki can even this ...)
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/
- Torsten: => Maybe a good point, but do you really want to force our user (equals customers in some respect) to learn LESS when they want or need to customise a few bits and pieces of their Tiki instance?
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.
- Torsten: => yesterday or so, I remind, that in an IRC chat it was said, that there is a solution?
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). - Torsten: => Since long I wish an option to simply switch icon sets.
apart from that I strongly opt for Font-Awesome, as Font-Awesome is completely free (have to check licence!!! Afaik possible!)
Glyphicons are not cross browser compatible (Chrome problems) and not completely free (free and pro version)
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
Torsten: => Need a Coder/Designer Webinar! - Confirm that templates/layouts is the place for page layout alternatives
Torsten: => Confirmed. Here is the start point <-> layout_view.tpl
templates/layouts/customlayoutname/layout_view.tpl - 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.
Torsten: => module zones and left and right columns have no problems with bootstrap.
Only some change in lite.css is needed: limit effects of lite.cswits for wide viewports with @mediaqueries in lite.css and use relative grid width for the columns
@mediaqueries should have the same measurements as in styles/bootstrap/bootstrap.css (where ever this file will be plased finally). - Simple alternative (one big page-data area, for the most flexible layout- no default content)
Why not just deactivate all module zones to achieve that? - ?? Other layout views, or "panels"
- As a superset of Bootstrap layout, this supports legacy Tiki behavior: module zones and left and right columns, column show-hide, etc.
- 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. - Torsten: => Great idea! +1
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?
Torsten: => menu needs a complete overhaul - need a Coder/Designer webinar - 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?
Torsten: => maybe not needed! Just apply the grid-class to the object (or mostly containing DIV) and Grid is working
I have to document that later, when I am back from travel - 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.
Torsten: => optional resonsive images would be more than awesome, butthat would be kind of a task 😉
- Move remaining tiki-center gadgets, etc. to modules
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)?
+ Torsten: => in my personal point of view we do not need a mobile perspective any more (I never got it really running with perspectives)
+ the existing solution seems to me more like a workaround
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.
- Just install a pre-made bootstrap theme and have it work.
- 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.
Mail to dev-list 22 Oct. 2013
has to be merged into the page structure, when I am back from travelling.
Cheers
Torsten
Hi Gary, Luci and all the Tiki-to-Bootstrap crew,
I think right now it is not yet a point to throw out superfish- why should we?
Independantly of that question we need either a new menu-administration and module_menu or (what I'd prefer) some extension of the existing menu/module_menu for the menu options, bootstrap offers.
The next four days I will be mostly away and have only few time spots to communicate.
So I write all in the mail and copy the mail at the end of
https://themes.tiki.org/Planning+for+Tiki+13 and comment some points
When I am back, I want to merge the mailcontent into the appropriate sections of the page - if somebody wants to do before, feel free. Sorry, I have to leave the house and travel in a few minutes.
There is a lot in bootstrap's HTML, which has not yet a representation in Tiki. I am sure, some additional or refactured Wiki-Plugins will do the job.
In this respect the (hopefully growing) Tiki-to-Bootstrap crew needs to put the heads together with those people who are (or will be) on the Module/WikiPlugin development - especially when the direction is to merge them.
lite.css
Please do not missunderstand me Gary. It is not important, if we keep the file lite.css itself or merge the rules somewhere else. I did throw out some of lite.css already and changed the rest.
The core is following: We still need column definitions - responsible it must be alright, in which file ever they will be written, Ok ... but in the end it must still be defined somewhere.
I do not see a point to delete #col2 and #col3 out of any layout scheme, as they are optionally activated/deactivated anyway.
Luci did make a very good job when he created the file (afaik it was him who invented lite.css !?) and I mainly use his basic idea, whilst the measurements are changed to responsive BS3 grid.
CSS structure
The css-structure in my demo-installation is as following:
/css
(kept untouched)
/styles/bootstrap/boostrap-default-css-subdirectories
(for ex.: /grid, /carousel, /jambotron, etc)
/styles/bootstrap/bootstrap-default-css-files.css
(for ex.: /bootstrap.css, ...)
/styles/bootstrap/lite.css
(reduced to the core variant with mediaquery and grid-based relative width)
/styles/bootstrap/cssmenus.css
(variant with a third responsive type, file maybe just temporary in use -> cssmenu_horiz, cssmenu_vert + cssmenu_responsive)
/styles/bootstrap/bootswatchthemes.css
(each bootswatchtheme is a complete customised and minimised replacemet of the original bootstrap.css.
Every theme from bootswatch.com is shipped as one single minified file named "boostrap.css".
So I renamed each of them after download to themename.css and put here besides the original bootstrap.css
...
Most likely the same with themes from other sources - we will try that anyway - maybe some extra workflow is necessary for bootstrap themes from Wordpress or Drupal? ... we have to check that)
/styles/themename.css
(one for each downloaded bootstrap theme, contain the @include rules for the base-css-files like styles/bootstrap/lite.css styles/bootstrap/themename.css
This file needs only two lines and provides the place to customise the original downloaded bootstrap-variation:
@import url("tikitobs3.css");
@import url("bootstrap/themename.css");
/* +++ from here space to customise themename.css +++ */
)
/styles/tikitobs3.css
(a "translation" file and kind of layer between /styles/themename.css and styles/bootstrap/themename.css
It @includes lite.css and my suggested left hidden admin area for all bootstrap themes.
...
Similar approach than lite.css and design.css from the old layout.
might be merged and/or renamed and/or placed somewhere else.
...
Some bits of design.css went inside this file aswell and here the standard cssmenu is becoming responsive (hence not flipping like the nice bootstrap menu).
...
Not knowing yet, this kind of file might be useful in different variations like wordpress-to-tikibs.css, drupal-to-tikibs.css, etc.?
...
@import url("bootstrap/lite.css");
@import url("leftflip/leftflip.css");
/* +++ from here a number of adjusted necessary oldstyle css rules +++ */
)
The actual theme-option system is still working for bootstrap aswell, but not yet in use and as usal the following would be the place to put theme-specific files like themespecific background images or themespecific preview images and theme options:
/styles/themename
/styles/themename/option
etc.
For comprehensive background images or themespecific preview images or the custom logo I use an additional folder
/styles/grafics
Since Tiki 12, the layout scheme is a preference in tiki-admin.php look and feel.
A custom layout_view.tpl is placed here besides classic:
/templates/layouts/classic
/templates/layouts/bootstrap
/templates/layouts/any-other-layout-basis
...
Each folder placed here will appear in the Look and Feel administration dialogue as optional Layout scheme.
...
In this file (layout_view.tpl) I added a bootstrap grid class to each one of the divs #col2 and #col3.
(only two times a copy/paste)
This pretty much together with the changed lite.css provides us with a responsive column design.
So you see, mainly not too much changed to make it working without losing existing classic functionality.
The css has still some work to be done, but in my point of view we have mainly the following fronts to fight:
Roadmap thoughts (random order)
- Include the bootstrap jQuery and make the advanced elements working
- 'Take' the HTML based features one by one and either merge the new functionalities in existing wiki-plugins or code new wiki-plugins and maybe extend modules (at least necessary for menu!)
- Identify and change css rules in all our templates that can be expressed with existing bootstrap rules
- listing them to be able to maybe convert the most used old-style themes like fivealive and jqui
- Identify css rules that cannot be represented with bootstrap rules (feature specific stuff) and streamline them to the bootstrap way of consistency where it makes any sense
- listing them to be able to maybe convert the most used old-style themes like fivealive and jqui
- Identify why certain bootstrap elements like buttons have strange unintended effects like shrinking size on hover and fix it
- Code/structure an easy to use standard procedure to include external jQuery features
- for ex.: responsive slideshows or flipcards, ...
- try to figure out how to provide existing data to those features
- where to put after download, how to activate
- maybe mainly a more distinct documentation and best practice needed?
I think, that is pretty much enough for today,
cheers
Torsten