|
|
# Key resources
|
|
|
|
|
|
**UI reference guide**
|
|
|
|
|
|
https://docs.civicrm.org/dev/en/latest/framework/ui/
|
|
|
|
|
|
Includes correct markup for accordians, buttons, icons, date picker. Also a guide to usage of post 4.7 FontAwesome icons.
|
|
|
|
|
|
**Templating reference guide**
|
|
|
|
|
|
https://docs.civicrm.org/dev/en/latest/framework/templates/
|
|
|
|
|
|
Overriding core template features
|
|
|
|
|
|
# Current strategy..
|
|
|
|
|
|
The [roadmap](https://civicrm.org/roadmap) suggests integrating CiviCRM with Bootstrap is the current goal.
|
|
|
|
|
|
|
|
|
# A brief history..
|
|
|
|
|
|
### 2004.. CiviCRM launches
|
|
|
|
|
|
### 2009: Templating changes (3.1)
|
|
|
Following the NYC dev sprint, was the first public attempt to improve the markup, moving from tables to divs, be more careful with CSS specificity
|
|
|
https://civicrm.org/blog/kylejaster/refactoring-civicrms-templating-system-starting-css
|
|
|
This led to a few docs outlining a bunch of problems:
|
|
|
Some guidelines: https://wiki.civicrm.org/confluence/display/CRM/Interface+design+guidelines
|
|
|
Usability issues: https://wiki.civicrm.org/confluence/display/CRM/Usability+-+Layout+and+CSS
|
|
|
Form layout: https://wiki.civicrm.org/confluence/display/CRM/Layout+Standards
|
|
|
This had some progress with an update in 2010,
|
|
|
https://civicrm.org/blog/kylejaster/civicrm-31-templates-theming-css-bonanza
|
|
|
Which inspired development of the theming engine still in existence today, outlined:
|
|
|
https://wiki.civicrm.org/confluence/display/CRMDOC/Theming+CiviCRM
|
|
|
|
|
|
### 2014: CiviCRM & Bootstrap
|
|
|
This began as a GSoC project in 2014. It is listed as goal 2 on the CiviCRM Roadmap: https://civicrm.org/roadmap
|
|
|
Some related blogs:
|
|
|
|
|
|
https://civicrm.org/blog/teja/civicrm-bootstrap-thoughts-on-interface-design
|
|
|
|
|
|
https://civicrm.org/blog/teja/bootstrap-civicrm-what-do-you-think
|
|
|
|
|
|
Forum thread: https://forum.civicrm.org/index.php%3Ftopic=31534.0.html
|
|
|
Some docs: https://docs.civicrm.org/sysadmin/en/latest/integration/drupal/bootstrap-css/
|
|
|
|
|
|
### 2016: Shoreditch
|
|
|
Bootstrap based and developed by Compucorp in response to slow rollout of the CiviCRM/Bootstrap project, built for Drupal 7.
|
|
|
https://github.com/compucorp/org.civicrm.shoreditch
|
|
|
|
|
|
**Blogs: March 2018**
|
|
|
|
|
|
https://civicrm.org/blog/jamienovick/going-shoreditch-civicrms-new-ux-design-comes-to-life-pt-1-of-2
|
|
|
|
|
|
https://civicrm.org/blog/nathan-porter/a-look-a-civicrms-new-user-experience-shoreditch
|
|
|
|
|
|
**Shoreditch design guide:**
|
|
|
|
|
|
* **[Colours](https://lh6.googleusercontent.com/_MHHLU6K_RS2FitnEMSsjkzDxBtpub305w20_BoC_ReENDgQtrQrZbyqm8awsMaXSYlfRSBG4FMcZNQFyagIqxuYxVCGvvqrcHEc4GccFC5AChNL2eCFK925aMMG--Uy2xKxleQu)**
|
|
|
* **[Badges/numbers](https://lh6.googleusercontent.com/-YcIUPcdS0rw_348PKM62cCPyZVE4DBbr86L9PMpg8P9xNBL8CcTIS4U1E-7LPk9k60kCjOltabO9WAPNqpFWnqwTPQFJm23_mVybfBkvjAUFerh4p4JGMgg7LIpWwpwkA3T9lyd)**
|
|
|
* **[Checkboxes](https://lh6.googleusercontent.com/9pnhVTtM4PsktyjpQpyE-H4UPL4qJctmPjhkh3faKnxwvRYRynCzKmY-H-fJ8fgwtBtcLISiGg8vRAgDlzuWJ5iF8zPnycL8pfjXDUTeLeLy7lwDLIvm4ynR1fO7ZPUxOS0yQHER)**
|
|
|
|
|
|
# Current solutions:
|
|
|
|
|
|
### Drupal-led: Shoreditch (see above)
|
|
|
https://github.com/compucorp/org.civicrm.shoreditch
|
|
|
|
|
|
### Wordpress-led: CiviCRM Admin Utilities (CAU)
|
|
|
With funding from Greenleaf, Christian Wach created a set of Wordpress CiviCRM admin utilities that, amongst other things, made CiviCRM's look and feel much closer to Wordpresses.
|
|
|
https://wordpress.org/plugins/civicrm-admin-utilities/
|
|
|
|
|
|
### Joomla-led: Shelford
|
|
|
A single css file running on top of civicrm.css, loaded through the admin paths page (only fully tested with Joomla)
|
|
|
https://github.com/vingle/civicrm-shelford
|
|
|
|
|
|
### Cross-CMS: Haystack
|
|
|
Matthew Wire turned CAU into an early extension that can run across all CMSs, with CMS-specific overrides and some user-config. It uses reponsive tables to considerably improve the mobile and tablet behaviour of Civi admin pages.
|
|
|
https://github.com/mattwire/civicrm-haystacktheme
|
|
|
|
|
|
**Old/depracated solutions**
|
|
|
https://github.com/andy-walker/com.uk.andyw.styler
|
|
|
|