Bootstrap for CiviCRM UI

[teja-amil]

I was looking at prospective projects for Google Summer of Code at CiviCRM and was thinking Bootstrap (http://getbootstrap.com/) could be a good fit for civiCRM in terms of usability and scalability. The framework also offers native mobile interface support. Further, Joomla! has fully adopted Bootstrap from Joomla! 3.0. There could be multiple layers with core integrated with Bootstrap framework and additional native styles for wordPress and Drupal.

Any thoughts on this? 

[Donald Lobo]

r u a student wanting to do so, and if so we can try and match u with a mentor?

or r u a mentor trying to recruit a few students to sign up for this project?

lobo

[teja-amil]

Donald - I am an undergraduate student. Please connect me with potential mentors to take this forward.

Thanks

[kreynen]

@lobo, you might want to reach out to John Derry to see if he'd be interested in mentoring this project.  He designed the CiviCRM Demo (http://civicrm.alittlehelphosting.com/) using Bootstrap.

The fact that Joomla moved to a Bootstrap based default theme in J3 is news to me... but exciting news.  I'm only familiar with Bootstrap licensing perspective.  The Drupal community pushed the Bootstrap team to move from an Apache 2.0 license to an MIT.  That process took > 2 years.

https://github.com/twbs/bootstrap/issues/2054

There are several Drupal projects waiting for the first official MIT licensed version of Bootstrap (3.1) so they can start including it in their distributions.

https://drupal.org/node/1445226

Joomla didn't wait...

https://github.com/joomla/joomla-cms/blob/staging/media/jui/js/bootstrap.js

I'm really surprised that the Joomla project included a Apache 2.0 licensed library in a GPLv2 licensed project  Everything I've read says that the Apache 2 license can only be included with GPLv3 and even that is one way compatibility (GPLv3 code cannot be used in a Apache 2.0 licensed project).  CiviCRM is AGPLv3, so the Apache vs. MIT issue doesn't apply. 

I was also surprised that JView is currently the only templating engine in Joomla (other than PHP itself).

https://groups.google.com/forum/#!topic/joomla-dev-cms/6AdCfMR9DBA

Is that really correct?

I did know that most WordPress themes are just PHP unless the theme requires adding an engine like http://jarednova.github.io/timber/.  That makes sense for a CMS that originally targeted blogs and basic brochure-ware sites.

Drupal 7 uses PHPTemplate, but Drupal is moving to Twig in D8.  Backdrop (a Drupal fork) considered both moving to Twig and making Bootstrap the default theme...

https://github.com/backdrop/backdrop-issues/issues/54
https://github.com/backdrop/backdrop-issues/issues/83

After some discussion, Backdrop stuck with PHPTemplate so that more D7 modules would work "out of the box", but it's worth reviewing those threads.

CiviCRM uses Smarty as the template engine which uses markup that looks more like Twig or Mustache than PHPTemplate or straight PHP. 

I can't decide if singularity of having so many large projects using the same library for their look at feel is a good thing or not.  It would certainly reduce the frustration many themers who are more familiar w/ Drupal's PHPTemplate or WordPress PHP templates when editing a CiviCRM template to at least have a familiar library of javascript and CSS classes to work with. 

At some point I expect there will be Bootstrap backlash.  Drupal sites are already documenting ways to tweak to Bootstrap look to be less "bootstrapy" w/ http://bootswatch.com/.

http://webwash.net/tutorials/how-use-bootswatch-themes-drupal-7

That said, I think we are years away from that and it's impossible to predict how Bootstrap will evolve.  I think this would be a great GSoC project.  In your full proposal, I'd suggest including a few weeks for before and after usability testing of new CiviCRM users and developing some documentation for developers familiar with the theming the CMS'es CiviCRM pairs with.

[teja-amil]

@kreynen - I agree with you. Bootstrap can evolve unpredictably. However, the large scale popular adaptation and active support by Twitter hold a strong case for its growth. I did not know about  http://bootswatch.com/ This is a nice way using Bootstrap and yet standing out.

As I see it, the core and Joomla! modules can be reworked with Bootstrap. With WordPress and Drupal, the modules could take two ways - a css overlay for native WordPress UI or continue the Bootstrap UI for consistency across platforms.

What do you think?

Also, can we add this to the list of GSoC ideas on wiki? I was thinking the Mailblast UI idea could be merged on to this to make a bigger project?

[xavier]

Would be awesome to use boostrap convention for classes name and stuff. Any strong standard that would free us discussing how to name classes would work Boostrap has the benefit of being the new black, not super original, but goes with everything and plenty of options to customise. jquery-ui lost ground on that one IMO.

For drupal users, I tried to create a boostrap theme that would work with civi
https://github.com/TechToThePeople/civicrm_bootstrap

but bumped into some incompatibilities (panel collapse/expend if I recall). It seemed to be because boostrap 3 wasn't stable. I haven't tried recently, but kinda head's up that you might bump into some issues.

X+

[kreynen]

Bootstrap 3.1 was just released with an MIT license http://blog.getbootstrap.com/2014/01/30/bootstrap-3-1-0-released/.  I finally approved the Drupal whitelist entry making it much easier to include Bootstrap w/ a Drupal theme or module. 

I've added the summary of the project idea to http://wiki.civicrm.org/confluence/display/CRM/Google+Summer+of+Code+-+2014

@teja-amil, I am submitting CiviCRM's Organization application to GSoC today.  We will find out if CiviCRM is approved on February 24.  Students can't start submitting full project proposals, until March 10. 

Obviously if you'll want to work on a full project proposal before March 10, but I'd hold off putting too much more effort into this until we find out if CiviCRM is accepted as an organization.

[kreynen]

Added [GSoC] to title

[teja-amil]

@kreynen Thanks for the update. I guess Feb 24 to Mar 10 is enough time to prepare a good project proposal. I will get started then.

[teja-amil]

@kreynen @xavier @lobo - Fantastic News! CiviCRM has been accepted for Google Summer of Code 2014! I am guessing you have received the confirmation  emails already!

I will begin working on my proposal - Bootstrap UI for CiviCRM; Nina Reyes  is mentioned as potential mentor for the project. Could you please help me connect with her?

Any pointers on further course of action will be helpful!

[xavier]

Hey, yes, it's great.

It would be great you blog about the project on civicrm.org. Detail what plan you have, where it can have an impact and how it would relate to WP, J! and Drupal.

See if others have suggestions and make everyone aware of the project.

The naming convention of boostrap on id and classes might force to change some stuff on civi, that could have an impact on some extensions and custom code too. The earlier we mention it and plan, the less disruptive it's going to be.

X+

[bmccarthyhp]

+1. Sounds like an awesome project and a definite need for CiviCRM.

[s0014]

Hi,

I am Siddharth Gupta, a Computer Science undergraduate student in iiitd.ac.in. I have been working on Website Development and Designing since past two and half years, and worked with Bootstrap on a lot of my work. I also have worked on Wordpress themes and used Bootstrap 3.0 for the same.

I have also worked on implementing UI changes on OpenLX's Koha library management system, you can checkout the same at library.iiitd.edu.in

I am really interested in taking up this project to implement Bootstrap on CiviCRM as my GSOC project. I would like to know more about the same and connect to the mentor of the project as well.

[Jeremy Proffitt]

As a Joomla developer who basically ditches the Civi default frontend coding in favor of the API and Bootstrap, I'm very excited to see how this is going to start shaping up.

[xavier]

Interesting.

Is your code open source? Might be interesting for others.

X+