Loading...
 

History: Planning for Tiki 13

Preview of version: 16

Steps for preparing for Bootstrap compatibility in Tiki 13


List of Bootstrap Team members:
(You will only appear in this list after joining the group on
tiki.org - List of members of all Teams and then relogin here.


(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
    • Well, I meant in the sense that if the Bootstrap grid is used to lay out all the Tiki content, lite.css isn't needed. Not to say it doesn't have any, but what advantage does lite.css offer over using only the Bootstrap grid (just to be sure about this and so I'm being a Devil's advocate, to prevent unneeded duplication)? Also, for people with Bootstrap experience, maybe it's good to offer a path that's "pure" Bootstrap. But of course lite.css can still be available. That's why I mentioned maybe having options in L&F. Anyway, I want to make a schematic of CSS "stack" options.
  • 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 ...)
    • No, the best-practice method is for the dev to compile the Less files into CSS before they and the output CSS files are committed to SVN. There's no performance hit at all; the files for distribution are just produced differently. Whether to switch to Less earlier or later kind of depends on how the current CSS is reorganized, IMO.

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?
    • Users won't need to learn Less. Less would be used by the dev team to generate the packaged CSS files; theme authors could use Less if they wanted to, but wouldn't need to. Site admins/Tiki users could still edit CSS as usual, overriding the default Tiki files as they do now. (Example: Bootstrap.css itself is generated with Less, but users override the file rules if they like, with CSS editing.

RTL language support

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.css wits for wide viewports with @mediaqueries in lite.css and use relative grid width for the columns
        + This can also be done with Bootstrap's container elements (that is, making a "fixed-width" content area in a wide viewport - or am I misunderstanding this point?
        @mediaqueries should have the same measurements as in styles/bootstrap/bootstrap.css (where ever this file will be placed 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?
        Sure, that may be better, but I'm thinking of cases where maybe you want module zones on some pages but not all, etc.
      • ?? 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.
  • Torsten: => Great idea! +1

  • 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
      I'm looking forward to your documentation because I don't know how a grid column (box, etc.) can be set to be, for example, 1/6 of the container width without being assigned the class - are we talking about the same thing?
    • 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 responsive images would be more than awesome, but that would be kind of a task ;-)
      Images can scale in CSS3 so are already responsive in that sense; Bootstrap also has rules for object display/no-display according to media query - though this doesn't stop the image download, which is a drag, but as Marc indicated, there is server-side control of resources depending on display device, maybe for Tiki 14.

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.
  • 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


History

Advanced
Information Version
Tue 12 of Nov, 2013 08:20 GMT-0000 Gary Cunningham-Lee 43
View
Tue 12 of Nov, 2013 08:18 GMT-0000 Gary Cunningham-Lee Formatting. 42
View
Tue 12 of Nov, 2013 08:14 GMT-0000 Gary Cunningham-Lee Added to table comment. 41
View
Tue 12 of Nov, 2013 07:13 GMT-0000 Gary Cunningham-Lee Note about table overlapping added. 40
View
Tue 05 of Nov, 2013 01:59 GMT-0000 Torsten Fabricius added direct link to Bootstrap Team 39
View
Tue 05 of Nov, 2013 01:56 GMT-0000 Torsten Fabricius named links clearer (Compare Responsive Solutions) 38
View
Tue 05 of Nov, 2013 01:49 GMT-0000 Torsten Fabricius Added a coparative link from Marc and reorganised a fraction of the page 37
View
Fri 01 of Nov, 2013 09:16 GMT-0000 Marc Laporte 36
View
Fri 01 of Nov, 2013 08:48 GMT-0000 Marc Laporte 35
View
Fri 01 of Nov, 2013 08:44 GMT-0000 Marc Laporte Touch & Gestures 34
View
Thu 31 of Oct, 2013 09:17 GMT-0000 luciash d' being ?‍♂️ 33
View
Thu 31 of Oct, 2013 08:24 GMT-0000 gezza BS v301 update 32
View
Wed 30 of Oct, 2013 08:56 GMT-0000 gezza thougths on jquery-ui and external sources (vendor directory stuff) 31
View
Tue 29 of Oct, 2013 15:09 GMT-0000 gezza 30
View
Tue 29 of Oct, 2013 12:08 GMT-0000 Gary Cunningham-Lee More comments. 29
View
Tue 29 of Oct, 2013 12:08 GMT-0000 Gary Cunningham-Lee More comments. 28
View
Tue 29 of Oct, 2013 10:28 GMT-0000 Torsten Fabricius typo 27
View
Tue 29 of Oct, 2013 10:27 GMT-0000 Torsten Fabricius agreement to gezzas icon-set-structure idea (UI+layer) 26
View
Tue 29 of Oct, 2013 10:22 GMT-0000 Torsten Fabricius comkmented on Gary's comment - lite.css 25
View
Tue 29 of Oct, 2013 09:29 GMT-0000 gezza 24
View
Mon 28 of Oct, 2013 22:11 GMT-0000 gezza added some thoughts 23
View
Mon 28 of Oct, 2013 05:32 GMT-0000 Gary Cunningham-Lee Added some jquery mobile vs bootstrap links. 22
View
Fri 25 of Oct, 2013 15:51 GMT-0000 Torsten Fabricius grrr typo ... now? sorry for this many status mails! 21
View
Fri 25 of Oct, 2013 15:50 GMT-0000 Torsten Fabricius 20
View
Fri 25 of Oct, 2013 15:44 GMT-0000 Torsten Fabricius memberlist not working with Intertiki? Taken out! 19
View
Fri 25 of Oct, 2013 15:35 GMT-0000 Torsten Fabricius me: dumb :-o 18
View
Fri 25 of Oct, 2013 15:33 GMT-0000 Torsten Fabricius 17
View
Fri 25 of Oct, 2013 15:32 GMT-0000 Torsten Fabricius sorry, the different types of spelling parameters sucks 16
View
Fri 25 of Oct, 2013 15:29 GMT-0000 Torsten Fabricius fix another typo 15
View
Fri 25 of Oct, 2013 15:28 GMT-0000 Torsten Fabricius fix typo 14
View
Fri 25 of Oct, 2013 15:28 GMT-0000 Torsten Fabricius added {maketoc} and {memberlist} 13
View
Fri 25 of Oct, 2013 06:37 GMT-0000 Gary Cunningham-Lee Fixed a few format edits. 12
View
Fri 25 of Oct, 2013 06:31 GMT-0000 Gary Cunningham-Lee Minor edits. 11
View
Fri 25 of Oct, 2013 06:13 GMT-0000 Gary Cunningham-Lee Added some comments. 10
View
Wed 23 of Oct, 2013 13:36 GMT-0000 Marc Laporte 9
View
Wed 23 of Oct, 2013 13:23 GMT-0000 Marc Laporte 8
View
Tue 22 of Oct, 2013 11:07 GMT-0000 Torsten Fabricius Added my todays mail at bottom (not yet merged in) and commented to most of the points 7
View
Thu 17 of Oct, 2013 14:06 GMT-0000 Gary Cunningham-Lee Corrected syntax typo. 6
View
Thu 17 of Oct, 2013 14:04 GMT-0000 Gary Cunningham-Lee Changed the license point wording to keep the empahsis positive. 5
View
Thu 17 of Oct, 2013 09:14 GMT-0000 luciash d' being ?‍♂️ 4
View
Thu 17 of Oct, 2013 08:43 GMT-0000 Gary Cunningham-Lee RTL and license-related links added. 3
View
Thu 17 of Oct, 2013 06:05 GMT-0000 Gary Cunningham-Lee RTL and icon font points added. 2
View
Wed 16 of Oct, 2013 10:37 GMT-0000 Gary Cunningham-Lee Page created. 1
View

Layout

Subscribe to Tiki Newsletters!

Delivered fresh to your email inbox!
Newsletter subscribe icon
Don't miss major announcements and other big news!
Contribute to Tiki

Site Config