Bootstrap 4 and Fontawesome 5

Print

Now that Bootstrap 4 and Fontawesome 5 are both officially stable lets talk about what the plan is going forward for Community Builder for both of these frameworks. Check out the details below.

CB Currently is using Bootstrap 3 and Fontawesome 4. Some of you may know that Bootstrap 4 will become the default in Joomla 4. So to prepare for that CB will of course be upgrading to Bootstrap 4. The main questions being when and how does this affect you.

As for the impact this will have on your site it more or less should be nearly unnoticeable. There are some styling changes between B4 and B3, but they're primarily changes to a few of the colors making them more vibrant. We will be dropping the theme though (which is no longer default packaged with B4) so a lot of gradient button usages will become flat. Beyond that unless you've supplied custom HTML specifically utilizing B3 or F4 classes you'll have nothing to worry about. I'll directly answer some expected questions below as well.

As for the when. We've the following timeline planned, but please understand it's entirely subject to change depending on issues we may or may not run into.

  1. Release CB Activity 4.2.1 (should be this week)
  2. Release CB 2.1.4 w/ PHP 7.2 compatibility fixes (should be next week)
  3. Release CB Auto Actions 7.2.0
  4. Release CB Gallery 2.1.1
  5. Release CB GroupJive 3.1.2
  6. Release CB 2.1.5 IF necessary
  7. Release CB 2.2 w/ Bootstrap 4 and Fontawesome 5

The release of CB 2.2 will include new minor releases for all products using those CSS classes. Expect to have to update everything. I expect upgrading all the plugins layouts and CBs own core HTML will take me at least a month as it's a significant amount of work.

This release roadmap will likely take 2 months; possibly more. Joomla 4 is, I believe, scheduled for a stable release sometime in June. This puts us ahead and allows us to focus on Joomla 4 compatibility API wise instead of dealing with style conflicts.

As a side note some maybe wondering about jQuery 3.x. We are currently not going to be upgrading jQuery and it's due to jQuery Mobile and jQuery UI not being jQuery 3.x ready yet. Once both are jQuery 3.x ready we'll be looking into upgrading jQuery as well. For now we'll continue with jQuery 2.x.

There will be no CSS migration files for Bootstrap 3 to Bootstrap 4 or Fontawesome 4 to Fontawesome 5. So please study up on the changes between these releases for both frameworks if you're using their CSS classes in any of your custom HTML. Onto the Q&A.

 

Q. What if I only update CB and none of the plugins?

A. Most likely the styling of plugins will break. You will need to update all your plugins in addition to CB.

Q. What if my subscription is expired and I update CB anyway, but have CB plugins installed?

A. Then you need to renew or don't update CB as you'll be stuck in a situation where the plugins installed are no longer compatible with CBs CSS frameworks.

Q. What about my Custom HTML fields where I've Bootstrap 3 CSS classes in use?

A. You will need to manually update those usages. Check out the migration guide for details.

Q. What if I've CBs Bootstrap or Fontawesome disabled so CB uses my template usages instead?

A. Both parameters will be reset (using new version specific parameter names) on install of CB 2.2 forcing CBs CSS frameworks to load again. If your Joomla template is Bootstrap 4 driven you can then disable CBs as needed again.

Q. Why won't there be a CSS migration file to migrate B3 usages to B4?

A. Because it would triple the size of CBs CSS headers and generally isn't needed as long as the install is maintained. It would also be significant work migrating all those CSS classes manually. You maybe able to utilize 3rd party CSS or JS files loaded by your Joomla template to help with this though.

 

I hope I've answered some of your questions above and made it clear our current plans. I personally look forward to a lot of the great new features in B4 (hello flexbox!) that'll bring a lot of new life to our plugins as well as more powerful responsiveness.



krileon's Avatar
krileon replied the topic: #305144 5 years 9 months ago
The following plugins are now Bootstrap 4 ready.

CB Package Builder

This officially completes our Bootstrap 4 upgrade. We are looking at a possible release of next week. All code is currently being reviewed.
krileon's Avatar
krileon replied the topic: #304998 5 years 9 months ago
The following plugins are now Bootstrap 4 ready.

CB Paid Subscriptions (and all its integrations)

This leaves just CB Package Builder and final Joomla default template CSS conflict pass checks. We may release regardless of CB Package Builder being ready to get everything in your hands as soon as possible since all major plugins are now done.
krileon's Avatar
krileon replied the topic: #304736 5 years 10 months ago
The following plugins are now Bootstrap 4 ready.

CB Activity

Phew! That one took awhile. This leaves CB Paid Subscriptions and CB Package Builder as the last 2 needing Bootstrap 4 upgrades and we'll be ready for release!
krileon's Avatar
krileon replied the topic: #304399 5 years 10 months ago
The following plugins are now Bootstrap 4 ready.

