As discussed on this thread, plans are underway to replace the Reference Application Style Guide with Twitter Bootstrap specifically Bootstrapv4.0.0-beta2. Recently a team of four apprentices from Andela (@kwahalf, @adams, @dbamidele and I) started a spike to kickstart this process. Below are the discoveries we made.
Theming in Bootstrap 4 is accomplished by “Sass variables, Sass maps, and custom CSS.” This required “additional tooling such Sass compiler” for compiling the CSS.
The reference application currently uses gem sassv3.2.5 which unfortunately cannot transpile mixins, a major component of bootstrap 4. It requires gem sassv3.3 or higher.
Attempts to update gem sass resulted into this error
As an alternative, we attempted to use Bootstrap v3.3 using the Customize and download option. The generated configuration is saved here and can be revisited and customized further if need be. This enabled us to download customised compiled css and js bootstrap files that were used to redesign the reference app login and home pages shown below. [Repo]
In order to replace the Reference Application Style Guide with Twitter Bootstrap, there is need to update gem sass to v3.3 or higher. Using Bootstrap in place of a custom OPENMRS style guide is however strongly encouraged to:
Achieve responsiveness,
Enable quick adaptability of new developers (Bootstrap is popular and hence there is no need to familiarise oneself with a whole new framework), and
Enjoy all associated benefits of Bootstrap’s huge support community.
Searching for “sass” on https://openmrs.jfrog.io/openmrs/webapp/#/home shows what is currently available in the OpenMRS maven repository. If you are unable to resolve rubygems:sass:gem:3.4.21 then you likely need to either add a different repository in your pom to search or you need to upload these as additional 3rd party jar versions to the OpenMRS maven repository. Hopefully @raff or @wyclif or @dkayiwa can advise on that.
I personally would love to be rid of anything ruby gem related from our build, so if this is an opportunity to do that and go with something like this and related packages, that could be interesting. But that is probably out of scope of what you are trying to do here
While trying to update the rubygems sass version, I ran into this error:
[ERROR] Failed to execute goal on project referenceapplication-omod: Could not resolve dependencies for project org.openmrs.module:referenceapplication-omod:jar:2.7.0-SNAPSHOT: Failure to find rubygems:sass:gem:3.4.21 in http://mavenrepo.openmrs.org/nexus/content/repositories/public was cached in the local repository, resolution will not be reattempted until the update interval of openmrs-repo has elapsed or updates are forced -> [Help 1]
So I followed the url from the error http://mavenrepo.openmrs.org/nexus/content/repositories/public and I was able to locate rubygems>sass folder https://openmrs.jfrog.io/openmrs/public/rubygems/sass/ and I discovered they only have two versions, v3.2.5 and v3.2.10
So I changed the sass version in the pom.xml file from v3.2.5 to v3.2.10 and I ran mvn install and it installed successfully.
I then added the bootstrap scss and I clean install again and now I’m getting the same error with v3.2.5https://pastebin.com/xk9mK2Ya.
I think an optional third party jar version like @mseaton suggested is worth giving a try.
Maven is not really suited for front-end development. We will just put the generated bundle in the maven project or fetch it with https://github.com/eirslett/frontend-maven-plugin. It will be super easy to use in Open Web Apps as well.
@raff Would you be available to help with the re-architecture? it makes sense to use the best tool for the job.
What would be the path to achieve moving from sass to webpack? Will it support using Boostrap as a foundation, with stylesheets for Ref App, and custom themes to be overridden by implementors?