Breaking away from Bootstrap 2.3.2

[CDNKnights]

Bootstrap 2.3.2 is old...very old... They're getting ready to release version 4 and Joomla has fallen behind.

I know there have been other threads asking when BS3 (or soon BS4) will be implemented and at one time there was mention of moving BS to a compatibility layer in (I believe) the 3.7 release, however as of now (https://developer.joomla.org/cms/roadmap.html) this seems to have been taken off the table.

The date for the 3.7 release has also been drastically moved back (now 3rd quarter 2016) which is understandable given how far behind the releases are compared to that old roadmap. I would provide a link to it but I can't find it anymore

I'm finding that I'm getting to a point now where it's getting harder to start new sites using Joomla because of the dependence on the very outdated Bootstrap. Sure you can make a custom template and not load the core files - then load in your own fresh BS3 files and run a bunch of overrides in your template to make use of the new grid and other toys. The problem with this is that there is still quite a bit of core code producing markup for BS2.3.2.

It'll be nice to remove unnecessary sample data - but I find that FAR less of an issue than working around BS2.3.2.

Anyway, the point here isn't to bash the PLT or rant on about shortcomings.

I basically have 2 questions.

1st - Am I a minority here? I'm looking at a couple of new projects my company is starting in the new year and thinking I may have to jump ship on them in favor of Wordpress or another CMS that doesn't rely on an outdated CSS framework so we can achieve solid mobile first functionality that really is important in modern websites. I'd love for some other developers to weigh in here - are you guys and gals finding this more and more as something you're needing to work around - and if so, what are some solutions (generalities, I'm not looking for big tutorials ).

2nd - I'd have no problem putting in hours and pulling my weight to make this compatibility layer happen sooner than later - I'm just not too sure on the best way to make that happen. I've developed components / plugins / modules before but I've never tried contributing to the core. For those of you that have done so, some guidance would be appreciated!

While I really like what I'm seeing in terms of "things to come", I feel that the ability to select (any) other css/js frameworks is critical and is making Joomla a significantly less competitive platform to use.

In closing - I don't want this to become any sort of "the new road map is terrible" type thread as I've seen a few of those.

I look forward to hearing your thoughts!

[leolam]

Bootstrap 2 and Bootstrap 3 are not compatible. See more on the CMS-list Also see http://www.readybytes.net/blog/item/upg ... o-v3x.html

I think this post should be located in the Ideas and Suggestion forums

Leo

[DickTracy]

I dont think much of the core of joomla uses boostrap, it is rather the templates and 3rd party extensions that use it.
There are templates that don't use booststrap 2 eg joostrap uses bootstrap 3, others are also available.

It is also possible to use for example yootheme templates which dont use bootstrap, they use uikit.

Personally I use yootheme templates and also include bootstrap 3, mostly because I use the bootstrap 3 grid system (the main advantage compared with bootstrap 2 IMO) but it does mean I am loading uikit as well as bootstrap 3.

[CDNKnights]

Bootstrap 2 and Bootstrap 3 are not compatible.

Absolutely correct, which is why I thought the compatibility layer suggested in a previous road map would be a far better approach than simply changing over to BS3. It would give people the ability to choose BS3 or other frameworks or to stick with BS2 if they had a template of extensions that depend on it.

See more on the CMS-list Also see http://www.readybytes.net/blog/item/upg ... o-v3x.html

The readybytes.net post is just talking about using overrides as I mentioned above which only gets you so far, and isn't a solution...just a workaround.

I think this post should be located in the Ideas and Suggestion forums

I was originally going to put this in Ideas and Suggestions - but as it was already a road map for 3.7 it isn't really my idea or suggestion and does relate to the 3.x release which is why I ultimately decided to put it here.

I dont think much of the core of joomla uses boostrap, it is rather the templates and 3rd party extensions that use it.

There isn't too much in the core, but there are definitely some critical elements that produce BS2 markup. Forums for example, as well as the use of the sprite based glyphicons rather than font based.

There are templates that don't use booststrap 2 eg joostrap uses bootstrap 3, others are also available.

Absolutely, there are some good ones out there for people to use. But having a handful of good templates to choose from is not a practical solution for developers.

It is also possible to use for example yootheme templates which dont use bootstrap, they use uikit.

Personally I use yootheme templates and also include bootstrap 3, mostly because I use the bootstrap 3 grid system (the main advantage compared with bootstrap 2 IMO) but it does mean I am loading uikit as well as bootstrap 3.

I haven't played with uikit, but I have taken a look at others (the T3 system as one example). I'll have a look at uikit today, but I expect it will be another example of using overrides as a workaround. There needs to be a better way than developing entire systems to produce proper output or working within the confines of a handful of templates.

I develop my own templates and having to load multiple frameworks isn't a solution either as it creates unnecessarily long load times. If we were to use an extreme example you could have someone loading the BS2.3.2 (104kb - minified), BS3.3.6 (120kb - minified) and font-awesome (27kb - minified) which gives us 251kb in css alone. Of course there are things you can do to reduce this...custom BS3 that only has the grid, and strip down the BS2.3.2 in the core to remove the outdated glyphicons...but again, these are workarounds and are not actually fixing the issue.

I appreciate the input guys, keep it coming

[xfsgpr]

Absolutely correct, which is why I thought the compatibility layer suggested in a previous road map would be a far better approach than simply changing over to BS3. It would give people the ability to choose BS3 or other frameworks or to stick with BS2 if they had a template of extensions that depend on it.

This shouldn't be a problem because all we need is a new template (say protostar3) and include it in J 3.5.X with the existing protostar template. The default should be the new template but people can change it to the old style.

Does this sound too simplistic?

Of course new plugins will also be needed to go with this.

[CDNKnights]

The back end template is only 1 piece of this puzzle. As I see it, to keep backwards compatibility, we would need:

Backend

• Isis
  Hathor
  "Anuket" or "Nut" (Just figured I'd keep the Egyptian goddess theme going haha) that would be a Bootstrap 3 or 4 template.

Front End

• beez3
  protostar
  "protostar2" as you suggested or something new entirely that would be a Bootstrap 3 or 4 template

Code

• Keep existing core output to allow for Bootstrap 2.3.2 output where required
  Create a Bootstrap 3 or 4 version
  Create a means to allow the user to override these in their template (so they don't actually have to use ANY version of Bootstrap if they don't want to)

The core is where it gets a bit more complicated. For example, in the article view of com_content JLayoutHelper is used to render icons (Edit/Print/Email). These icons are the old Bootstrap 2.3.2 glyphicons-halflings.png sprite and do not make use of the new font files.

We would need basically 2 built in core versions (only for files that produce output for css frameworks) that could be toggled between a decided framework - BS 2.3.2 and for this example I'll say BS 4. Both of these code outputs would also need check the template file for an override in say /template/html/jcore/ and use those if they exist just as the rest of the HTML overrides do.

We would also need to provide both BS 2.3.2 and BS 4 libraries in /media/jui and I would say a bit of directory reorganization would be required there. /media/jui/css would have /bs2/ and /bs4/ and /custom/. /bs2/ would contain the bootstrap files we currently run, /bs4/ would be for the new files and /custom/ would be where users could put any number of css frameworks. You could in theory have something like:

• /custom
  • /gumby
    /clank
    /blueprint

[/list][/list]

I'm not too sure how many people would need (or want) to have multiple frameworks, but the idea is that they could have whatever they wanted.

We would have to give them the means to specifying which directory in /custom/ they want Joomla to read from.

Ideally, the front end and back end would operate independently in that I could be running Protostar with J2.3.2 in the backend, but then say "GumbyTemplate" on the front end using gumby.

Anyway, this is just how I'm picturing it, allowing for users to run pretty much whatever they want. This would give the most basic user the ability to do a Joomla install of 3.5.x, download extensions, plugins, templates, etc from the JED and be able to run them, but would also give more experienced users the ability to develop templates / extensions for BS4 or any other framework they like.

As we move forward into v4/4.5 and beyond the old BS2.3.2 could be removed and this "compatibility" design would put the framework in a position where it would NEVER be hindered by reliance on outdated CSS/JS frameworks, which I feel would make Joomla far more competitive than it currently is.

I'm sure I've missed some details on features that would be required to make this run smoothly, but I hope this sounds like a good place to start! As I said above, I'd be quite happy to put time in here to see this happen.

[xfsgpr]

I was wondering if you use (at) import for importing latest Bootstrap CSS file in protostar, would this allow us to use BS3.3.6 in J3.4.8?



I have created custom css file and linked it to protostar's index.php so I could add above code at the top of my custom.css file.

I know some classes are not the same in protostar but this way allows us to identify which tags requires modifications.

[deleted user]

It's not as simple as dropping in a Bootstrap 3 based template. There are helper methods in JHtmlBootstrap which would need updates or overrides to have Bootstrap 3 compatibility, and JFormField objects do not have a way to override their markup to create Bootstrap 3 compatible form fields. Long and short, there is no clean way with the core CMS to eloquently upgrade Bootstrap otherwise someone would have come up with the upgrade method and implemented it by now.

[jonBuckner1]

Hi

Hi, I'm curious:

So what was the plan for upgrades when BS2 was implemented?

It seems like a leaf out of George Bush and Tony Blair's book: do it now, worry about consequences later....

I doubt there will be much desire to change to BS4 as it is a shift from less to sass. That means an upgrade to BS3 which will probably be the old boy on the block (though still super cool) by the time it is implemented in core. So if it means a user has to learn new stuff ie BS2 vs BS3 then it maybe seems like a good chance to implement a new concept entirely.

Really, BS2,3,or 4 should be exclusively back end. Having to fight BS2 so that it is not applied in front-end is surely a bad situation... are there any template providers that still use BS2?

Front end should be dynamic in content and style.

Ultimately, it was unlucky that Joomla trailblazed and added the framework when it did. Others have copied and added BS3 and are probably not having these kind of conversations.

Jon
PS I'm a keen Joomla dude, non-expert, avid Seblod user, keen for Joomla to be the ultimate solution

[xfsgpr]

Really, BS2,3,or 4 should be exclusively back end. Having to fight BS2 so that it is not applied in front-end is surely a bad situation... are there any template providers that still use BS2?

Somebody needs to sit down and carefully re-design the protostar template with bootstrap 3.3.6 (current version).

Joomla is the only framework that I know of that isn't moving with time. Yes PHP 7 is progress but if the templates aren't updated then clearly it defeats the purpose.

I am not worried about the backend because that doesn't feature in my plans. It is the front end i.e. the protostar template that is seen by the public that needs to be updated.

[deleted user]

Instead of repeating myself, re-read my post three posts above this one. It's a lot more complex than just creating a new template because of a lot of variables outside of the template.

[CDNKnights]

I'd like to think we could come up with a (fairly) clean way of allowing things like JHtmlBootstrap and JForm to be overridden in a similar way that you can override so many other aspects of the core.

I would say rather than having a "JHtmlBootstrap" class, it could be modified to something more generic to allow users to select which framework to use. Joomla could officially support 1 base framework (maybe Bootstrap 2.3.2) but with the ability to create other output files people could use virtually any CSS Framework they wanted.

Any thoughts on the practicality of an approach like this?

[deleted user]

Well thanks to the way the autoloader is structured you can pretty freely overload core classes up to the point that they are actually included/used for the first time. Plus JHtml has a native API which lets you register custom callback functions for the different keys, so there are already ways to override those things. But for a core template to use this to overload core classes pretty much is a complete admission that the architecture is screwed up IMO.

JHtmlBootstrap isn't designed to be "framework agnostic" or generic by any means. It was written specifically as a helper class to include Bootstrap functionality (mainly to help boot up its JavaScript functions). Sadly some people abused that and JLayout to create some completely stupid functions for the sake of "easily using another framework" (i.e. there are functions in it to output a set of tabs, not the worst idea out there, but there are also two specific functions which close either a tab or a set of tabs that call JLayout files like this one: https://github.com/joomla/joomla-cms/bl ... tabset.php ). If you wanted to use Zurb or Foundation, nothing stops you from doing so except for the places that are still hard coupled to Bootstrap (which at this point shouldn't be anything more than JForm, and even that has JLayout support as of 3.5). Sure you don't get the useful JHtml helper class for those as part of core, nor should you if core is building its base templates around one framework.

Because of the scale of change between Bootstrap 2 and 3, you do practically need a JHtmlBootstrapv3 type class if you're using that framework. That can't be helped.