CB Gallery
krileon's Avatar
krileon replied the topic: #304360 5 years 10 months ago
Just another progress update as its been awhile. I've been working exclusively on making CB Gallery B4 ready. It's almost complete with just the CB Activity template files in CB Gallery needing updating. With this update I've also made a lot of little improvements to the UX to make CB Gallery significantly more mobile friendly by improving its responsiveness in nearly all aspects of the template (modal windows, file tables, and more).

The responsiveness improvements means there is no more width/height setting for the container boxes. They now use entirely responsive widths so they will expand, shrink, rollover to new lines, etc.. automatically based off the device. No more being stuck with 200x200 boxes on a phone for example.
krileon's Avatar
krileon replied the topic: #304182 5 years 10 months ago
The following plugins are now Bootstrap 4 ready.

CB GroupJive Photos
CB GroupJive Videos

This concludes the GJ upgrades. So all of GJ is B4 compatible now. This means all that remains now is CB Gallery, CB Activity, CB Package Builder, and CBSubs.
krileon's Avatar
krileon replied the topic: #304100 5 years 11 months ago
The following plugins are now Bootstrap 4 ready.

CB GroupJive Events
krileon's Avatar
krileon replied the topic: #304054 5 years 11 months ago
The following plugins are now Bootstrap 4 ready.

CB GroupJive About
CB GroupJive Files
CB GroupJive Forums
krileon's Avatar
krileon replied the topic: #303994 5 years 11 months ago
The following plugins are now Bootstrap 4 ready.

CB GroupJive
CB GroupJive Wall
krileon's Avatar
krileon replied the topic: #303858 5 years 11 months ago
The following plugins are now Bootstrap 4 ready.

CB ProfileBook
CB AntiSpam
krileon's Avatar
krileon replied the topic: #303696 5 years 11 months ago
The following plugins are now Bootstrap 4 ready.

CB Profile Update Logger
CB Progress Field
CB Last Views Tab
CB Invites
CB Auto Actions
CB Gravatar Field
CB Privacy
CB Connect

Still plenty more to go, but so far looks like still on track for release by end of this month (hopefully!). Trying to get all the smaller easy to upgrade plugins out of the way first before digging into the larger plugins like CB Activity, CB Gallery, and CB GroupJive which all have heavy styling to deal with.
krileon's Avatar
krileon replied the topic: #303666 5 years 11 months ago
Big update today! Core CB Bootstrap 4 upgrade is complete. All of core CB is now Bootstrap 4 ready. I'll be starting the upgrade for plugins today and onwards. I hope all the plugin upgrades will go pretty smoothly and be done this month. Once the plugins are done we'll be releasing all of this at once so everyone can update in 1 go and be ready to use Bootstrap 4. Fontawesome 5 is still on hold as adding that on top of this upgrade is simply too much and there isn't really a need for Fontawesome 5 at this time.
krileon's Avatar
krileon replied the topic: #303545 5 years 11 months ago
Ok, almost all core usages have been updated. Am working through legacy CSS usages and replacing them where possible. Userlist grid usage is also now a proper responsive grid as I've standardized the canvas layout usage used at top of profile to also be usable for "mini" canvas layouts. Once this is done I can begin updating the styling in various plugins. So it's looking like CB 2.2 and plugin styling updates should hopefully be done by end of this month. So basically 1 month longer than I expected.

With that said I'll be holding off on Fontawesome 5 since it's a pretty massive rewrite in it self as well. Will consider Fontawesome 5 later down the road, but for now we'll stick to Fontawesome 4. FA5 has really made it a nightmare since they completely broke all backwards compatibly due to multiple namespace classes instead of single .fa class.
krileon's Avatar
krileon replied the topic: #303428 5 years 11 months ago
Unfortunately this is taking longer than expected, but just wanted to let everyone know that I am certainly still working on Bootstrap 4 upgrade every day. Who'd of thought it'd take so long to rewrite all of CBs styling, lol! Once done with CBs core I'll start upgrading plugins, which hopefully should go quicker since for most plugins all their HTML is centralized to their template files.
krileon's Avatar
krileon replied the topic: #303380 5 years 11 months ago
Out with the old and in with the new. I've redesigned the manage connections tab to be a bit more modern and less old-school table. Check out the difference below.

Old:


New:


The new design is completely responsive and mobile ready. The old design being a table was nearly unusable on mobile devices due to tables being unable to collapse elegantly enough for small devices meaning there was a lot of scrolling just to adjust connection types or add a comment to a connection.
krileon's Avatar
krileon replied the topic: #303203 6 years 6 days ago
I've almost the entire profile canvas layout redone with Bootstrap 4 classes. This eliminates roughly 50% of the custom CSS applied by CB. Check out the progress below.



