Bootstrap CSS for CiviCRM UI was conceived as a project to provide a templating layer to native CiviCRM elements. For the past three months, my efforts for focussed on this. As we come to the end of my GSoC project, here are some updates.
It was decided initially that the project should prioritize user-centric pages and then follow up with administration console pages. Hence, I began working with front-end pages including Profile and Contribution pages.
Profile Page:
Contribution Page :
An added advantage of this approach was CiviCRM pages that were mobile friendly and easily scalable.
After much discussion, Bootstrap has been included as an optional add-on which can be enabled/disabled from the Administration settings.
Also, to provide ease of customization, Bootstrap has been included as two files: a vanilla bootstrap.css file and a custom.bootstrap.css file to add any other custom styles the user requires. This provides scope for extensive styling. For example, Bootswatch (http://bootswatch.com/) provides multiple themes which can be added with minor changes.
As I had some time left, I also made a beginning on bootstrapping administration console. I could go through main page and few search pages. This is a work in progress.
All supporting documentation will be updated on the wiki here and you can fork the repo I have been working on from GitHub here
As the title suggests, this is just a beginning for CiviCRM styling. I hope this initiative attracts enough enthusiasm from the community to take it forward. I myself will continue working on this post project period.
Needless to say, I could have not done all this by myself if not for support and encouragement from the community. I would like to specially thank my mentors Emily Frazier & Nina Reyes for constant supervision; Xavier for being patient with all my silly doubts; Jeremy Proffitt & Eileen for helping with few roadblocks and everyone who took part in the conversation on the forums and blogs.
Thank You CiviCRM for giving me this opportunity. I hope I have added some value.