Midterm Update: Bootstrap for CiviCRM UI

I want to share some midterm updates regarding my GSOC 14 project- Bootstrap for CiviCRM

As many suggested that both the original UI of Civi and Bootstrap UI should co-exist, I took form elements as the basis and tried on re-working from original UI to Bootstrap UI and I have had some success in doing that.

Task 1:

My main task at the beginning of project was to map the templates files in the CiviCRM core for all relevant elements. I could find the files after some digging (Special thanks to Jeremy for helping me out). The Templates files are placed at civicrm\civicrm\templates\CRM

Task 2:

Once I found out the relevant files the main task was combining and integrating Bootstrap CSS file with CiviCRM css file. I wrote the styling in .less and compiled into .css and the file was placed in \civicrm\civicrm\css\civicrm.css
Once I have done that it was replacing in the front-end, I experimented changing the colour of text in the .less etc. and these were reflected in the front-end. This was my first milestone in the project.

Task 3:

Once the css part was being reflected in front-end, I starting to change the code of labels. In bootstrap all the elements are placed in containers so for that I had to locate the crm-container class which was at civicrm\templates\CRM\common\wordpress.tpl (I am working on WordPress so I have made changes in wordpress.tpl) By adding the wrapper class to the core I could reflect it in front-end.

Task 4:

Now I began working on the elements, beginning with labels and text boxes. As I could find the base code at templates/CRM/Profile/Form/Dynamic.tpl. I made some tweaks to the code like adding classes like form-control, control-label as needed in Dynamic.tpl file and I could customize it with Bootstrap CSS including dropdowns and checkboxes.  With this, bootstrap CSS was applied to all the text-fields with in the CiviCRM. These form fields scale smoothly across multiple screens and mobile screens in particular.

Some snapshots of the CiviCRM UI with Bootstrap’s CSS:

The desktop version of form

Form scaling across mobile screen

Goal for Upcoming week:

We have zeroed in on creating a custom QuickForm renderer to replace the default renderer with bootstrap styling. This has been a tough step to cross and I have been posting on the forum for help/leads on how to go about it. The discussions along with daily updates are available here

Any help/suggestions in this regard are welcome!

The github fork of the project is available here

I am confident that by the end of project, we will have all user facing elements bootstrapped!

I want to thank my mentors Emily Frazier and Nina Reyes for extending their total support when I have had any issues.