CiviCRM Community Forums (archive)

*

News:

Have a question about CiviCRM?
Get it answered quickly at the new
CiviCRM Stack Exchange Q+A site
This forum was archived on 25 November 2017. Learn more.
How to get involved.
What to do if you think you've found a bug.



  • CiviCRM Community Forums (archive) »
  • Old sections (read-only, deprecated) »
  • Developer Discussion »
  • Google Summer of Code »
  • Bootstrap for CiviCRM UI
Pages: [1] 2 3 ... 5

Author Topic: Bootstrap for CiviCRM UI  (Read 10624 times)

teja-amil

  • I post occasionally
  • **
  • Posts: 38
  • Karma: 0
  • CiviCRM version: 4.4
  • CMS version: Joomla! 3.2
  • MySQL version: 4
  • PHP version: 5
Bootstrap for CiviCRM UI
February 04, 2014, 09:51:36 am
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

  • Administrator
  • I’m (like) Lobo ;)
  • *****
  • Posts: 15963
  • Karma: 470
    • CiviCRM site
  • CiviCRM version: 4.2+
  • CMS version: Drupal 7, Joomla 2.5+
  • MySQL version: 5.5.x
  • PHP version: 5.4.x
Re: Bootstrap for CiviCRM UI
February 04, 2014, 02:28:13 pm

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
A new CiviCRM Q&A resource needs YOUR help to get started. Visit our StackExchange proposed site, sign up and vote on 5 questions

teja-amil

  • I post occasionally
  • **
  • Posts: 38
  • Karma: 0
  • CiviCRM version: 4.4
  • CMS version: Joomla! 3.2
  • MySQL version: 4
  • PHP version: 5
Re: Bootstrap for CiviCRM UI
February 04, 2014, 06:41:30 pm
Donald - I am an undergraduate student. Please connect me with potential mentors to take this forward.

Thanks

kreynen

  • I post occasionally
  • **
  • Posts: 105
  • Karma: 8
Re: Bootstrap for CiviCRM UI
February 05, 2014, 07:26:15 am
@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

  • I post occasionally
  • **
  • Posts: 38
  • Karma: 0
  • CiviCRM version: 4.4
  • CMS version: Joomla! 3.2
  • MySQL version: 4
  • PHP version: 5
Re: Bootstrap for CiviCRM UI
February 05, 2014, 09:06:05 am
@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

  • Forum Godess / God
  • I’m (like) Lobo ;)
  • *****
  • Posts: 4453
  • Karma: 161
    • Tech To The People
  • CiviCRM version: yes probably
  • CMS version: drupal
Re: Bootstrap for CiviCRM UI
February 05, 2014, 10:06:03 am
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+
-Hackathon and data journalism about the European parliament 24-26 jan. Watch out the result

kreynen

  • I post occasionally
  • **
  • Posts: 105
  • Karma: 8
Re: Bootstrap for CiviCRM UI
February 10, 2014, 01:00:02 pm
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

  • I post occasionally
  • **
  • Posts: 105
  • Karma: 8
Re: [GSoC] Bootstrap for CiviCRM UI
February 10, 2014, 02:57:43 pm
Added [GSoC] to title

teja-amil

  • I post occasionally
  • **
  • Posts: 38
  • Karma: 0
  • CiviCRM version: 4.4
  • CMS version: Joomla! 3.2
  • MySQL version: 4
  • PHP version: 5
Re: Bootstrap for CiviCRM UI
February 10, 2014, 10:15:39 pm
@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.
« Last Edit: February 10, 2014, 10:19:52 pm by teja-amil »

teja-amil

  • I post occasionally
  • **
  • Posts: 38
  • Karma: 0
  • CiviCRM version: 4.4
  • CMS version: Joomla! 3.2
  • MySQL version: 4
  • PHP version: 5
Re: Bootstrap for CiviCRM UI
February 24, 2014, 10:53:26 am
@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

  • Forum Godess / God
  • I’m (like) Lobo ;)
  • *****
  • Posts: 4453
  • Karma: 161
    • Tech To The People
  • CiviCRM version: yes probably
  • CMS version: drupal
Re: Bootstrap for CiviCRM UI
February 24, 2014, 11:37:15 am
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+
-Hackathon and data journalism about the European parliament 24-26 jan. Watch out the result

bmccarthyhp

  • I’m new here
  • *
  • Posts: 14
  • Karma: 0
  • CiviCRM version: 4.4.1
  • CMS version: Joomla 2.5.9
  • MySQL version: 5.5
  • PHP version: 5.3
Re: Bootstrap for CiviCRM UI
February 25, 2014, 01:06:34 pm
+1. Sounds like an awesome project and a definite need for CiviCRM.

s0014

  • I post occasionally
  • **
  • Posts: 56
  • Karma: 2
  • CiviCRM version: 4.4.5
  • CMS version: Drupal 7.28
  • MySQL version: 5.5.37
  • PHP version: 5.5.9
Re: Bootstrap for CiviCRM UI
March 07, 2014, 09:54:40 am
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.
Sid
DataViz Project, GSoC 2014

Jeremy Proffitt

  • I post occasionally
  • **
  • Posts: 63
  • Karma: 2
    • Mobius New Media
  • CiviCRM version: 4.4.x
  • CMS version: Joomla 2.5.x/3.x / D7
  • MySQL version: 5.1.x
  • PHP version: 5.3.10+, 5.4.x
Re: Bootstrap for CiviCRM UI
March 20, 2014, 09:12:41 am
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.
Jeremy Proffitt
Mobius New Media
IRC: JP_EzoD

xavier

  • Forum Godess / God
  • I’m (like) Lobo ;)
  • *****
  • Posts: 4453
  • Karma: 161
    • Tech To The People
  • CiviCRM version: yes probably
  • CMS version: drupal
Re: Bootstrap for CiviCRM UI
March 20, 2014, 09:46:38 am
Interesting.

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

X+
-Hackathon and data journalism about the European parliament 24-26 jan. Watch out the result
Pages: [1] 2 3 ... 5
  • CiviCRM Community Forums (archive) »
  • Old sections (read-only, deprecated) »
  • Developer Discussion »
  • Google Summer of Code »
  • Bootstrap for CiviCRM UI

This forum was archived on 2017-11-26.