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.
Comments
Well done - this looks really exciting - great to see CiviCRM screens looking so modern. One question - what is the code status? Is it in core? Is it a PR? Is is an extension?
Hi,
Some work sitll need to be done on this.It is currently not part of core,though if included it will be part of core.
Meanwhile, all the code regading this project is avilable Here. You can pull this and install it through gittify.
Documentation for this project is also wriiten, you can find it Here
Hi,
Well done, definitely an improvement over the existing layout.
Is there a option to use the bootstrap of the CMS? ie. I'm often using a boostrap theme for drupal, that already includes boostrap css (or a custom css that extends it).
Is "Use bootstrap CSS"=no covering that case? What about the boostrap js?
Also do you disable the civicrm css only on the pages that you have "bootsraped" (the front end parts) or is this the same setting for back and front office?
Civi with a sleek backend UI I think would increase adoption of the product.
Good work, Teja!
Your documentation gives specific steps for Drupal and indicates that WordPress themes are bootstrap compatible. What about Joomla?
From what I can see, you have been coding this in a way that would be appropriate if it is to be committed to core rather than packaged as an extension. One concern I have is that it might not make sense to include this in core unless all of CiviCRM were bootstrap compatible, but I might be missing something. How would it work if a site uses a Bootstrap based theme, turns on your Bootstrap stuff, but then exposes something like an Events Registration page? How would that page inherit the theme of the CMS?
One piece of documentation I'd be interested in seeing is a high-level approach to making some other part like CiviEvent of CiviCRM work with Bootstrap. Do you have some advice on how to do that now that you have done profiles, contribution pages and some admin pages?
I did a few tests and it looks nice! This will help a lot for theming CiviCRM public-facing forms in a Bootstrap theme.
Any chance we could integrate some of the patches early in core? For example, the "form-control", "btn", "btn-{primary,success,danger}" classes should not have any impact on CiviCRM's core CSS and will make it much easier for front-end theming.
How can one make use of this project now?
The link to the code looks like it's a clone of an entire CiviCRM install that is now out-of-date.
I did look at the documentation page. There should be more general explanatory text there. Would copying the mentioned CSS files from the code repository and then overriding the various .tpl and .php files listed in the rest of the doc work?
Hi
The code has not been updated because I am on a break for the past month due to university exams. Will pick this up again after Dec 20th. I dont see why it will shoukd not work if you manually override as mentioned above.
Thanks