This week, I began work on my Google Summer of code 2014 project “Bootstrap and CiviCRM”. The project was proposed and selected to address the following goals:
1. Improve the user interface of CiviCRM
2. Provide a consistent and scalable UI framework for developers to extend/customize CiviCRM
3. Make CiviCRM compatible with mobile devices
Bootstrap was chosen as the framework of choice after much debate and discussion with the community. We also understand the enormous scope of the project and its long term implications in terms of changes to the codebase and existing extensions. We understand that GSoC coding period is too small to bring about changes to all components of CiviCRM. Instead, we have decided to focus on creating a solid process and documentation that can be taken forward by the community. In this context, after brainstorming with my mentors, we came up with a few possibilities on how to take this forward.
Some important questions we face are:
Which components do we take up during GSoC period?
There have been suggestions on taking up Donations while some have warned about this being too complex to begin with.
How do we integrate/replace the bootstrap CSS with existing Civi CSS?
Currently, Civi has a specific CSS structure eg. civicrm_entityname-label. Bootstrap however will have a different neutral structure without any references to Civi. If we change the bootstrap nomenclature, the whole objective is lost. We will no longer be able to customize it on the go. We came with the following alternatives:
1. Compile civicrm classes using sass/less includes/extends
2. Remove civicrm classes and replace for bootstrap - there is a time constraint
3. Put the appropriate bootstrap classes/id to the templates for each of the components we will be addressing (a lot of templates), leaving existing civicrm classes as is.
One possible way forward that occurred to us is - At first try, we do it by replacing all the classes that are affected. I am doing this by renaming civicrm.css as custom.css and adding bootstrap.css file. This way, whatever pages are bootstrapped pull their styles from bootstrap.css file and the rest from civicrm.css Whatever pages we successfully transition will be of bootstrap and rest will be in custom css file and can be taken up later. By the end of it, custom.css will become obsolete.
I am not sure what road blocks we will face. What do you think? Any feedback/suggestion/directions from the community on making a roadmap for this process will be extremely valuable.