The biggest takeaway here is the massive improvements to the tab menu and the cb menu bar. Currently there's scrollers that scroll left/right if there's too many menu items. The reason this was done is due to positioning behavior of the menu bars. They had no overflow handling because they couldn't due to absolute positioning offsets. These issues are eliminated entirely and both CB Menu and Tab Menu can overflow perfectly fine allowing for A LOT more menu items to be visible and easily used. The responsiveness of the canvas layout has also been significantly improved (am still making responsive improvements too!) so it can work better on smaller screens.
krileon's Avatar
krileon replied the topic: #302973 6 years 2 weeks ago
Still progressing on Bootstrap 4. It's a significant upgrade. A lot of usages need to change, but some great news is I should be able to eliminate a good 60% of our custom CSS in favor of Bootstrap 4 classes. This should mean CB will better integrate with your Joomla Bootstrap 4 templates for an even more consistent look. Fontawesome 5 maybe delayed until later since it's such a significant change to the class selectors and breaks a lot of usages (they went from 1 prefix class to 4 significantly breaking backwards compatibility).
krileon's Avatar
krileon replied the topic: #302490 6 years 3 weeks ago
Just another update. Everything is progressing well. With GJ released we just have a new CB release to do. I'm already working on the Bootstrap 4 upgrade. I'm looking at it taking probably at least 2 months as I have to unfortunately rewrite literally all of our styling, lol.

With all the new classes available in Bootstrap 4 CB won't have to utilize as much custom CSS allowing even deeper integration with your Joomla templates (if using Bootstrap 4).

We'll likely go ahead with a Beta release once it's ready as there WILL be styling conflicts that need to be addressed as they are found. I will be testing on Joomla 3.x default protostar ONLY and conflicts will be resolved for it alone until Joomla 4 where I will do same for J4 default template.

Please don't be surprised to see slowed releases during this time. I've to switch back and forth on repository branches every day to handle support for stable releases and develop this at the same time so it's a bit of work constantly going back and forth. I'll likely only be pushing bug fix releases with little to no feature releases during this time. It just depends on the urgency mostly.
krileon's Avatar
krileon replied the topic: #301919 6 years 1 month ago
Minor slow down in progress. CB Gallery 2.2.0 should be out next week. Had some delay as was working on our build script responsible for building releases for us automatically; we're making some improvements to it so we can push releases with less delay from our end.
krileon's Avatar
krileon replied the topic: #301613 6 years 1 month ago
Another progress update. CB Gallery is progressing well. Changed version from 2.1.1 to 2.2. Also some very good news regarding client side resizing. Previously if an image had EXIF orientation (e.g. usually photos taken with mobile device) it was ignored when using client side resizing so you had to disable such a huge performance improvement for images to properly rotate. This is no longer an issue as have implement EXIF orientation parsing in the client side resizing. This is available now in the latest build.

In addition to EXIF orientation there is now jQuery validation for muti-uploads. This prevents POST to your server when the upload would for sure fail validation. This saves resources and gives instant feedback to the user. Additionally the maximum upload size could also be set to be higher than your PHP limits would even allow. It will not properly adjust the maximum upload limit to take into account PHP limits (and use those for multi-upload validation).
krileon's Avatar
krileon replied the topic: #301506 6 years 1 month ago
Looks like there was only 3-4 PHP 7.2 compatibility fixes needed. We should have a build out hopefully sometime this week with those fixes. If anyone finds any issues once released please be sure to let us know.

This is also a heads up. With CB 2.2 (Bootstrap 4 and Fontawesome 5 upgrade) release we will be pushing the minimum PHP version required for CB to 5.6. This is to allow us to better support PHP 7 while still maintaining support for Joomla 3 (which will go EOL by 2020) giving us time to eventually move our minimum supported PHP version to 7.2 or higher (depends, we've got roughly 2 years to do all that) for CB 3.0 (major major rework of all our API!).

In short I HIGHLY recommend upgrading to PHP 7.1 if available and once this build is out do upgrade to PHP 7.2. The performance different is absolutely noticeable. If your host does not offer PHP 7 yet I suggest contacting them on a timeframe as to when it'll be available or consider switching hosts.
krileon's Avatar
krileon replied the topic: #301403 6 years 2 months ago
Just an update on this. Looks like we're still on schedule. CB Activity 4.2.1 released and CB Auto Actions 7.2.0 should be ready for next week followed by PHP 7.2 testing and fixes.

A build release for CB Auto Actions 7.2.0 has already been released as of today and contains some new improvements for activity grouping. Activity grouping allows the assets of 1 activity to be attached to another activity. What this prevents is storing tons of activity for same/similar activity. Currently if you upload 100 photos in CB Gallery that's 100 activity entries. With this new grouping feature it now generates 1 activity entry and attaches the other 99 would-be activity assets to it. CB Gallery can then parse those out fine. This requires latest builds for CB Activity, CB Auto Actions, and CB Gallery to utilize, but you should see performance gains going forward where gallery activity is involved.