Kickstarting Integration of Twitter Bootstrap for Ref App UI for 2.6

Tags: #<Tag:0x00007fddef444a10> #<Tag:0x00007fddef444948>

Continuing the discussion from Ideas: Look and Feel Framework for Reference Application and the Design Call Notes https://wiki.openmrs.org/display/RES/2016-12-19+Design+Forum

My understanding is that there is no general objection to moving ahead

  1. No version of Bootstrap was selected but the feedback is that https://v4-alpha.getbootstrap.com/ is stable and is generally ready to go

  2. Pinging @raff and @SolDevelo team just a check if you have done any work in this direction. How does this affect the OWAs

  3. Need to determine if the Boostrap JS is needed - can the test be to include it then see any side effects

  4. What ui modules need to be updated to include the changes for this?

As this discussion progresses I would to follow it up with a Design Forum to help guide the process. Hoping to tag @dev5 @dev4 @dev3 @dev2 @dev1 to provide input.

Why only tag dev4 and dev5 for input? :wink:

@dkayiwa oops corrected

Man, while reviewing GCI tasks, i have realised that there can be some very good dev1s. Be sure that there are some good things i have learnt from them. Though a few of them may feel shy or inferior to input, but there are those who may even know more Bootstrap than a dev5 like me. :smile:

1 Like

@ssmusoke, I hope all those other devs have better ideas than me about this, because I don’t have a lot to say. I can only really give general advice about this:

I would start by defining more concretely the things you’re trying to achieve, because it will be much easier to analyze specific changes. For example:

  • Make the refapp UI response to scaling, from a 10" tablet up to 1.5x the current fixed width of the refapp layout
  • Update things so we can use the latest version of Font Awesome
  • Introduce xyz reusable widgets into the refapp

For example thinking about a responsive UI, I assume you’d only need to introduce Bootstrap CSS for this. However I have no idea how that will interact with the current refapp style guide in the UI Commons module. If it were me I would spike on one specific page (like the clinician-facing patient dashboard).

I used Bootstrap 3 for the Cohort Module for GSoC 16.

  1. Bootstrap v4 has been in the making for over a year and a half. I don’t know how stable it is but most Bootstrap 3 is the one that’s widely in use right now.

  2. I believe the soldevo made the OWA in Angular which is completely REST based but not sure what ui framework they used.

  3. Bootstrap JS has a bunch of useful feature like ScrollSpys, Transitions, Modals and stuff.

  4. Most likely create a new module? Why would you want to cram boostrap into existing UI functionality? It would only get more buggy and complicated.

Bootstrap’s main advantage is that you can get really good responsivity for webpages provided you use the grid judiciously and have a fair of idea of where and how you would like certain elements to looks in different sizes.

@ssmusoke feel free to ask for more details, would like to take this forward :slight_smile:

1 Like

I greatly love the fact that this advice is coming from a /dev/2 Thank you so much @bholagabbar for sharing you experience with Bootstrap. Please keep it up! :smile:

1 Like

Haha no sweat. Just like @ssmusoke told me, they are just but tags :slight_smile:

Have we had the design forum for this year? I’d like to be present then

cc @darius

@bholagabbar feel free to ping @jthomas to schedule you for one of the upcoming calls. I anxiously look forward to it. :slight_smile:

1 Like

Sounds good. We should set a date that is mutually acceptable for @ssmusoke, @darius and maybe @raff or someone from Soldevo as well.

1 Like

Responsiveness is something that referenceapplication badly needs to have and Bootstrap will surely address this.

@bholagabbar, @ssmusoke, @darius and @raff would Monday, January 23rd work for you all?

@jthomas works for me.

1 Like

Works for me

1 Like

I’ll put this on the calendar for Monday then. @bholagabbar if this does not work for you for some reason please let me now.

Hey, this works. No issues!

1 Like

We discussed on the 2017-Jan-23 Design Forum. @bholagabbar volunteered to spike on refactoring the clinician-facing patient dashboard using Bootstrap to help us understand the level of effort it might take to do the same for other parts of the Reference Application 2.6 UI.

1 Like

@ssmusoke Wouldn’t it be better if we wait for the release of Bootstrap 4?Especially considering the fact that they have major changes in line for the same :Differences between Bootstrap 3 and 4 Otherwise what will happen is that we might end up using something(Bootstrap 3) which might be abandoned in the near future with the onset of Bootstrap 4

1 Like

Boostrap 4 is still at least 6 months away, and there will be a transition anyway. Once in place, its easier to migrate to v4 than to start from scratch as now

1 Like

@burke @darius @ssmusoke Alright so I began working on integrating Bootstrap into the Clinician facing dashboard. Before starting off, I decided to check the level of responsiveness in the pages e.i how they change on window resizing.

It seems that the clinician facing dashboard is perfectly responsive. I believe the premise we had arrived to for integrating Bootstrap during the meeting was Reliance on a stable, well known framework for responsiveness, cross browser compatibilty, etc which pointed to Bootstrap.

Seems like all the CSS for responsivity already seems to have been written, presumably in the appui module. We’re using these fragments in the patient.gsp display page in the coreapps module (see file source)

Here are a screenshot from the demo server on mobile. It’s the same when you resize your browser window on your system.

Assuming I were to use Bootstrap get the columns vertically lined up, it would kinda messy because on inspecting the code, we’re using something called firstColumnFragments secondColumnFragments which lines up Diagnoses, Vitals, Appointments in the first column and the rest in the others (I think that’s what they do, lots of cross dependencies across appui etc) .There would be quite a bit of clashing CSS written for the same parts of a page.

I hope I was able to convey my point across, I don’t think it makes sense to integrate bootstrap into the existing at all. Currently the views seem stable and responsive. Introducing Bootstrap for responsivity doesn’t make sense because it’s already (seemingly) there.

Feel free to point out anything I’ve missed or any errors in my observation.