2

When I am putting together various HTML elements in my extensions, how should I be planning for the possibility that the end users Users Interface framework could be Bootstrap4 or UIKit or any others that might be available to Joomla instances in the future?

A simple example might be an <input> element on a form where the choices I have seem to be to not include any class attribute, include the all the class names to cover each of the possible UI frameworks and or include some plugin that replaces the class name with the right name for the UI.

For example.

<input type="email"/>

vs

<input type="email" class="form-control uk-input tba-input" />

I have been looking for an answer for awhile now and haven't really found any question or discussion on how to code for multiple UI frameworks.

1
1

I think it is an interesting question and I've got to this point earlier myself during developing an extension. I do not think there is any strict solution on this but there is a workable approach which comes from the structure of Joomla and I only would like to share that approach here.

First of all, you are a very kind person if you want to provide more options on appearance to your future extension's end-users, but honestly you might not be able to satisfy them due to the extreme amount of variations of UI frameworks/template systems they could use on their Joomla sites which you cannot predict fully. But since Joomla uses a great layout/template system thus anybody can create layout overrides to their specific front-end environment and specific needs. So, you of course have to make sure that your extension's layouts are override-able. I think that is the most important part of this question and Joomla can handle that automatically with its template override system. And providing extra UI templates could be a priced addition to your extension, it is also true.

I will not write almost any code here since I know that you know these basic codes in Joomla, I'm just giving the steps of the approach to accomplish your goal:

  1. For providing two options for two different layouts, you first have to add a selection in your extension's configuration file (parameters) where the admin can choose and set for example a `layout-version' from choices: 'bootstrap' (0) or 'UIKit' (1) as layout/UI framework option. And this choice is going to be saved in your component's params of course as 0 or 1 value for example but it could be the string itself too. But let's use now 0 value for bootstrap and 1 value for uikit. The default value could be 0 / bootstrap of the selection field. (As an extra you can also create an option to choose whether they already have uikit loaded on their page or not but I'm not going into this now.)

  2. In your view file (view.html.php) in display($tpl = null) method you will have to re-define the $tpl variable according to the choice from the params of your extension if other than the default was chosen in the configuration of your component. So as an example:

     $layoutV = JComponentHelper::getParams('com_example')->get('layout-version', 0);
    
     if ($layoutV !== 0) {
       $tpl = 'uikit';
     }
    
     return parent::display($tpl);
    
  3. In your view's tmpl folder you have to create two layout files, one is the default.php (with bootstrap) and the other one is the default_uikit.php file (with using UIKIt). and according to the params' setting the view will use the selected layout file automatically. The two layout could be more or less the same, the only different will be the class names of the html elements and that you will place a line on the top of the layout files which line is going to import the appropriate UI framework main files from anywhere you define.

So with this relatively simple approach you can add as many different UI layouts to your component as you would like to.

And simply just to also answer your original question and approach, you do not code for two template framework in one layout file, it could be a mess at the end.

8
  • thank you for taking the time to reply in such detail. I had considered something along those line, i.e. multiple layouts, but could see the downside of having to maintain x number of layouts that are likely 95% the same except for class names. However giving the site admin the choice of which which framework is in play was something I hadn't considered doing, but could be done with single layouts with a plugin using onBeforeRender to insert the appropriate class name for the framework in use. – Irata May 4 at 13:25
  • @Irata - I added a very important last line to my answer because it makes my answer more clear on this. For different front-end frameworks use a separate layout file. That is how you can keep your code clean and clear and understandable, extendable, modifiable, sustainable to others and I think for yourself too. I’ve seen my described approach at few other big extensions too. – Zollie May 4 at 13:31
  • @Irata - I mean you can complicate the solutions, you could even code for changing class names in one layout for 3 other important front-end frameworks and it could still work, but if this is already solved by using the clean Joomla view and layout system, I do not see the real reason for creating and maintaining class name changing additional plugin before rendering pages. I would get a very heavy headache on that. – Zollie May 4 at 16:28
  • 1
    Not that there is any correct answer for this but I want to accept this answer so you get the points for taking the time share your thoughts. At the moment I am leaning toward using a single layout and include the various class names for the likely candidates(Bootstrap and UIikit) and if there is some incompatible design breaking issue then fall back to the multiple layout idea as suggest here. – Irata May 7 at 0:35
  • @Irata - Thank you! I was thinking about this too a little more and since Bootstrap and UIKit, we can say, logically compatible about 70% but there is a big chunk where they are not it could give you a hard time at some part, it depends on how complex the layout is. I also strongly believe that with UIKit you can build better looking UI, at the same time about 80% of future users of yours will use Bootstrap 4 and 5. So it were really just an extra gift/feature from you if you would provide a second version layout this way or that way. – Zollie May 7 at 3:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.